// sections.jsx — LingoHub landing page sections (i18n-enabled)

const { useState, useEffect, useRef } = React;

/* ─────────── Reveal-on-scroll hook ─────────── */
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }),
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ─────────── Small bits ─────────── */
const Pill = ({ children, className='' }) => (
  <span className={`inline-flex items-center gap-1.5 rounded-full border border-mocha-900/10 bg-white/70 backdrop-blur px-3 py-1 text-[12px] font-medium text-mocha-800 ${className}`}>
    {children}
  </span>
);

const Sparkle = ({ className='', size=14 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} className={className} aria-hidden="true">
    <path d="M12 2 L13.6 9.4 L21 12 L13.6 14.6 L12 22 L10.4 14.6 L3 12 L10.4 9.4 Z" fill="currentColor" />
  </svg>
);

const Flag = ({ code, size=18 }) => {
  const palettes = {
    TR: ['#E30A17','#fff','#E30A17'],
    JP: ['#fff','#fff','#BC002D'],
    FR: ['#0055A4','#fff','#EF4135'],
    ES: ['#AA151B','#F1BF00','#AA151B'],
    DE: ['#000','#DD0000','#FFCE00'],
    IT: ['#008C45','#F4F5F0','#CD212A'],
    KR: ['#fff','#fff','#fff'],
    BR: ['#009C3B','#FEDF00','#002776']
  };
  const p = palettes[code] || ['#3EB489','#fff','#FF8A3D'];
  return (
    <span className="inline-flex overflow-hidden rounded-[3px] border border-mocha-900/15" style={{ width: size*1.4, height: size }}>
      {p.map((c,i) => <span key={i} style={{ flex:1, background:c }} />)}
    </span>
  );
};

