'use client'

import * as motion from 'framer-motion/m'
import { Gift } from 'lucide-react'
import { useTranslations } from 'next-intl'

export default function ReferralHero({ enabled = true }: { enabled?: boolean }) {
  const t = useTranslations('ReferralPage')

  return (
    <section className="relative overflow-hidden rounded-2xl mb-8">
      <div className="absolute inset-0 bg-gradient-primary opacity-90" />
      <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-80 h-80 bg-white/5 rounded-full blur-3xl" />

      <div className="relative z-10 px-6 py-12 md:px-10 md:py-16 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-4"
        >
          <Gift size={16} className="text-white" />
          <span className="text-white text-sm font-medium uppercase tracking-wide">
            {t('badge')}
          </span>
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4"
        >
          {t('heroTitle')} <span className="text-yellow-300">{t('heroHighlight')}</span>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="text-white/80 text-base md:text-lg max-w-2xl mx-auto"
        >
          {enabled ? t('heroSubtitle') : t('heroSubtitlePaused')}
        </motion.p>
      </div>
    </section>
  )
}