/* global React, Icon, WaveBars, AILabel, AlbumCover, SearchCombobox, BookmarkButton, DepthToggle, QuietAd, CATALOG */
const { useState, useEffect, useRef, useMemo } = React;

// ---- Hero search ----
function HeroSearch({ lang = 'EN' }) {
  const examples = [
    'Cassette Light — Vela Maren',
    'arti lirik "Bintang Pulang"',
    'meaning of "we ran out of summer"',
    'Halo Driver — Kestral',
  ];
  const [exIdx, setExIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setExIdx(i => (i + 1) % examples.length), 2800);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="relative pt-14 md:pt-24 pb-16 md:pb-24 overflow-hidden">
      {/* Ambient waveform background */}
      <div aria-hidden="true" className="absolute inset-0 -z-0 pointer-events-none">
        <div className="absolute inset-x-0 top-0 h-[90%] bg-[radial-gradient(ellipse_at_top,rgba(124,92,255,0.18),transparent_60%)]"/>
        <svg viewBox="0 0 1200 600" preserveAspectRatio="none" className="absolute inset-0 w-full h-full text-accent-500/50 ambient-wave">
          <path d="M0 380 Q 100 280 200 360 T 400 360 T 600 360 T 800 360 T 1000 360 T 1200 360" fill="none" stroke="currentColor" strokeWidth="1.2"/>
          <path d="M0 420 Q 80 350 160 410 T 320 410 T 480 410 T 640 410 T 800 410 T 960 410 T 1200 410" fill="none" stroke="currentColor" strokeWidth="0.9" opacity="0.7"/>
          <path d="M0 460 Q 120 410 240 450 T 480 450 T 720 450 T 960 450 T 1200 450" fill="none" stroke="currentColor" strokeWidth="0.7" opacity="0.5"/>
        </svg>
        {/* dot grid */}
        <div className="absolute inset-0 opacity-[0.08]" style={{
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1.2px)',
          backgroundSize: '22px 22px',
          maskImage: 'radial-gradient(ellipse at top, black 30%, transparent 70%)',
        }}/>
      </div>

      <div className="relative max-w-5xl mx-auto px-5 md:px-8 text-center">
        <div className="inline-flex items-center gap-2 rounded-full border border-accent-500/30 bg-accent-500/10 px-3 py-1 text-[11px] font-medium tracking-wide text-accent-200 uppercase">
          <WaveBars count={4} className="h-3 w-3" />
          {window.t('hero.pill', lang)}
        </div>

        <h1 className="mt-6 font-display font-semibold tracking-[-0.03em] text-[44px] leading-[1.02] sm:text-[68px] md:text-[88px] md:leading-[0.98] text-ink-100">
          {window.t('hero.h1a', lang)}
          <span className="relative inline-block ml-2 md:ml-4">
            <span className="bg-gradient-to-r from-accent-300 via-accent-400 to-accent-500 bg-clip-text text-transparent">{window.t('hero.h1b', lang)}</span>
            <svg viewBox="0 0 220 14" className="absolute -bottom-1 left-0 w-full h-2 text-accent-500/70" aria-hidden="true">
              <path d="M2 8 Q 30 -2 60 8 T 120 8 T 180 8 T 218 8" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </span>
        </h1>
        <p className="mt-5 md:mt-7 text-[17px] md:text-xl text-ink-200 max-w-2xl mx-auto text-balance leading-relaxed">
          {window.t('hero.subhead', lang)}
        </p>

        {/* The hero search */}
        <div className="mt-9 md:mt-12 max-w-3xl mx-auto text-left">
          <SearchCombobox size="lg"/>
          <div className="mt-4 md:mt-5 flex flex-wrap items-center justify-center gap-2">
            <span className="text-xs text-ink-400 mr-1">{window.t('common.tryLabel', lang)}</span>
            {[
              { t: 'Cassette Light', s: 'Vela Maren', seed: 0, slug: 'vela-maren/cassette-light-meaning' },
              { t: 'Bintang Pulang', s: 'Hara Mei', seed: 2, slug: 'hara-mei/bintang-pulang-meaning' },
              { t: 'Telegrama', s: 'Lía Vera', seed: 6, slug: 'lia-vera/telegrama-meaning' },
              { t: '月光便箋', s: 'Niko Asano', seed: 7, slug: 'niko-asano/tsukiko-binsen-meaning' },
              { t: 'Halo Driver', s: 'Kestral', seed: 1, slug: 'kestral/halo-driver-meaning' },
            ].map((c, i) => (
              <a
                key={i}
                href={`#/song/${c.slug}`}
                className="group inline-flex items-center gap-2 rounded-full border border-ink-700 hover:border-accent-500/60 hover:bg-accent-500/[0.06] transition px-2.5 py-1.5"
              >
                <AlbumCover seed={c.seed} className="w-5 h-5" rounded="rounded-md"/>
                <span className="text-sm text-ink-100">{c.t}</span>
                <span className="text-xs text-ink-400">{c.s}</span>
              </a>
            ))}
          </div>
        </div>

        {/* Honesty strip */}
        <div className="mt-10 md:mt-14 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-ink-400">
          <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400"/> {window.t('hero.honesty', lang)[0]}</span>
          <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-accent-500"/> {window.t('hero.honesty', lang)[1]}</span>
          <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-amber-300"/> {window.t('hero.honesty', lang)[2]}</span>
        </div>
      </div>
    </section>
  );
}