/* ─────────── HEADER ─────────── */
function Header() {
  const { t } = useT();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = [
    { label: t('nav.features'), href:'#features' },
    { label: t('nav.how'), href:'#how' },
    { label: t('nav.testimonials'), href:'#testimonials' },
    { label: t('nav.pricing'), href:'#pricing' }
  ];

  return (
    <header className={`sticky top-0 z-40 transition-all ${scrolled ? 'backdrop-blur-md bg-cream-100/80 border-b border-mocha-900/[.06]' : ''}`}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 h-[72px] flex items-center justify-between gap-3">
        <a href="#" className="flex items-center gap-2 group shrink-0">
          <span className="grid place-items-center w-9 h-9 rounded-xl bg-white shadow-card border border-mocha-900/5 group-hover:rotate-[-6deg] transition-transform">
            <CatLogo size={26} />
          </span>
          <span className="font-display text-[22px] font-extrabold tracking-tight">
            Lingo<span className="text-mint-600">Hub</span>
          </span>
        </a>

        <nav className="hidden md:flex items-center gap-1 bg-white/60 backdrop-blur border border-mocha-900/[.06] rounded-full p-1">
          {links.map(l => (
            <a key={l.label} href={l.href}
               className="px-4 py-2 rounded-full text-[14px] font-medium text-mocha-800/80 hover:text-mocha-900 hover:bg-mint-50 transition">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2 shrink-0">
          <LangToggle />
          <a href="#" className="hidden lg:inline-flex text-[14px] font-medium text-mocha-800/80 hover:text-mocha-900 px-3 py-2">{t('nav.login')}</a>
          <a href="#cta" className="btn-pop btn-glow inline-flex items-center gap-2 rounded-full bg-orange-500 text-white px-5 py-2.5 text-[14px] font-semibold shadow-pop">
            <span className="hidden sm:inline">{t('nav.download')}</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ─────────── HERO ─────────── */
function Hero({ language, setLanguage }) {
  const { t } = useT();
  const languages = [
    { code:'TR', word:'Merhaba',   romaji:'mer-ha-ba' },
    { code:'JP', word:'こんにちは', romaji:'kon-ni-chi-wa' },
    { code:'FR', word:'Bonjour',   romaji:'bon-zhoor' },
    { code:'ES', word:'Hola',      romaji:'oh-la' },
    { code:'DE', word:'Hallo',     romaji:'hah-lo' },
    { code:'IT', word:'Ciao',      romaji:'chow' }
  ];
  const active = languages.find(l => l.code === language) || languages[0];
  const [progress, setProgress] = useState(0);
  const [recording, setRecording] = useState(false);

  useEffect(() => {
    if (!recording) { setProgress(0); return; }
    let p = 0;
    const tm = setInterval(() => {
      p = Math.min(100, p + Math.random() * 12);
      setProgress(p);
      if (p >= 100) clearInterval(tm);
    }, 120);
    return () => clearInterval(tm);
  }, [recording]);

  return (
    <section className="relative overflow-hidden">
      <div className="absolute -top-32 -left-32 w-[520px] h-[520px] blob bg-mint-100/70 -z-10" />
      <div className="absolute top-40 -right-40 w-[440px] h-[440px] blob-2 bg-orange-50/80 -z-10" />

      <div className="mx-auto max-w-7xl px-5 sm:px-8 pt-10 pb-24 lg:pt-16 lg:pb-32 grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-6 reveal reveal-l">
          <div className="flex items-center gap-2 mb-6 flex-wrap">
            <Pill className="!bg-mint-100/80 !border-mint-500/20 !text-mint-900">
              <span className="w-1.5 h-1.5 rounded-full bg-mint-500 inline-block anim-bob" />
              {t('hero.badge.new')}
            </Pill>
            <Pill>
              <Sparkle className="text-orange-500" /> {t('hero.badge.langs')}
            </Pill>
          </div>

          <h1 className="font-display text-[44px] sm:text-[56px] lg:text-[68px] leading-[0.98] font-extrabold text-mocha-900 text-pretty">
            {t('hero.h1.before')}{' '}
            <span className="relative inline-block">
              <span className="relative z-10">{t('hero.h1.highlight')}</span>
              <svg className="absolute left-0 right-0 -bottom-1 w-full" viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true">
                <path d="M2 12 C 60 2, 160 18, 238 6" stroke="#FF8A3D" strokeWidth="6" strokeLinecap="round" fill="none" />
              </svg>
            </span>{' '}
            {t('hero.h1.after')}
          </h1>

          <p className="mt-6 text-[18px] leading-relaxed text-mocha-800/80 max-w-xl">{t('hero.sub')}</p>

          <div className="mt-8 flex flex-wrap items-center gap-3">
            <a href="#cta" className="btn-pop inline-flex items-center gap-2 rounded-full bg-orange-500 text-white px-6 py-3.5 text-[15px] font-semibold shadow-pop">
              {t('hero.cta.primary')}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
            </a>
            <a href="#how" className="btn-pop inline-flex items-center gap-2 rounded-full bg-transparent border-2 border-mint-500 text-mint-700 px-6 py-3.5 text-[15px] font-semibold hover:bg-mint-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="6 4 20 12 6 20 6 4"/></svg>
              {t('hero.cta.secondary')}
            </a>
          </div>

          <div className="mt-10 flex items-center gap-6">
            <div className="flex -space-x-2">
              {['#FFB066','#3EB489','#FFC8A2','#7DD1AE','#F26A1A'].map((c,i) => (
                <div key={i} className="w-9 h-9 rounded-full ring-2 ring-cream-100" style={{ background:c }} />
              ))}
            </div>
            <div className="text-[13px] text-mocha-800/70 leading-tight">
              <div className="flex items-center gap-1 text-amber-500 mb-0.5">
                {[0,1,2,3,4].map(i => <Sparkle key={i} size={12} />)}
                <span className="text-mocha-900 font-semibold ml-1">4.9</span>
              </div>
              {t('hero.social.loved.prefix')}<span className="font-semibold text-mocha-900">{t('hero.social.loved.count')}</span>{t('hero.social.loved.suffix')}
            </div>
          </div>
        </div>

        <div className="lg:col-span-6 reveal reveal-r">
          <div className="relative mx-auto w-full max-w-[560px] aspect-square">
            <div className="absolute inset-6 bg-gradient-to-br from-mint-100 via-cream-100 to-orange-50 rounded-[40%_60%_45%_55%/55%_40%_60%_45%] shadow-card" />
            <div className="absolute inset-12 border-2 border-dashed border-mocha-900/10 rounded-full" />

            <div className="absolute left-2 top-10 tilt" style={{ animation:'float-y 6s ease-in-out infinite' }}>
              <VocabCard lang="TR" word="kedi" gloss="cat" tone="mint" />
            </div>
            <div className="absolute right-2 top-20 tilt" style={{ '--r':'4deg', animation:'float-y 5.2s ease-in-out infinite .4s' }}>
              <VocabCard lang="FR" word="Bonjour" gloss="hello" tone="cream" />
            </div>
            <div className="absolute left-6 bottom-16 tilt" style={{ '--r':'-3deg', animation:'float-y 5.8s ease-in-out infinite .8s' }}>
              <VocabCard lang="ES" word="Gracias" gloss="thank you" tone="orange" />
            </div>

            <div className="absolute right-10 bottom-24 anim-coin" style={{ animationDelay:'.3s' }}><Coin /></div>
            <div className="absolute right-24 bottom-10 anim-coin" style={{ animationDelay:'1.1s' }}><Coin small /></div>

            <div className="absolute right-3 top-1 anim-float-sm flex items-center gap-1.5 rounded-full bg-white px-3 py-1.5 shadow-card border border-mocha-900/5">
              <span className="text-orange-500 text-base">🔥</span>
              <span className="font-display font-bold text-mocha-900 text-[14px]">{t('hero.streak')}</span>
            </div>

            <div className="absolute inset-0 grid place-items-center">
              <CatBase size={290} variant="headset" mood="singing" className="anim-bob" />
            </div>

            <div className="absolute left-6 top-1/2 -translate-y-1/2">
              <div className="relative">
                <div className="pulse-ring relative w-14 h-14 grid place-items-center rounded-full bg-orange-500 text-white shadow-pop">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 11a7 7 0 0 1-14 0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><path d="M12 18v4M9 22h6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                </div>
              </div>
            </div>

            <div className="absolute bottom-1 left-1/2 -translate-x-1/2 w-[88%] sm:w-[78%] bg-white rounded-2xl border border-mocha-900/5 shadow-card p-3">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Flag code={active.code} />
                  <div>
                    <div className="font-display font-bold text-mocha-900 text-[15px] leading-none">{active.word}</div>
                    <div className="font-mono text-[10px] text-mocha-700/60 mt-1">/{active.romaji}/</div>
                  </div>
                </div>
                <button
                  onClick={() => setRecording(r => !r)}
                  className={`btn-pop text-[11px] font-bold uppercase tracking-wider rounded-full px-3 py-1.5 ${recording ? 'bg-mint-500 text-white' : 'bg-mocha-900 text-white'}`}>
                  {recording ? t('hero.listening') : t('hero.tap')}
                </button>
              </div>
              <div className="h-2 rounded-full bg-mocha-900/[.06] overflow-hidden">
                <div className="progress-fill rounded-full" style={{ '--p': `${progress}%` }} />
              </div>
              <div className="flex items-center justify-between mt-2 text-[11px]">
                <div className="flex gap-1">
                  {languages.map(l => (
                    <button key={l.code} onClick={() => setLanguage(l.code)}
                            className={`px-2 py-0.5 rounded-full font-semibold tracking-wide transition ${l.code===active.code ? 'bg-mint-500 text-white' : 'text-mocha-800/60 hover:bg-mocha-900/5'}`}>
                      {l.code}
                    </button>
                  ))}
                </div>
                <span className="font-mono text-mocha-700/70">{Math.round(progress)}% {t('hero.match')}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="border-y border-mocha-900/[.06] bg-cream-50/60">
        <div className="mx-auto max-w-7xl px-5 sm:px-8 py-5 flex items-center gap-8">
          <div className="hidden md:block text-[11px] font-mono uppercase tracking-[.18em] text-mocha-800/50 whitespace-nowrap">
            {t('hero.trusted')}
          </div>
          <div className="flex-1 overflow-hidden noscroll-x">
            <div className="marquee-track flex items-center gap-12 whitespace-nowrap">
              {[...Array(2)].map((_,k) => (
                <div key={k} className="flex items-center gap-12">
                  {['Stanford','TechCrunch','BBC','Forbes','Wired','Fast Company','The Verge','Polyglot Weekly'].map(n => (
                    <span key={n} className="font-display text-[20px] font-bold text-mocha-900/35 tracking-tight">{n}</span>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const VocabCard = ({ lang, word, gloss, tone='cream' }) => {
  const tones = { cream:'bg-white', mint:'bg-mint-100', orange:'bg-orange-50' };
  return (
    <div className={`${tones[tone]} rounded-2xl px-4 py-3 shadow-card border border-mocha-900/[.06] min-w-[120px]`}>
      <div className="flex items-center justify-between mb-1">
        <Flag code={lang} size={12} />
        <span className="font-mono text-[10px] text-mocha-800/50">#A1</span>
      </div>
      <div className="font-display font-extrabold text-mocha-900 leading-tight">{word}</div>
      <div className="text-[11px] text-mocha-800/65">{gloss}</div>
    </div>
  );
};

const Coin = ({ small=false }) => (
  <div className={`relative rounded-full bg-gradient-to-br from-orange-400 to-orange-600 shadow-pop grid place-items-center ${small ? 'w-9 h-9' : 'w-12 h-12'}`}>
    <div className={`rounded-full border-2 border-white/60 ${small ? 'w-6 h-6' : 'w-8 h-8'} grid place-items-center text-white font-display font-extrabold ${small ? 'text-[10px]' : 'text-[13px]'}`}>XP</div>
  </div>
);

/* ─────────── FEATURES (bento) ─────────── */
function Features() {
  const { t } = useT();
  const [flipped, setFlipped] = useState(false);
  return (
    <section id="features" className="relative py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-5 sm:px-8">
        <div className="max-w-2xl reveal">
          <div className="flex items-center gap-2 mb-4">
            <span className="font-mono text-[11px] uppercase tracking-[.18em] text-orange-600">{t('features.eyebrow')}</span>
          </div>
          <h2 className="font-display text-[40px] sm:text-[52px] leading-[1.02] font-extrabold text-mocha-900 text-pretty">
            {t('features.title.a')} <span className="text-mint-600">{t('features.title.b')}</span>{t('features.title.c')}
          </h2>
          <p className="mt-5 text-[17px] text-mocha-800/75 leading-relaxed">{t('features.sub')}</p>
        </div>

        <div className="mt-14 grid grid-cols-12 gap-5 reveal">
          <FeatureCard className="col-span-12 lg:col-span-7 bg-gradient-to-br from-mint-500 to-mint-600 text-white">
            <FeatureCardHeader eyebrow={t('f1.eyebrow')} tagColor="bg-white/15 text-white" title={t('f1.title')} desc={t('f1.desc')} />
            <SpeechVisualizer />
          </FeatureCard>

          <FeatureCard className="col-span-6 lg:col-span-5 bg-white">
            <FeatureCardHeader eyebrow={t('f2.eyebrow')} title={t('f2.title')} desc={t('f2.desc')} />
            <StreakViz />
          </FeatureCard>

          <FeatureCard className="col-span-12 sm:col-span-6 lg:col-span-4 bg-orange-50">
            <FeatureCardHeader eyebrow={t('f3.eyebrow')} tagColor="bg-orange-500/15 text-orange-700" title={t('f3.title')} desc={t('f3.desc')} />
            <FlashcardViz flipped={flipped} setFlipped={setFlipped} />
          </FeatureCard>

          <FeatureCard className="col-span-12 sm:col-span-6 lg:col-span-4 bg-mint-50">
            <FeatureCardHeader eyebrow={t('f4.eyebrow')} tagColor="bg-mint-500/20 text-mint-700" title={t('f4.title')} desc={t('f4.desc')} />
            <PuzzleViz />
          </FeatureCard>

          <FeatureCard className="col-span-12 lg:col-span-4 bg-mocha-900 text-cream-100">
            <FeatureCardHeader eyebrow={t('f5.eyebrow')} tagColor="bg-white/10 text-cream-100" title={t('f5.title')} desc={t('f5.desc')} />
            <LeaderboardViz />
          </FeatureCard>
        </div>
      </div>
    </section>
  );
}

const FeatureCard = ({ children, className='' }) => (
  <div className={`tilt relative overflow-hidden rounded-[28px] p-7 sm:p-8 shadow-card border border-mocha-900/[.06] ${className}`}>
    {children}
  </div>
);
const FeatureCardHeader = ({ eyebrow, title, desc, tagColor='bg-mocha-900/10 text-mocha-900' }) => (
  <div className="mb-5">
    <div className={`inline-flex items-center font-mono text-[11px] uppercase tracking-wider rounded-full px-2.5 py-1 ${tagColor}`}>{eyebrow}</div>
    <h3 className="font-display text-[24px] sm:text-[28px] leading-tight font-extrabold mt-3">{title}</h3>
    <p className="mt-2 text-[14.5px] opacity-80 leading-relaxed max-w-md">{desc}</p>
  </div>
);

const SpeechVisualizer = () => {
  const { t } = useT();
  const bars = 36;
  const [vals, setVals] = useState(() => Array(bars).fill(0).map(() => Math.random()*0.6+0.2));
  useEffect(() => {
    const tm = setInterval(() => setVals(v => v.map(() => Math.random()*0.85 + 0.15)), 220);
    return () => clearInterval(tm);
  }, []);
  return (
    <div className="relative rounded-2xl bg-white/10 border border-white/15 p-5 backdrop-blur-sm">
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-red-300 animate-pulse" />
          <span className="font-mono text-[11px] uppercase tracking-wider opacity-80">{t('speech.listening')}</span>
        </div>
        <span className="font-mono text-[11px] opacity-70">0:04 / 0:06</span>
      </div>
      <div className="flex items-end gap-[3px] h-20">
        {vals.map((v,i) => (
          <span key={i} className="flex-1 rounded-[2px] bg-white/85" style={{ height: `${v*100}%`, transition:'height .2s ease-out' }} />
        ))}
      </div>
      <div className="mt-4 flex items-center justify-between text-[13px]">
        <div className="font-display font-extrabold text-[18px]">"Merhaba"</div>
        <div className="flex items-center gap-2">
          <span className="font-mono text-[12px] opacity-80">92%</span>
          <span className="px-2 py-0.5 rounded-full bg-white text-mint-700 font-bold text-[11px]">A+</span>
        </div>
      </div>
    </div>
  );
};

const StreakViz = () => {
  const { t, locale } = useT();
  const daysTr = ['P','S','Ç','P','C','C','P'];
  const daysEn = ['M','T','W','T','F','S','S'];
  const days = locale === 'tr' ? daysTr : daysEn;
  const status = [1,1,1,1,2,0,0];
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-7 gap-2">
        {days.map((d,i) => (
          <div key={i} className="flex flex-col items-center gap-2">
            <span className="font-mono text-[10px] uppercase text-mocha-800/60">{d}</span>
            <div className={`w-9 h-9 rounded-xl grid place-items-center font-bold text-[13px] border ${
              status[i]===1 ? 'bg-mint-500 text-white border-mint-600' :
              status[i]===2 ? 'bg-orange-500 text-white border-orange-600 anim-bob shadow-pop' :
              'bg-mocha-900/[.04] text-mocha-900/30 border-mocha-900/5'
            }`}>
              {status[i]===1 ? '✓' : status[i]===2 ? '🔥' : ''}
            </div>
          </div>
        ))}
      </div>
      <div className="flex items-center justify-between rounded-2xl bg-cream-100 border border-mocha-900/5 p-3">
        <div>
          <div className="font-display font-extrabold text-[22px] text-mocha-900 leading-none">14 {t('streak.days')}</div>
          <div className="text-[12px] text-mocha-800/60 mt-1">{t('streak.current')}</div>
        </div>
        <div className="flex items-center gap-1.5 text-orange-600 font-mono text-[11px] uppercase tracking-wider">
          <span>{t('streak.shield')}</span>
        </div>
      </div>
    </div>
  );
};

const FlashcardViz = ({ flipped, setFlipped }) => {
  const { t, locale } = useT();
  return (
    <div className="relative h-44 flex items-center justify-center" style={{ perspective: '900px' }}>
      <div className="absolute w-44 h-32 rounded-2xl bg-white border border-mocha-900/10 shadow-soft" style={{ transform:'translate(-20px, 8px) rotate(-6deg)' }} />
      <div className="absolute w-44 h-32 rounded-2xl bg-white border border-mocha-900/10 shadow-soft" style={{ transform:'translate(20px, 4px) rotate(4deg)' }} />
      <button
        onClick={() => setFlipped(f => !f)}
        className="card3d relative w-44 h-32 transition-transform duration-700"
        style={{ transform: flipped ? 'rotateY(180deg)' : 'rotateY(0)' }}
        aria-label="Flip flashcard">
        <div className="card3d-face absolute inset-0 rounded-2xl bg-white border border-mocha-900/10 shadow-card p-4 flex flex-col justify-between">
          <div className="flex justify-between items-start">
            <Flag code="TR" size={12} />
            <span className="font-mono text-[10px] text-mocha-800/40">A1</span>
          </div>
          <div className="font-display font-extrabold text-[34px] text-mocha-900 leading-none">kedi</div>
          <div className="text-[11px] text-mocha-800/50 font-mono">{t('flash.tap')}</div>
        </div>
        <div className="card3d-face card3d-back absolute inset-0 rounded-2xl bg-orange-500 text-white shadow-card p-4 flex flex-col justify-between">
          <div className="font-mono text-[10px] uppercase opacity-80">{t('flash.meaning')}</div>
          <div className="font-display font-extrabold text-[28px] leading-none">{locale==='tr' ? 'cat 🐈' : 'cat 🐈'}</div>
          <div className="font-mono text-[10px] opacity-80">/ke-di/</div>
        </div>
      </button>
    </div>
  );
};

const PuzzleViz = () => {
  const { t } = useT();
  const letters = [
    { ch:'H', c:'#3EB489' },
    { ch:'O', c:'#FF8A3D' },
    { ch:'L', c:'#7DD1AE' },
    { ch:'A', c:'#FFAC6B' }
  ];
  return (
    <div className="space-y-3">
      <div className="rounded-2xl bg-white border border-mocha-900/5 p-3">
        <div className="text-[10px] font-mono uppercase text-mocha-800/50 mb-2">{t('puzzle.task')}</div>
        <div className="flex items-center gap-2">
          {letters.map((l,i) => (
            <div key={i} className="w-9 h-9 rounded-lg grid place-items-center font-display font-extrabold text-white shadow-soft anim-bob"
                 style={{ background:l.c, animationDelay: `${i*.12}s` }}>
              {l.ch}
            </div>
          ))}
          <span className="ml-1 text-mint-600 font-bold">✓</span>
        </div>
      </div>
      <div className="flex gap-2 flex-wrap">
        {['B','U','E','N','O'].map((l,i) => (
          <div key={i} className="w-8 h-8 rounded-md grid place-items-center font-display font-bold text-mocha-900 bg-cream-100 border border-mocha-900/10">
            {l}
          </div>
        ))}
      </div>
    </div>
  );
};

const LeaderboardViz = () => {
  const { t } = useT();
  const rows = [
    { n:'Maya P.',   xp:2840, c:'#FFAC6B', me:false },
    { n:t('leader.you'), xp:2615, c:'#3EB489', me:true },
    { n:'Diego S.',  xp:2402, c:'#FFC8A2', me:false }
  ];
  return (
    <div className="space-y-2">
      {rows.map((r,i) => (
        <div key={i} className={`flex items-center gap-3 rounded-xl p-2.5 ${r.me ? 'bg-white/10 ring-1 ring-white/30' : 'bg-white/5'}`}>
          <span className="w-6 text-center font-mono text-[12px] opacity-80">{i+1}</span>
          <span className="w-8 h-8 rounded-full" style={{ background: r.c }} />
          <span className="flex-1 font-semibold text-[14px]">{r.n}</span>
          <span className="font-mono text-[12px] opacity-90">{r.xp.toLocaleString()} XP</span>
        </div>
      ))}
      <div className="pt-1 text-[11px] font-mono uppercase tracking-wider opacity-60">{t('leader.league')}</div>
    </div>
  );
};

/* ─────────── HOW IT WORKS ─────────── */
function HowItWorks() {
  const { t } = useT();
  const sectionRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = sectionRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight + 200;
      const p = Math.max(0, Math.min(1, (-rect.top + 200) / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive:true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const steps = [
    { n:'01', title:t('step1.title'), desc:t('step1.desc') },
    { n:'02', title:t('step2.title'), desc:t('step2.desc') },
    { n:'03', title:t('step3.title'), desc:t('step3.desc') },
    { n:'04', title:t('step4.title'), desc:t('step4.desc') }
  ];

  return (
    <section id="how" className="relative py-24 sm:py-32 bg-cream-50/60" ref={sectionRef}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8">
        <div className="max-w-2xl reveal">
          <span className="font-mono text-[11px] uppercase tracking-[.18em] text-orange-600">{t('how.eyebrow')}</span>
          <h2 className="font-display text-[40px] sm:text-[52px] leading-[1.02] font-extrabold text-mocha-900 mt-3">
            {t('how.title.a')}<br/>
            <span className="text-mint-600">{t('how.title.b')}</span>
          </h2>
        </div>

        <div className="mt-16 relative grid grid-cols-12 gap-8">
          <div className="hidden md:block col-span-1 relative">
            <div className="sticky top-32 ml-6">
              <div className="relative h-[640px] w-1 rounded-full bg-mocha-900/[.08]">
                <div className="absolute top-0 left-0 w-full rounded-full" style={{ height: `${progress*100}%`, background:'linear-gradient(180deg, #FFAC6B 0%, #FF8A3D 60%, #F26A1A 100%)' }} />
                <div className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 transition-all duration-150 ease-out"
                     style={{ top: `${Math.min(0.96, Math.max(0.02, progress)) * 100}%` }}>
                  <CatBase size={70} variant="headset" mood="happy" className="drop-shadow-xl" />
                </div>
              </div>
            </div>
          </div>

          <div className="col-span-12 md:col-span-11 space-y-6">
            {steps.map((s, i) => (
              <div key={i} className="reveal grid sm:grid-cols-12 gap-5 items-stretch">
                <div className="sm:col-span-7 lg:col-span-6 bg-white rounded-3xl border border-mocha-900/[.06] shadow-card p-7 sm:p-8 relative">
                  <div className="flex items-center gap-3 mb-3">
                    <span className="font-mono text-[12px] font-bold text-orange-600">{t('step.label')} {s.n}</span>
                    <span className="dotted-rule flex-1 mt-1" />
                  </div>
                  <h3 className="font-display text-[26px] sm:text-[30px] font-extrabold text-mocha-900 leading-tight">{s.title}</h3>
                  <p className="mt-2 text-[15px] text-mocha-800/75 leading-relaxed">{s.desc}</p>
                </div>
                <div className="sm:col-span-5 lg:col-span-6 grid place-items-center">
                  <StepVisual index={i} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const StepVisual = ({ index }) => {
  const { t } = useT();
  if (index === 0) {
    const langs = [
      ['TR', t('lang.tr')],
      ['JP', t('lang.jp')],
      ['FR', t('lang.fr')],
      ['ES', t('lang.es')],
      ['DE', t('lang.de')],
      ['IT', t('lang.it')]
    ];
    return (
      <div className="grid grid-cols-3 gap-2 max-w-[280px]">
        {langs.map(([code, name], i) => (
          <div key={i} className={`rounded-2xl border p-2 text-center ${i===0 ? 'border-mint-500 bg-mint-50 ring-2 ring-mint-500/30' : 'border-mocha-900/10 bg-white'}`}>
            <div className="flex justify-center mb-1"><Flag code={code} /></div>
            <div className="font-display font-bold text-[12px] text-mocha-900">{name}</div>
          </div>
        ))}
      </div>
    );
  }
  if (index === 1) return (
    <div className="space-y-2 max-w-[280px] w-full">
      {[{m:5,l:t('opt.casual')},{m:10,l:t('opt.regular'),sel:true},{m:20,l:t('opt.serious')}].map((o,i) => (
        <div key={i} className={`flex items-center justify-between rounded-2xl border p-3 ${o.sel ? 'bg-orange-50 border-orange-500 ring-2 ring-orange-500/20' : 'bg-white border-mocha-900/10'}`}>
          <div>
            <div className="font-display font-extrabold text-[22px] leading-none text-mocha-900">{o.m} <span className="text-[12px] font-mono">{t('opt.minday')}</span></div>
            <div className="text-[11px] text-mocha-800/60 mt-1">{o.l}</div>
          </div>
          {o.sel && <div className="w-6 h-6 rounded-full bg-orange-500 text-white grid place-items-center font-bold">✓</div>}
        </div>
      ))}
    </div>
  );
  if (index === 2) return (
    <div className="space-y-2 max-w-[300px] w-full">
      <div className="rounded-2xl bg-mint-500 text-white p-4 shadow-pop-mint">
        <div className="text-[11px] font-mono uppercase opacity-80 tracking-wider">{t('step.minilesson')}</div>
        <div className="font-display font-extrabold text-[20px] mt-1">{t('step.translate')}</div>
        <div className="mt-3 flex gap-1.5 flex-wrap">
          {['Yo','como','pescado','el','una'].map((w,i) => (
            <span key={i} className={`px-2.5 py-1 rounded-lg text-[12px] font-bold ${i<3 ? 'bg-white text-mocha-900' : 'bg-white/20 text-white'}`}>{w}</span>
          ))}
        </div>
      </div>
      <div className="flex items-center justify-between text-[12px] text-mocha-800/70 px-1">
        <span className="font-mono">+15 XP</span>
        <div className="flex items-center gap-1.5">
          <span className="w-1.5 h-1.5 rounded-full bg-mint-500" />
          <span className="w-1.5 h-1.5 rounded-full bg-mint-500" />
          <span className="w-1.5 h-1.5 rounded-full bg-mint-500" />
          <span className="w-1.5 h-1.5 rounded-full bg-mocha-900/10" />
          <span className="w-1.5 h-1.5 rounded-full bg-mocha-900/10" />
        </div>
      </div>
    </div>
  );
  if (index === 3) return (
    <div className="rounded-3xl bg-gradient-to-br from-mint-500 to-mint-600 text-white p-5 max-w-[300px] w-full shadow-card">
      <div className="text-[11px] font-mono uppercase opacity-80 tracking-wider">{t('step.progress')}</div>
      <div className="font-display font-extrabold text-[44px] leading-none mt-2">B1<span className="text-[20px] opacity-80"> /C2</span></div>
      <div className="mt-3 h-2.5 rounded-full bg-white/20 overflow-hidden">
        <div className="h-full rounded-full bg-white" style={{ width:'58%' }} />
      </div>
      <div className="mt-3 flex justify-between text-[12px]">
        <span>1,240 {t('step.words')}</span>
        <span className="font-bold">58%</span>
      </div>
    </div>
  );
};

/* ─────────── TESTIMONIALS ─────────── */
function Testimonials() {
  const { t } = useT();
  const cards = [
    { q:t('test.q1'), n:'Priya R.',   r:t('test.r1'), tone:'mint' },
    { q:t('test.q2'), n:'Tomás L.',   r:t('test.r2'), tone:'cream' },
    { q:t('test.q3'), n:'Naomi K.',   r:t('test.r3'), tone:'orange' },
    { q:t('test.q4'), n:'Jonas A.',   r:t('test.r4'), tone:'mint' }
  ];
  return (
    <section id="testimonials" className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-5 sm:px-8">
        <div className="reveal flex items-end justify-between gap-6 flex-wrap mb-12">
          <div className="max-w-xl">
            <span className="font-mono text-[11px] uppercase tracking-[.18em] text-orange-600">{t('test.eyebrow')}</span>
            <h2 className="font-display text-[40px] sm:text-[52px] leading-[1.02] font-extrabold text-mocha-900 mt-3">
              {t('test.title.a')} <span className="text-mint-600">{t('test.title.b')}</span>{t('test.title.c')}
            </h2>
          </div>
          <div className="flex items-center gap-2">
            <div className="rounded-full bg-white shadow-card border border-mocha-900/5 px-4 py-2 flex items-center gap-2">
              <span className="text-orange-500">🔥</span>
              <span className="font-display font-extrabold text-mocha-900">2.1M</span>
              <span className="text-[12px] text-mocha-800/60">{t('test.active')}</span>
            </div>
            <div className="rounded-full bg-mocha-900 text-white px-4 py-2 flex items-center gap-2">
              <Sparkle size={12} />
              <span className="font-display font-extrabold">4.9</span>
              <span className="text-[12px] opacity-80">App Store</span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 reveal">
          {cards.map((c, i) => {
            const bg = c.tone === 'mint' ? 'bg-mint-100' : c.tone === 'orange' ? 'bg-orange-50' : 'bg-white';
            return (
              <div key={i} className={`tilt rounded-3xl ${bg} border border-mocha-900/[.06] p-6 shadow-card flex flex-col`}>
                <div className="flex items-center gap-1 text-amber-500 mb-3">
                  {[0,1,2,3,4].map(j => <Sparkle key={j} size={12} />)}
                </div>
                <p className="font-display text-[18px] leading-snug font-bold text-mocha-900 flex-1 text-pretty">"{c.q}"</p>
                <div className="mt-5 flex items-center gap-3">
                  <span className="w-9 h-9 rounded-full bg-gradient-to-br from-orange-400 to-mint-500" />
                  <div>
                    <div className="font-bold text-[13px] text-mocha-900">{c.n}</div>
                    <div className="text-[11px] text-mocha-800/60">{c.r}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─────────── CTA Banner ─────────── */
function CtaBanner() {
  const { t } = useT();
  return (
    <section id="cta" className="relative px-5 sm:px-8 pb-24">
      <div className="relative mx-auto max-w-7xl overflow-hidden rounded-[40px] bg-mint-500 text-white shadow-card reveal">
        <div className="absolute -top-16 -right-16 w-72 h-72 blob bg-mint-600/60" />
        <div className="absolute -bottom-20 -left-10 w-64 h-64 blob-2 bg-mint-700/40" />
        <div className="absolute top-10 right-1/3 anim-float opacity-80"><Coin /></div>
        <div className="absolute bottom-12 left-1/3 anim-float-sm opacity-80"><Coin small /></div>

        <div className="relative grid lg:grid-cols-12 gap-8 items-center px-7 sm:px-12 py-14 sm:py-16">
          <div className="lg:col-span-7">
            <Pill className="!bg-white/15 !border-white/20 !text-white">
              <span className="w-1.5 h-1.5 rounded-full bg-orange-300 inline-block anim-bob" />
              {t('cta.pill')}
            </Pill>
            <h2 className="font-display text-[44px] sm:text-[64px] leading-[0.98] font-extrabold mt-5 text-pretty">
              {t('cta.title.a')}<br/>{t('cta.title.b')}
            </h2>
            <p className="mt-4 text-[18px] text-white/85 max-w-lg">{t('cta.sub')}</p>
            <div className="mt-7 flex flex-wrap gap-3 items-center">
              <a href="#" className="btn-pop btn-glow inline-flex items-center gap-2 rounded-full bg-orange-500 text-white px-7 py-4 text-[16px] font-semibold shadow-pop">
                {t('cta.button')}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
              </a>
              <div className="flex items-center gap-2 text-white/90 text-[13px]">
                <a href="#" className="inline-flex items-center gap-2 rounded-full bg-mocha-900 text-white px-4 py-3 hover:bg-mocha-950">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c-.02-2.27 1.86-3.36 1.94-3.41-1.06-1.55-2.71-1.76-3.29-1.78-1.4-.14-2.74.83-3.45.83-.72 0-1.81-.81-2.98-.79-1.53.02-2.95.89-3.74 2.26-1.6 2.77-.41 6.85 1.13 9.1.76 1.1 1.65 2.32 2.82 2.28 1.14-.05 1.57-.74 2.94-.74s1.76.74 2.96.71c1.22-.02 2-1.11 2.74-2.21.87-1.27 1.22-2.51 1.24-2.58-.03-.01-2.37-.91-2.4-3.61zM14.84 5.21c.62-.76 1.04-1.81.93-2.85-.9.04-2 .6-2.64 1.35-.57.66-1.07 1.73-.94 2.75 1.01.08 2.03-.51 2.65-1.25z"/></svg>
                  App Store
                </a>
                <a href="#" className="inline-flex items-center gap-2 rounded-full bg-mocha-900 text-white px-4 py-3 hover:bg-mocha-950">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 2.3c-.4.4-.6 1-.6 1.7v16c0 .7.2 1.3.6 1.7l11-9.7-11-9.7zm12 8.7l2.8-2.5L6.4 1.3l9.2 9.7zm5 2.4l-3-1.7-2.8 2.5 2.8 2.5 3-1.7c.9-.5.9-1.6 0-2.1zM6.4 22.7l12-6.7-2.8-2.5L6.4 22.7z"/></svg>
                  Google Play
                </a>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5 grid place-items-center">
            <div className="relative">
              <CatBase size={280} variant="wave" mood="happy" />
              <div className="absolute -top-2 -left-6 rotate-[-8deg] bg-white text-mocha-900 rounded-2xl px-3 py-1.5 shadow-card font-display font-bold text-[14px] anim-float-sm">
                {t('cta.welcome')}
              </div>
              <div className="absolute -bottom-2 -right-2 bg-orange-500 text-white rounded-2xl px-3 py-1.5 shadow-pop font-display font-bold text-[14px] anim-float-sm" style={{ animationDelay:'.5s' }}>
                +50 XP
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── FOOTER ─────────── */
function Footer() {
  const { t } = useT();
  const cols = [
    { h:t('footer.product'),   items:[t('p.features'), t('p.how'), t('p.pricing'), t('p.languages'), t('p.changelog')] },
    { h:t('footer.company'),   items:[t('c.about'), t('c.careers'), t('c.press'), t('c.blog'), t('c.contact')] },
    { h:t('footer.resources'), items:[t('r.help'), t('r.community'), t('r.api'), t('r.schools'), t('r.status')] },
    { h:t('footer.legal'),     items:[t('l.privacy'), t('l.terms'), t('l.cookies'), t('l.licenses')] }
  ];
  return (
    <footer className="bg-cream-100 border-t border-mocha-900/[.06]">
      <div className="mx-auto max-w-7xl px-5 sm:px-8 py-16">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-10">
          <div className="col-span-2">
            <a href="#" className="flex items-center gap-2">
              <span className="grid place-items-center w-9 h-9 rounded-xl bg-white shadow-card border border-mocha-900/5">
                <CatLogo size={26} />
              </span>
              <span className="font-display text-[22px] font-extrabold">Lingo<span className="text-mint-600">Hub</span></span>
            </a>
            <p className="mt-4 text-[14px] text-mocha-800/70 max-w-xs leading-relaxed">{t('footer.tagline')}</p>
            <div className="mt-5 flex items-center gap-2">
              {['𝕏','◯','▶','✦'].map((s,i) => (
                <a key={i} href="#" className="w-9 h-9 rounded-full bg-white border border-mocha-900/10 grid place-items-center hover:bg-mint-50 hover:border-mint-500/30 transition">
                  <span className="font-display font-bold text-mocha-900">{s}</span>
                </a>
              ))}
            </div>
          </div>
          {cols.map((col, i) => (
            <div key={i}>
              <div className="font-mono text-[11px] uppercase tracking-wider text-mocha-800/55 mb-4">{col.h}</div>
              <ul className="space-y-2.5">
                {col.items.map(it => (
                  <li key={it}>
                    <a href="#" className="text-[14px] text-mocha-800/85 hover:text-mocha-900 hover:underline underline-offset-4">{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 pt-6 border-t border-mocha-900/10 flex flex-wrap items-center justify-between gap-4">
          <div className="text-[12px] text-mocha-800/55 font-mono">{t('footer.copy')}</div>
          <div className="flex items-center gap-3 text-[12px] text-mocha-800/55">
            <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-mint-500" /> {t('footer.status')}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Features, HowItWorks, Testimonials, CtaBanner, Footer, useReveal });