'use client'

import { motion } from 'framer-motion'
import { ArrowRight, ChevronDown } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import GradientText from '@/components/ui/GradientText'
import CTAButton from '@/components/ui/CTAButton'
import StatusIndicator from '@/components/ui/StatusIndicator'
import { ANIMATION } from '@/lib/constants'

export default function HeroSection() {
  const { lang } = useApp()
  const i = t(lang)

  return (
    <section id="hero" className="relative min-h-screen flex items-center justify-center enterprise-grid overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-enterprise-dark" />

      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: ANIMATION.ease }}
        >
          <div className="inline-flex items-center gap-3 mb-8 px-4 py-2 rounded-full border border-white/[0.08] bg-white/[0.04]">
            <StatusIndicator label={i.hero.status} />
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1, ease: ANIMATION.ease }}
          className="mb-3"
        >
          <span className="mono-label tracking-widest">{i.hero.badge}</span>
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2, ease: ANIMATION.ease }}
          className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight text-shadow-glow"
        >
          {i.hero.title}
          <br />
          <GradientText>{i.hero.titleHighlight}</GradientText>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3, ease: ANIMATION.ease }}
          className="text-lg sm:text-xl text-white/50 max-w-2xl mx-auto mb-10"
        >
          {i.hero.subtitle}
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4, ease: ANIMATION.ease }}
          className="flex flex-col sm:flex-row items-center justify-center gap-4"
        >
          <CTAButton href="/plattform">
            {lang === 'de' ? 'Plattform entdecken' : 'Discover Platform'}
            <ArrowRight className="w-4 h-4" />
          </CTAButton>
          <CTAButton variant="ghost" href="/preise">
            {i.hero.cta}
          </CTAButton>
        </motion.div>
      </div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
      >
        <motion.div
          animate={{ y: [0, 8, 0] }}
          transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
        >
          <ChevronDown className="w-5 h-5 text-white/20" />
        </motion.div>
      </motion.div>
    </section>
  )
}
