import { useTranslation } from 'react-i18next'

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

  const badges = [
    { key: 'about_badge_ai',      icon: '🤖' },
    { key: 'about_badge_ios',     icon: '🍎' },
    { key: 'about_badge_android', icon: '🤖' },
    { key: 'about_badge_indie',   icon: '🎮' },
  ]

  return (
    <section id="about" className="py-24 bg-white dark:bg-gray-900">
      <div className="max-w-6xl mx-auto px-4">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Text */}
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
              {t('about_title')}
            </h2>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
              {t('about_p1')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
              {t('about_p2')}
            </p>
            <div className="flex flex-wrap gap-2">
              {badges.map(b => (
                <span key={b.key}
                  className="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 text-sm font-medium border border-orange-200 dark:border-orange-800">
                  {t(b.key)}
                </span>
              ))}
            </div>
          </div>

          {/* Visual */}
          <div className="flex justify-center">
            <div className="relative w-64 h-64 md:w-80 md:h-80">
              <div className="absolute inset-0 bg-gradient-to-br from-orange-400 to-amber-500 rounded-3xl opacity-20 dark:opacity-30 blur-2xl" />
              <div className="relative w-full h-full bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-800 dark:to-gray-700 rounded-3xl border border-orange-100 dark:border-gray-600 flex flex-col items-center justify-center gap-4 shadow-xl">
                <div className="text-7xl">🎮</div>
                <div className="text-center">
                  <p className="font-bold text-xl text-gray-900 dark:text-white">KaiSoft</p>
                  <p className="text-sm text-orange-500 font-medium">카이소프트</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