// ---- "See it in action" demo block ----
// Multilingual line meanings. Quick is one sentence; deep adds context, themes, devices.
const DEMO_LINES = [
  {
    t: 'I keep the porch light on like I forgot the year',
    quick: {
      EN: 'A small ritual of waiting — the porch light becomes a metaphor for unresolved memory.',
      ID: 'Ritual kecil menunggu — lampu teras menjadi perumpamaan kenangan yang belum kelar.',
      ES: 'Un pequeño ritual de espera — la luz del porche se vuelve metáfora de un recuerdo sin cerrar.',
      PT: 'Um pequeno ritual de espera — a luz da varanda vira metáfora de uma memória mal resolvida.',
      FR: 'Un petit rituel d\'attente — la lampe du perron devient la métaphore d\'un souvenir non clos.',
      JP: '待つというずっと続くちいさな儀式 — ポーチの明かりが、未解決の記憶の比喩になる。',
    },
    deep: {
      EN: 'A small, deliberate gesture of waiting — the porch light becomes a metaphor for unresolved memory and a refusal to mark time moving on. Note the line\'s domestic intimacy: it doesn\'t reach for a grand image; it reaches for one that lives in the body.',
      ID: 'Isyarat menunggu yang kecil dan sengaja — lampu teras jadi perumpamaan kenangan yang belum kelar, sekaligus penolakan mengakui waktu sudah lewat. Perhatikan keintiman rumahan baris ini: ia tidak meraih gambaran agung, tapi gambaran yang tinggal di tubuh.',
      ES: 'Un gesto pequeño y deliberado de espera — la luz del porche se vuelve metáfora de un recuerdo no resuelto y de la negativa a aceptar que el tiempo avanza. Fija el verso en lo doméstico: no busca una imagen grandiosa, sino una que vive en el cuerpo.',
      PT: 'Um gesto pequeno e deliberado de espera — a luz da varanda vira metáfora de memória mal resolvida e da recusa em aceitar que o tempo passa. Repare na intimidade doméstica: o verso não busca uma imagem grandiosa, mas uma que mora no corpo.',
      FR: 'Un petit geste d\'attente délibéré — la lampe du perron devient la métaphore d\'un souvenir non clos et d\'un refus d\'admettre que le temps passe. Notez l\'intimité domestique du vers : il ne vise pas une image grandiose, mais une image qui habite le corps.',
      JP: '小さく、しかし意図的な待つ身振り — ポーチの明かりが、未解決の記憶と、時の進行を認めたくないためらいの比喩になる。誇張したイメージではなく、身体に躺うイメージを選んだその加減に注目。',
    },
    themes: { EN: ['Memory & repetition', 'Domestic ritual'], ID: ['Memori & pengulangan', 'Ritual rumah'], ES: ['Memoria y repetición', 'Ritual doméstico'], PT: ['Memória & repetição', 'Ritual doméstico'], FR: ['Mémoire & répétition', 'Rituel domestique'], JP: ['記憶と反復', '家庭の儀式'] },
    device: { EN: 'Porch light = waiting', ID: 'Lampu teras = menunggu', ES: 'Luz del porche = espera', PT: 'Luz da varanda = espera', FR: 'Lampe du perron = attente', JP: 'ポーチの明かり＝待つこと' },
  },
  {
    t: 'We rewound the summer until the tape went thin',
    quick: {
      EN: 'Replaying a relationship until it wore out.',
      ID: 'Memutar ulang sebuah hubungan sampai aus.',
      ES: 'Revivir una relación hasta gastarla.',
      PT: 'Repetir um relacionamento até ele se gastar.',
      FR: 'Rejouer une relation jusqu\'à l\'user.',
      JP: '関係をすり減るまで繰り返し再生すること。',
    },
    deep: {
      EN: 'Replaying a relationship until it wore out. The cassette metaphor underlines how repeating something good can quietly destroy it — and sets up the song\'s title image as the thesis verb of the whole track.',
      ID: 'Memutar ulang hubungan hingga aus. Perumpamaan kaset menegaskan bagaimana mengulang sesuatu yang baik bisa diam-diam menghancurkannya — dan menjadikan gambar judul lagu sebagai kata kerja tesis seluruh trek.',
      ES: 'Revivir una relación hasta gastarla. La metáfora del casete subraya cómo repetir algo bueno puede destruirlo en silencio — y convierte la imagen del título en el verbo-tesis de toda la canción.',
      PT: 'Repetir um relacionamento até ele se gastar. A metáfora da fita sublinha como repetir algo bom pode destruí-lo em silêncio — e transforma a imagem-título no verbo-tese da música inteira.',
      FR: 'Rejouer une relation jusqu\'à l\'user. La métaphore de la cassette souligne comment répéter une bonne chose peut la détruire en silence — et fait de l\'image du titre le verbe-thèse de tout le morceau.',
      JP: '関係を挫切れるまで繰り返すこと。カセットの比喩が、何か良いものを反復することで静かに損なわれていくさまを描き、タイトルのイメージを曲全体のテーゼの動詞に仕立てる。',
    },
    themes: { EN: ['Nostalgia', 'Analog decay'], ID: ['Nostalgia', 'Pelapukan analog'], ES: ['Nostalgia', 'Decadencia analógica'], PT: ['Nostalgia', 'Decaiê analogístico'.replace('Decaiê analogístico','Decadência analógica')], FR: ['Nostalgie', 'Décroissance analogique'], JP: ['ノスタルジー', 'アナログの崩れ'] },
    device: { EN: 'Cassette as metaphor', ID: 'Kaset sebagai perumpamaan', ES: 'Casete como metáfora', PT: 'Fita como metáfora', FR: 'La cassette comme métaphore', JP: 'カセットの比喩' },
  },
  {
    t: 'You drove like a question I never asked out loud',
    quick: {
      EN: 'The other person\'s recklessness mirrors an unvoiced desire.',
      ID: 'Kelakuan nekat lawan main mencerminkan keinginan yang tak pernah diucap.',
      ES: 'La temeridad del otro refleja un deseo nunca dicho en voz alta.',
      PT: 'A imprudência do outro espelha um desejo nunca dito em voz alta.',
      FR: 'L\'audace de l\'autre reflète un désir jamais dit à voix haute.',
      JP: '相手の無謀さが、口にしなかった願いを映し出す。',
    },
    deep: {
      EN: 'Recklessness reads as a kind of curiosity. The line quietly admits the narrator wanted more than they ever said — desire framed as something always implied, never stated. A small turn that recontextualizes the relationship.',
      ID: 'Kenekatan dibaca sebagai bentuk keingintahuan. Baris ini diam-diam mengakui narator menginginkan lebih dari yang pernah diucapkan — hasrat selalu disiratkan, tak pernah dinyatakan. Belokan kecil yang mengontekstualisasi ulang hubungannya.',
      ES: 'La imprudencia se lee como curiosidad. El verso confiesa, en voz baja, que el narrador quería más de lo que dijo — el deseo siempre se insinuó, nunca se dijo. Un giro pequeño que recontextualiza la relación.',
      PT: 'A imprudência se lê como curiosidade. O verso confessa, baixinho, que o narrador queria mais do que disse — desejo sempre insinuado, nunca declarado. Uma virada pequena que recontextualiza a relação.',
      FR: 'L\'audace se lit comme une curiosité. Le vers admet à voix basse que le narrateur voulait plus qu\'il n\'a jamais dit — désir toujours suggéré, jamais formulé. Un petit virage qui recontextualise la relation.',
      JP: '無謀さは一種の好奇心として読める。語り手が口にした以上に望んでいたことを、サリげなく認める一行。欲望は常に示唆され、言言されないままだった — 関係を文脈ごと組み直す小さな転調。',
    },
    themes: { EN: ['Desire', 'Communication'], ID: ['Hasrat', 'Komunikasi'], ES: ['Deseo', 'Comunicación'], PT: ['Desejo', 'Comunicação'], FR: ['Désir', 'Communication'], JP: ['欲望', 'コミュニケーション'] },
    device: { EN: 'Driving = inquiry', ID: 'Mengemudi = bertanya', ES: 'Conducir = preguntar', PT: 'Dirigir = perguntar', FR: 'Conduire = interroger', JP: '運転＝問い' },
  },
  {
    t: 'Static is just love that didn\'t make it home',
    quick: {
      EN: 'Noise reframed as affection that lost its signal.',
      ID: 'Bising itu hanya cinta yang tak sampai ke rumah.',
      ES: 'La estática es solo amor que no llegó a casa.',
      PT: 'Estática é só amor que não chegou em casa.',
      FR: 'La friture, c\'est l\'amour qui n\'est jamais rentré.',
      JP: 'ノイズは、帰り着けなかった愛のこと。',
    },
    deep: {
      EN: 'The song\'s thesis line. Noise and miscommunication are recast as affection that simply lost its signal — generous, never bitter. It also closes the cassette/radio metaphor with a gesture toward forgiveness instead of grievance.',
      ID: 'Baris tesis lagu. Bising dan miskomunikasi dimaknai ulang sebagai cinta yang sekadar kehilangan sinyalnya — lapang, tanpa kepahitan. Ia juga menutup perumpamaan kaset/radio dengan gestur memaafkan, bukan menggugat.',
      ES: 'La línea tesis. El ruido y los malentendidos se reformulan como afecto que solo perdió la señal — generoso, nunca amargo. Cierra además la metáfora del casete y la radio con un gesto de perdón, no de reclamo.',
      PT: 'O verso-tese. Ruído e mal-entendidos viram afeto que apenas perdeu o sinal — generoso, nunca amargo. Também fecha a metáfora da fita/rádio com um gesto de perdão, não de queixa.',
      FR: 'Le vers-thèse. Le bruit et les malentendus deviennent un amour qui a juste perdu son signal — généreux, jamais amer. Il referme aussi la métaphore cassette/radio par un geste de pardon, non de grief.',
      JP: '曲のテーゼとなる一行。ノイズとすれ違いが、ただ信号を失った愛として読み替えられる — 寛やかで、苦くはしない。カセットとラジオの比喩を、恨みではなく赦しの身振りで閉じる。',
    },
    themes: { EN: ['Communication breakdown', 'Tenderness'], ID: ['Komunikasi yang putus', 'Kelembutan'], ES: ['Comunicación rota', 'Ternura'], PT: ['Comunicação rompida', 'Ternura'], FR: ['Rupture de communication', 'Tendresse'], JP: ['コミュニケーションの断絶', 'やさしさ'] },
    device: { EN: 'Static = unspoken love', ID: 'Bising = cinta tak terucap', ES: 'Estática = amor no dicho', PT: 'Estática = amor não dito', FR: 'La friture = amour tu', JP: 'ノイズ＝語られない愛' },
  },
];

