import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import ThreeBackground from './ThreeBackground'

export default function Hero() {
  const { t } = useTranslation()

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <ThreeBackground />
      
      <div className="container mx-auto px-6 relative z-10 pt-20">
        <div className="max-w-4xl mx-auto text-center">
          
          {/* Super Title */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-block mb-6"
          >
            <span className="font-mono text-xs md:text-sm text-nordic-cyan/80 border border-nordic-cyan/30 px-3 py-1 rounded-full bg-nordic-cyan/5">
              {t('hero.location')}
            </span>
          </motion.div>

          {/* Main Headline */}
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-4xl md:text-6xl lg:text-7xl font-bold text-nordic-ice mb-8 leading-tight tracking-tight"
          >
            {t('hero.headline')}
          </motion.h1>

          {/* Sub-headline */}
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="text-lg md:text-xl text-nordic-stone mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            {t('hero.subheadline')}
          </motion.p>

          {/* CTA Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            className="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <button className="group relative px-8 py-4 bg-nordic-cyan text-nordic-navy font-bold rounded-sm overflow-hidden transition-all hover:shadow-[0_0_20px_rgba(0,229,255,0.4)]">
              <span className="relative z-10">{t('hero.cta_primary')}</span>
              <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </button>
            
            <button className="px-8 py-4 border border-nordic-stone/30 text-nordic-ice rounded-sm hover:bg-nordic-stone/10 transition-colors backdrop-blur-sm">
              {t('hero.cta_secondary')}
            </button>
          </motion.div>
        </div>
      </div>
    </section>
  )
}