import { useTranslation } from 'react-i18next'

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

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-orange-50 via-white to-amber-50 dark:from-gray-900 dark:via-gray-950 dark:to-orange-950/20">
      {/* Background decoration */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-24 -right-24 w-96 h-96 bg-orange-200/40 dark:bg-orange-500/10 rounded-full blur-3xl" />
        <div className="absolute -bottom-24 -left-24 w-80 h-80 bg-amber-200/40 dark:bg-amber-500/10 rounded-full blur-3xl" />
      </div>

      <div className="relative max-w-6xl mx-auto px-4 py-28 md:py-40 text-center">
        {/* Wordmark */}
        <div className="inline-flex items-center gap-1 mb-6">
          <span className="text-6xl md:text-8xl font-black tracking-tight text-orange-500">Kai</span>
          <span className="text-6xl md:text-8xl font-black tracking-tight text-gray-900 dark:text-white">Soft</span>
        </div>

        <p className="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">
          {t('hero_tagline')}
        </p>
        <p className="text-base md:text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto mb-10">
          {t('hero_sub')}
        </p>

        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <a href="#games"
            className="inline-flex items-center justify-center px-8 py-3.5 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm transition-colors shadow-lg shadow-orange-200 dark:shadow-orange-900/30">
            {t('hero_cta_games')}
          </a>
          <a href="#contact"
            className="inline-flex items-center justify-center px-8 py-3.5 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 font-semibold text-sm hover:border-orange-400 dark:hover:border-orange-500 transition-colors">
            {t('hero_cta_contact')}
          </a>
        </div>
      </div>
    </section>
  )
}