function DemoBlock({ lang = 'EN' }) {
  const [active, setActive] = useState(3); // start on the thesis line
  const [depth, setDepth] = useState('quick');
  const line = DEMO_LINES[active];
  const meaningText = depth === 'quick' ? (line.quick[lang] || line.quick.EN) : (line.deep[lang] || line.deep.EN);
  return (
    <section className="relative py-16 md:py-28">
      <div className="max-w-7xl mx-auto px-5 md:px-8">
        <div className="md:flex md:items-end md:justify-between gap-10 mb-10 md:mb-14">
          <div className="max-w-2xl">
            <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('demo.eyebrow', lang)}</div>
            <h2 className="mt-3 font-display text-3xl md:text-5xl font-semibold tracking-tight text-ink-100">
              {window.t('demo.h2', lang)}
            </h2>
            <p className="mt-4 text-ink-300 text-base md:text-lg leading-relaxed">
              {window.t('demo.body', lang)}
            </p>
          </div>
          <div className="hidden md:flex items-center gap-3">
            <span className="text-[11px] font-mono uppercase tracking-widest text-ink-400">{window.t('common.depth', lang)}</span>
            <DepthToggle value={depth} onChange={setDepth}/>
          </div>
        </div>

        <div className="rounded-3xl border border-ink-700 bg-gradient-to-b from-ink-850 to-ink-900 overflow-hidden shadow-soft">
          {/* Demo header */}
          <div className="flex items-center gap-3 px-5 md:px-7 py-4 border-b border-ink-800 bg-ink-850/50">
            <AlbumCover seed={0} className="w-10 h-10" rounded="rounded-lg"/>
            <div className="min-w-0">
              <div className="font-display text-[15px] font-semibold text-ink-100 truncate">Cassette Light</div>
              <div className="text-xs text-ink-400 truncate">Vela Maren · Indoor Weather · 2025</div>
            </div>
            <div className="ml-auto flex items-center gap-2">
              <span className="hidden sm:inline-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-widest text-ink-400">Verse 2</span>
              <button className="inline-flex items-center gap-1.5 h-8 px-3 rounded-full border border-ink-700 hover:border-ink-600 text-xs text-ink-200">
                <Icon.Play className="w-3 h-3"/> Preview
              </button>
            </div>
          </div>

          <div className="grid md:grid-cols-[1.05fr_1fr]">
            {/* Lyrics */}
            <div className="p-5 md:p-8 border-b md:border-b-0 md:border-r border-ink-800">
              <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-ink-400 mb-4">{window.t('common.lyrics', lang)}</div>
              <ol className="space-y-1.5 font-display text-[19px] md:text-[22px] leading-[1.45] text-ink-200">
                {DEMO_LINES.map((l, i) => (
                  <li key={i}>
                    <button
                      onMouseEnter={() => setActive(i)}
                      onFocus={() => setActive(i)}
                      onClick={() => setActive(i)}
                      className={`lyric-line w-full text-left px-2 py-1.5 ${active === i ? 'is-active' : ''}`}
                      aria-pressed={active === i}
                      aria-label={`Decode line: ${l.t}`}
                    >
                      {l.t}
                    </button>
                  </li>
                ))}
              </ol>
              <div className="mt-6 flex items-center gap-3 text-xs text-ink-400">
                <span className="inline-flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-accent-500"/> {window.t('common.tapToDecode', lang)}</span>
                <span className="w-1 h-1 rounded-full bg-ink-600"/>
                <span>↑↓</span>
              </div>
            </div>

            {/* Meaning panel */}
            <div className="p-5 md:p-8 bg-ink-900/60">
              <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
                <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('common.meaning', lang)}</div>
                <div className="flex items-center gap-2">
                  <div className="md:hidden">
                    <DepthToggle value={depth} onChange={setDepth} size="sm"/>
                  </div>
                  <AILabel lang={lang}/>
                </div>
              </div>
              <div key={`${active}-${depth}-${lang}`} className="meaning-enter">
                <div className="text-[12px] uppercase tracking-wider text-ink-400 mb-2">{window.t('common.thisLine', lang)}</div>
                <blockquote className="font-display text-lg md:text-xl text-ink-100 leading-snug border-l-2 border-accent-500/70 pl-4 italic">
                  "{line.t}"
                </blockquote>
                <p className="mt-5 text-[15.5px] md:text-base leading-relaxed text-ink-200">
                  {meaningText}
                </p>

                {depth === 'deep' && (
                  <div className="mt-6 grid grid-cols-2 gap-2">
                    <div className="rounded-xl border border-ink-700 bg-ink-800/60 px-3.5 py-3">
                      <div className="text-[10px] font-mono uppercase tracking-widest text-ink-400">{window.t('common.themes', lang)}</div>
                      <div className="mt-1 text-sm text-ink-100">{(line.themes[lang] || line.themes.EN).join(' · ')}</div>
                    </div>
                    <div className="rounded-xl border border-ink-700 bg-ink-800/60 px-3.5 py-3">
                      <div className="text-[10px] font-mono uppercase tracking-widest text-ink-400">{window.t('common.device', lang)}</div>
                      <div className="mt-1 text-sm text-ink-100">{line.device[lang] || line.device.EN}</div>
                    </div>
                  </div>
                )}

                <div className="mt-6 flex items-center gap-2 flex-wrap">
                  <a
                    href="#/song/vela-maren/cassette-light-meaning"
                    className="inline-flex items-center gap-1.5 h-9 px-3.5 rounded-full bg-accent-500 hover:bg-accent-600 text-white text-sm font-medium transition shadow-glow-accent"
                  >
                    {window.t('demo.open', lang)}
                    <Icon.ArrowRight className="w-4 h-4"/>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Why Lyrithm ----
