import { useTranslation } from 'react-i18next'

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

  return (
    <section id="games" className="py-24 bg-gray-50 dark:bg-gray-950">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-12 text-center">
          {t('games_title')}
        </h2>

        <div className="max-w-2xl mx-auto">
          <div className="bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-xl border border-gray-100 dark:border-gray-800">
            {/* Game banner */}
            <div className="relative h-48 bg-gradient-to-br from-gray-800 via-gray-700 to-red-900 flex items-center justify-center overflow-hidden">
              <div className="absolute inset-0 flex items-center justify-center opacity-10">
                <div className="grid grid-cols-8 gap-1">
                  {Array.from({ length: 64 }).map((_, i) => (
                    <div key={i} className="w-6 h-6 bg-white rounded-sm" />
                  ))}
                </div>
              </div>
              <div className="relative text-center">
                <p className="text-6xl font-black text-white tracking-widest drop-shadow-lg">Z-DAY</p>
                <div className="mt-1 inline-block bg-red-500/80 text-white text-xs font-bold px-3 py-0.5 rounded-full uppercase tracking-wider">
                  {t('zday_sub')}
                </div>
              </div>
            </div>

            {/* Info */}
            <div className="p-8">
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
                {t('zday_title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-6">
                {t('zday_desc')}
              </p>
              <div className="flex flex-wrap gap-3">
                <a href="#"
                  className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-semibold text-sm hover:opacity-90 transition-opacity">
                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                  </svg>
                  {t('zday_badge_ios')}
                </a>
                <a href="#"
                  className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-green-600 hover:bg-green-700 text-white font-semibold text-sm transition-colors">
                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M3.18 23.76a2 2 0 0 1-1-.25 2 2 0 0 1-1-1.76V2.25a2 2 0 0 1 1-1.76 2 2 0 0 1 2 0L19.93 12l-5.37 3.11zm.82-19.5v15.48L17.07 12z"/>
                  </svg>
                  {t('zday_badge_android')}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
