// Variation 3: NOICE Brand — Cinematic Dark · Mobile

function V3Mobile() {
  const { NOICE_YELLOW, NOICE_BLACK, NOICE_BLACK_2, NOICE_BLACK_3, NOICE_GRAY_1, NOICE_GRAY_2, NOICE_GRAY_3, NOICE_GRAY_4 } = window.NOICE_TOKENS;
  const accent = NOICE_YELLOW;

  return (
    <div className="noice-artboard" style={{
      background: NOICE_BLACK, color: 'white',
      fontFamily: '"Readex Pro", system-ui, sans-serif',
    }}>

      {/* NAV */}
      <nav style={{
        padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(10,10,10,0.9)', backdropFilter: 'blur(20px)',
        borderBottom: `1px solid ${NOICE_GRAY_4}`,
      }}>
        <NoiceLogo size={18} color={accent} />
        <button style={{ padding: '8px 14px', fontSize: 11, fontWeight: 700, background: accent, color: NOICE_BLACK, border: 'none', borderRadius: 999 }}>
          Denger Gratis
        </button>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 10, padding: '40px 0', opacity: 0.18 }}>
          <div style={{ height: 110 }}><MarqueeRow items={CONTENT.podcasts} size={110} /></div>
          <div style={{ height: 110 }}><MarqueeRow items={CONTENT.films.concat(CONTENT.podcasts.slice(4, 10))} size={110} reverse /></div>
          <div style={{ height: 110 }}><MarqueeRow items={CONTENT.audiobooks} size={110} /></div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at center, transparent 0%, ${NOICE_BLACK} 75%), linear-gradient(180deg, ${NOICE_BLACK} 0%, transparent 15%, transparent 75%, ${NOICE_BLACK} 100%)` }} />

        <div style={{ position: 'relative', zIndex: 2, padding: '36px 20px 40px', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 12px', borderRadius: 999, background: accent, color: NOICE_BLACK, fontSize: 10, fontWeight: 700, letterSpacing: '0.04em', marginBottom: 18 }}>
            <Icon name="sparkle" size={10} />
            <span>#NemeninTerusTanpaJeda</span>
          </div>
          <h1 style={{ fontSize: 44, lineHeight: 0.95, fontWeight: 700, letterSpacing: '-0.035em', margin: '0 0 18px', textWrap: 'balance' }}>
            Nemenin terus,<br />
            <span style={{ color: accent, fontStyle: 'italic', fontWeight: 500 }}>tanpa jeda.</span>
          </h1>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', margin: '0 0 20px' }}>
            {[
              'Tetap ketawa sambil beraktivitas.',
              'Tetap belajar sambil beraktivitas.',
              'Tetap merinding walau sambil tutup mata.',
            ].map((t, i) => (
              <span key={i} style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.05)', border: `1px solid ${NOICE_GRAY_4}`, fontSize: 11.5, color: NOICE_GRAY_1 }}>{t}</span>
            ))}
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.5, color: NOICE_GRAY_2, margin: '0 0 22px' }}>
            3.000+ podcast, 2.000+ audioseries, 3.000+ audiobook.<br />
            Bebas iklan. Mulai Rp 30.000/bulan.
          </p>
          <button style={{ width: '100%', padding: '16px', fontSize: 14, fontWeight: 700, marginBottom: 10, background: accent, color: NOICE_BLACK, border: 'none', borderRadius: 999 }}>
            Denger Gratis Konten Awal
          </button>
          <button style={{ width: '100%', padding: '14px', fontSize: 13, background: 'transparent', color: 'white', border: `1px solid ${NOICE_GRAY_4}`, borderRadius: 999, fontWeight: 600 }}>
            ▶ Tonton Trailer
          </button>
          <div style={{ marginTop: 28 }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.15em', color: NOICE_GRAY_3, marginBottom: 8, textAlign: 'left' }}>
              ♫ DIPUTAR OLEH 2.341 ORANG
            </div>
            <AudioPreview title="E162: OTW Pengukuhan Prediksi 2.0" host="TRIO KURNIA" hue={50} dark accent={accent} />
          </div>
        </div>
      </section>

      {/* CATEGORY — auto-scroll */}
      <section style={{ padding: '40px 0 16px' }}>
        {[
          { key: 'podcasts', label: 'Podcast Premium dari Kreator Favoritmu', count: '3.000+ episode', items: [...CONTENT.podcasts, ...CONTENT.podcasts], reverse: false, creatorMode: true },
          { key: 'films', label: 'AUDIOSERIES', count: '2.000+ konten', items: [...CONTENT.films, ...CONTENT.podcasts], reverse: true, creatorMode: false },
          { key: 'audiobooks', label: 'AUDIOBOOK', count: '3.000+ konten', items: [...CONTENT.audiobooks, ...CONTENT.podcasts], reverse: false, creatorMode: false },
        ].map(cat => (
          <div key={cat.key} style={{ marginBottom: 36 }}>
            <div style={{ padding: '0 20px', marginBottom: 12 }}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 3 }}>EKSKLUSIF</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <h3 style={{ fontSize: 18, fontWeight: 700, margin: 0, letterSpacing: '-0.02em' }}>{cat.label}</h3>
                <div style={{ fontSize: 11, color: NOICE_GRAY_3 }}>{cat.count} →</div>
              </div>
            </div>
            <div style={{ height: 148 }}>
              <MarqueeRow items={cat.items} size={132} reverse={cat.reverse} duration={45} creatorMode={cat.creatorMode} />
            </div>
          </div>
        ))}
      </section>

      {/* GENRE */}
      <section style={{ padding: '36px 0 48px' }}>
        <div style={{ padding: '0 20px', marginBottom: 20 }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 8 }}>GENRE</div>
          <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', margin: 0 }}>
            Punya Semua Genre untuk{' '}
            <span style={{ color: accent, fontStyle: 'italic', fontWeight: 500 }}>Nemenin Mood Kamu.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <GenreMarquee items={GENRES} accent={accent} duration={22} />
          <GenreMarquee items={[...GENRES].reverse()} reverse accent={accent} duration={26} />
        </div>
      </section>

      {/* BENEFITS */}
      <section style={{ padding: '40px 20px', background: NOICE_BLACK_2 }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>KENAPA PREMIUM</div>
          <h2 style={{ fontSize: 30, lineHeight: 1, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
            Dirancang buat <span style={{ color: accent, fontStyle: 'italic', fontWeight: 500 }}>telinga</span> yang haus cerita.
          </h2>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {BENEFITS.map((b, i) => (
            <div key={i} style={{ padding: 18, background: NOICE_BLACK_3, border: `1px solid ${NOICE_GRAY_4}`, borderRadius: 14, display: 'flex', gap: 14, alignItems: 'start' }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, flexShrink: 0, background: accent, color: NOICE_BLACK, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={b.icon} size={18} />
              </div>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', color: accent, marginBottom: 3 }}>{b.stat}</div>
                <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 4 }}>{b.title}</div>
                <div style={{ fontSize: 12, color: NOICE_GRAY_2, lineHeight: 1.45 }}>{b.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: '40px 20px' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>CERITA PENDENGAR</div>
          <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
            5 juta+ percaya NOICE<span style={{ color: accent }}>.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          {TESTIMONIALS.slice(0, 2).map((t, i) => (
            <div key={i} style={{ padding: 18, background: NOICE_BLACK_3, border: `1px solid ${NOICE_GRAY_4}`, borderRadius: 14 }}>
              <div style={{ display: 'flex', gap: 3, marginBottom: 10, color: accent }}>
                {[1,2,3,4,5].map(s => <Icon key={s} name="star" size={12} />)}
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.5, margin: '0 0 12px', color: NOICE_GRAY_1 }}>"{t.quote}"</p>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <Avatar hue={t.avatarHue} name={t.name} size={32} />
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>{t.name}</div>
                  <div style={{ fontSize: 10, color: NOICE_GRAY_3 }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section style={{ padding: '40px 20px', background: NOICE_BLACK_2, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 400, height: 400, background: `radial-gradient(circle, rgba(250,216,16,0.15) 0%, transparent 60%)`, pointerEvents: 'none' }} />
        <div style={{ textAlign: 'center', marginBottom: 24, position: 'relative' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>MULAI LANGGANAN</div>
          <h2 style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
            Satu harga<span style={{ color: accent }}>.</span>
          </h2>
        </div>
        <div style={{ position: 'relative', background: accent, color: NOICE_BLACK, borderRadius: 20, padding: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
            <div style={{ fontSize: 9, fontWeight: 800, padding: '3px 8px', borderRadius: 999, background: NOICE_BLACK, color: accent, letterSpacing: '0.08em' }}>PREMIUM MONTHLY</div>
            <Countdown compact />
          </div>
          <div style={{ fontSize: 14, opacity: 0.5, textDecoration: 'line-through', marginBottom: 2 }}>Rp 44.000</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 18 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Rp</span>
            <span style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>30.000</span>
            <span style={{ fontSize: 13, opacity: 0.7 }}>/bulan</span>
          </div>
          <button style={{ width: '100%', padding: '14px', fontSize: 14, marginBottom: 16, fontWeight: 700, background: NOICE_BLACK, color: accent, border: 'none', borderRadius: 999 }}>
            Denger Gratis Konten Awal
          </button>
          <div style={{ display: 'grid', gap: 8 }}>
            {['Bebas iklan', '3.000+ Podcast · 2.000+ Audioseries', 'Download tanpa batas', 'Batalin kapan aja'].map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                <div style={{ width: 18, height: 18, borderRadius: '50%', background: NOICE_BLACK, color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="check" size={11} stroke={3} />
                </div>
                <span>{f}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: '40px 20px' }}>
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>FAQ</div>
          <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
            Tanya jawab<span style={{ color: accent }}>.</span>
          </h2>
        </div>
        <FAQList items={FAQS.slice(0, 4)} dark />
      </section>

      {/* FOOTER */}
      <footer style={{ padding: '24px 20px', borderTop: `1px solid ${NOICE_GRAY_4}`, fontSize: 10, color: NOICE_GRAY_3, textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <NoiceLogo size={14} color={accent} />
        </div>
        © 2026 NOICE. Rumah konten audio Indonesia.
      </footer>
    </div>
  );
}

window.V3Mobile = V3Mobile;