function WhyCards({ lang = 'EN' }) {
  const icons = [
    <Icon.Sparkle className="w-5 h-5"/>,
    <Icon.Bolt className="w-5 h-5"/>,
    <Icon.Translate className="w-5 h-5"/>,
  ];
  const cards = (window.t('why.cards', lang) || []).map((c, i) => ({ ...c, icon: icons[i] }));
  return (
    <section className="relative py-16 md:py-24 border-t border-ink-800/60">
      <div className="max-w-7xl mx-auto px-5 md:px-8">
        <div className="max-w-2xl">
          <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('why.eyebrow', lang)}</div>
          <h2 className="mt-3 font-display text-3xl md:text-5xl font-semibold tracking-tight text-ink-100">
            {window.t('why.h2', lang)}
          </h2>
        </div>
        <div className="mt-10 md:mt-14 grid md:grid-cols-3 gap-4 md:gap-6">
          {cards.map((c, i) => (
            <div key={i} className="group relative rounded-2xl border border-ink-700 bg-ink-850 p-6 md:p-7 hover:border-accent-500/40 transition overflow-hidden">
              <div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-accent-500/40 to-transparent opacity-0 group-hover:opacity-100 transition"/>
              <div className="flex items-center gap-3 text-accent-300">
                <span className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-accent-500/10 border border-accent-500/25">
                  {c.icon}
                </span>
                <span className="text-[11px] font-mono uppercase tracking-[0.2em]">{c.eyebrow}</span>
              </div>
              <h3 className="mt-5 font-display text-xl md:text-[22px] font-semibold tracking-tight text-ink-100 leading-snug text-balance">
                {c.title}
              </h3>
              <p className="mt-3 text-[15px] leading-relaxed text-ink-300">{c.body}</p>
              <div className="mt-6 flex items-center gap-2 text-sm text-accent-300 opacity-80 group-hover:opacity-100 transition">
                <span>{c.title}</span>
                <Icon.ArrowRight className="w-4 h-4"/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Multilingual proof strip ----
// The original lyric LINE stays in the songwriter's language (English here) — it
// never gets translated. What changes per language is the MEANING explanation.
function MultilingualStrip({ lang = 'EN' }) {
  const ORIGINAL_LANG = 'EN';
  const LINE = 'Static is just love that didn\'t make it home.';
  // Per-language MEANING (interpretation), not a translation of the lyric.
  const meanings = {
    EN: 'Noise reframed as affection that just lost its signal — generous, never bitter.',
    ID: 'Bising dimaknai ulang sebagai sayang yang sekadar kehilangan sinyalnya — lapang, tanpa kepahitan.',
    ES: 'El ruido se reformula como cariño que solo perdió la señal — generoso, nunca amargo.',
    PT: 'O ruído vira afeto que apenas perdeu o sinal — generoso, nunca amargo.',
    FR: 'Le bruit devient un amour qui a juste perdu son signal — généreux, jamais amer.',
    JP: 'ノイズを、ただ信号を失った愛として読み替える — 寛やかで、苦さがない。',
    DE: 'Geräusch neu gelesen als Zuneigung, die nur ihr Signal verloren hat — großzügig, nie bitter.',
    IT: 'Il rumore riletto come affetto che ha solo perso il segnale — generoso, mai amaro.',
    NL: 'Ruis herlezen als genegenheid die enkel zijn signaal verloor — gul, nooit bitter.',
    RU: 'Шум переосмыслен как нежность, просто потерявшая сигнал — щедро, без горечи.',
    ZH: '把噪声重读为只是失去了信号的爱意——宽厚，从不苦涩。',
    ZHT: '把雜訊重讀為只是失去了訊號的愛意——寬厚，從不苦澀。',
    KO: '잡음을, 단지 신호를 잃은 다정함으로 다시 읽기 — 너그럽고, 결코 쓰지 않게.',
    AR: 'يُعاد قراءة الضجيج بوصفه عاطفةً فقدت إشارتها فحسب — كريمة، بلا مرارة.',
    TR: 'Gürültü, yalnız sinyalini yitirmiş bir sevgi olarak yeniden okunur — cömert, asla acı değil.',
    PL: 'Szum przepisany jako czułość, która tylko zgubiła sygnał — wielkoduszna, nigdy gorzka.',
    VI: 'Tiếng nhiễu được đọc lại như tình thân chỉ vừa mất tín hiệu — bao dung, không cay đắng.',
    TH: 'อ่านเสียงรบกวนใหม่เป็นความเสน่หาที่เพียงเสียสัญญาณ — ใจกว้าง ไม่ขมขื่น',
    HI: 'शोर को ऐसे स्नेह के रूप में पढ़ा गया जिसने सिर्फ़ संकेत खो दिया — उदार, कभी कड़वा नहीं.',
    MS: 'Bising dibaca semula sebagai kasih sayang yang hanya hilang isyarat — luas, tidak pernah pahit.',
    TL: 'Binabasa muli ang ingay bilang pagmamahal na nawalan lang ng senyas — bukas-palad, hindi kailanman mapait.',
    SV: 'Bruset omläst som ömhet som bara tappat sin signal — generös, aldrig bitter.',
    DA: 'Støjen genlæst som ømhed, der bare mistede sit signal — gavmild, aldrig bitter.',
    NO: 'Støyen lest om som ømhet som bare mistet signalet — raus, aldri bitter.',
    FI: 'Kohina luettu uudelleen hellyydeksi, joka vain menetti signaalinsa — antelias, ei katkera.',
    EL: 'Ο θόρυβος ξαναδιαβάζεται ως τρυφερότητα που απλώς έχασε το σήμα — γενναιόδωρη, ποτέ πικρή.',
    HE: 'הרעש נקרא מחדש כחיבה שאיבדה רק את האות — נדיבה, לעולם לא מרירה.',
    CS: 'Šum přepsán jako něha, která jen ztratila signál — velkorysá, nikdy hořká.',
    HU: 'A zaj újraolvasva olyan gyengédségként, amely csak elvesztette a jelét — nagyvonalú, soha keserű.',
    RO: 'Zgomotul recitit ca afecțiune care doar și-a pierdut semnalul — generos, niciodată amar.',
    UK: 'Шум переписаний як ніжність, що просто втратила сигнал — щедра, без гіркоти.',
    FA: 'بازخوانیِ نویز به‌مثابه مهری که فقط سیگنالش را گم کرده است — بخشنده، نه تلخ.',
    UR: 'شور کو ایسی محبت کے طور پر دوبارہ پڑھنا جس کا صرف سگنل گم ہو گیا — فراخ دل، کبھی تلخ نہیں.',
    BN: 'কোলাহলকে এমন স্নেহ হিসেবে পুনঃপাঠ যেটি কেবল সংকেত হারিয়েছে — উদার, কখনো তিক্ত নয়.',
  };
  // Use LANGS from shared.jsx so it stays in sync with the LOCALES list.
  const langs = (window.LANGS || [{ code: 'EN', name: 'English' }]).filter(l => meanings[l.code]);
  const [pick, setPick] = useState(lang === ORIGINAL_LANG ? 'ID' : lang);
  useEffect(() => { setPick(lang === ORIGINAL_LANG ? 'ID' : lang); }, [lang]);
  return (
    <section className="relative py-16 md:py-24 border-t border-ink-800/60 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-8 md:gap-12 items-center">
          <div className="md:col-span-5">
            <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('multi.eyebrow', lang)}</div>
            <h2 className="mt-3 font-display text-3xl md:text-5xl font-semibold tracking-tight text-ink-100 text-balance">
              {window.t('multi.h2', lang)}
            </h2>
            <p className="mt-5 text-ink-300 text-base md:text-lg leading-relaxed">
              {window.t('multi.body', lang)}
            </p>
            <div className="mt-7 flex flex-wrap gap-2 max-h-44 overflow-y-auto pr-1">
              {langs.map(l => (
                <button
                  key={l.code}
                  onClick={() => setPick(l.code)}
                  className={`inline-flex items-center gap-2 h-9 px-3.5 rounded-full border text-sm transition ${pick === l.code ? 'border-accent-500/70 bg-accent-500/10 text-ink-100' : 'border-ink-700 text-ink-200 hover:border-ink-600'}`}
                  aria-pressed={pick === l.code}
                >
                  <span className="font-mono text-[11px] text-ink-300">{l.code}</span>
                  <span>{l.name}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="md:col-span-7">
            <div className="rounded-3xl border border-ink-700 bg-ink-850 overflow-hidden shadow-soft">
              <div className="flex items-center gap-3 px-5 py-4 border-b border-ink-800 bg-ink-850/60">
                <AlbumCover seed={0} className="w-9 h-9" rounded="rounded-lg"/>
                <div className="text-sm text-ink-300">
                  <span className="text-ink-100 font-medium">Cassette Light</span> · Vela Maren
                </div>
                <AILabel lang={lang} className="ml-auto hidden sm:inline-flex"/>
              </div>
              <div className="p-6 md:p-8 grid sm:grid-cols-2 gap-6">
                <div>
                  <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-ink-400 mb-2">{window.t('multi.original', lang)}</div>
                  <p className="font-display text-xl md:text-2xl text-ink-100 leading-snug">"{LINE}"</p>
                  <p className="mt-3 text-[11px] font-mono uppercase tracking-[0.18em] text-ink-500">
                    {window.t('common.lyrics', lang)} · {ORIGINAL_LANG}
                  </p>
                </div>
                <div>
                  <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300 mb-2">{window.t('common.meaning', lang)} · {langs.find(l => l.code === pick)?.name}</div>
                  <p key={pick} className="meaning-enter font-display text-lg md:text-xl text-ink-100 leading-snug">{meanings[pick] || meanings.EN}</p>
                  <p className="mt-3 text-sm text-ink-300 leading-relaxed">
                    {window.t('multi.thesis', lang)}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Trending grid ----
function TrendingGrid({ lang = 'EN' }) {
  const items = CATALOG.slice(0, 8);
  return (
    <section className="relative py-16 md:py-24 border-t border-ink-800/60">
      <div className="max-w-7xl mx-auto px-5 md:px-8">
        <div className="md:flex md:items-end md:justify-between gap-8 mb-10">
          <div className="max-w-xl">
            <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('trending.eyebrow', lang)}</div>
            <h2 className="mt-3 font-display text-3xl md:text-5xl font-semibold tracking-tight text-ink-100">
              {window.t('trending.h2', lang)}
            </h2>
          </div>
          <div className="hidden md:flex items-center gap-3">
            <a href="#/trending" className="inline-flex items-center gap-1.5 text-sm text-ink-200 hover:text-ink-100">
              {window.t('common.seeFullChart', lang)} <Icon.ArrowRight className="w-4 h-4"/>
            </a>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
          {items.map((s, i) => (
            <a
              key={s.id}
              href={`#/song/${s.slug}`}
              className="group block rounded-2xl border border-ink-700 bg-ink-850 hover:border-accent-500/40 hover:bg-ink-800/80 transition overflow-hidden"
            >
              <div className="relative aspect-square">
                <AlbumCover seed={s.seed} className="w-full h-full" rounded="rounded-none"/>
                <div className="absolute top-2.5 right-2.5">
                  <BookmarkButton song={s} size="sm"/>
                </div>
                <div className="absolute inset-x-0 bottom-0 p-2.5 flex items-center justify-between">
                  <span className="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-widest text-white/85 bg-black/35 backdrop-blur-md rounded-full px-2 py-0.5">
                    <Icon.Sparkle className="w-3 h-3"/> meaning
                  </span>
                  <span className="text-[10px] font-mono text-white/80 bg-black/35 backdrop-blur-md rounded-full px-2 py-0.5">#{(i+1).toString().padStart(2,'0')}</span>
                </div>
              </div>
              <div className="p-4">
                <div className="font-display font-semibold text-ink-100 truncate text-[15px]">{s.t}</div>
                <div className="mt-0.5 text-xs text-ink-300 flex items-center gap-1.5">
                  <span className="truncate">{s.a}</span>
                  <span className="w-1 h-1 rounded-full bg-ink-600"/>
                  <span className="truncate">{s.g}</span>
                </div>
                <div className="mt-3 flex items-center justify-between">
                  <span className="text-[11px] text-ink-400">{window.t('trending.readMeaning', lang)}</span>
                  <Icon.ArrowRight className="w-3.5 h-3.5 text-ink-300 group-hover:text-accent-300 group-hover:translate-x-0.5 transition"/>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Honest credibility band ----
function CredibilityBand({ lang = 'EN' }) {
  const bullets = window.t('cred.bullets', lang) || [];
  return (
    <section className="relative py-14 md:py-20 border-t border-ink-800/60">
      <div className="max-w-5xl mx-auto px-5 md:px-8">
        <div className="rounded-3xl border border-ink-700 bg-gradient-to-br from-ink-850 to-ink-900 p-6 md:p-10">
          <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-start">
            <div>
              <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-accent-300">{window.t('cred.eyebrow', lang)}</div>
              <h3 className="mt-3 font-display text-2xl md:text-3xl font-semibold tracking-tight text-ink-100 text-balance">
                {window.t('cred.h3', lang)}
              </h3>
            </div>
            <ul className="space-y-4 text-[15px] text-ink-300">
              {bullets.map(([h, p], i) => (
                <li key={i} className="flex gap-3"><span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-accent-500 shrink-0"/><span><span className="text-ink-100">{h}</span> {p}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Homepage shell ----
function HomePage({ lang = 'EN' }) {
  return (
    <main id="main">
      <HeroSearch lang={lang}/>
      <DemoBlock lang={lang}/>
      <WhyCards lang={lang}/>
      <MultilingualStrip lang={lang}/>
      <TrendingGrid lang={lang}/>
      <CredibilityBand lang={lang}/>
      <QuietAd note="One quiet sponsor slot lives here — far below the fold, never in the search or the demo."/>
      <div className="h-12"/>
    </main>
  );
}

window.HomePage = HomePage;