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

const NOICE_YELLOW = '#FAD810';
const NOICE_BLACK = '#141414';
const NOICE_BLACK_2 = '#0A0A0A';
const NOICE_BLACK_3 = '#1F1F1F';
const NOICE_GRAY_1 = '#DEDEDE';
const NOICE_GRAY_2 = '#B9B9B9';
const NOICE_GRAY_3 = '#767676';
const NOICE_GRAY_4 = '#4B4B4B';

function V3Desktop() {
  const accent = NOICE_YELLOW;
  const W = { maxWidth: 1200, margin: '0 auto', padding: '0 40px' };

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

      {/* NAV */}
      <nav style={{
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(10,10,10,0.85)', backdropFilter: 'blur(20px)',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{ ...W, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, paddingBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
            <NoiceLogo size={22} color={accent} />
            <div style={{ display: 'flex', gap: 24, fontSize: 13, fontWeight: 500, color: NOICE_GRAY_1, opacity: 0.85 }}>
              <span>Podcast</span><span>Audioseries</span><span>Audiobook</span><span>Radio</span>
            </div>
          </div>
          <button style={{ padding: '10px 20px', fontSize: 13, fontWeight: 700, background: accent, color: NOICE_BLACK, border: 'none', borderRadius: 999 }}>
            Denger Gratis
          </button>
        </div>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: 780, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', gap: 16, padding: '100px 0', opacity: 0.22 }}>
          <div style={{ height: 160 }}><MarqueeRow items={CONTENT.podcasts} size={160} /></div>
          <div style={{ height: 160 }}><MarqueeRow items={CONTENT.films.concat(CONTENT.podcasts.slice(4, 10))} size={160} reverse /></div>
          <div style={{ height: 160 }}><MarqueeRow items={[...CONTENT.audiobooks, ...CONTENT.podcasts.slice(2, 8)]} size={160} /></div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at center, transparent 0%, ${NOICE_BLACK} 85%)` }} />
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${NOICE_BLACK} 0%, transparent 18%, transparent 80%, ${NOICE_BLACK} 100%)` }} />

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

      {/* CATEGORY SHOWCASE — auto-scroll */}
      <section style={{ padding: '72px 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: 52 }}>
            <div style={{ ...W, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 4 }}>EKSKLUSIF DI PREMIUM</div>
                <h3 style={{ fontSize: 28, fontWeight: 700, margin: 0, letterSpacing: '-0.02em' }}>{cat.label}</h3>
              </div>
              <div style={{ fontSize: 13, color: NOICE_GRAY_3 }}>{cat.count} →</div>
            </div>
            <div style={{ height: 196 }}>
              <MarqueeRow items={cat.items} size={178} reverse={cat.reverse} duration={55} creatorMode={cat.creatorMode} />
            </div>
          </div>
        ))}
      </section>

      {/* GENRE */}
      <section style={{ padding: '60px 0 80px' }}>
        <div style={{ ...W, marginBottom: 32 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 10 }}>GENRE</div>
          <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.025em', 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: 12 }}>
          <GenreMarquee items={GENRES} accent={accent} duration={28} />
          <GenreMarquee items={[...GENRES].reverse()} reverse accent={accent} duration={32} />
        </div>
      </section>

      {/* BENEFITS */}
      <section style={{ padding: '80px 0', background: NOICE_BLACK_2 }}>
        <div style={W}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 12 }}>KENAPA PREMIUM</div>
            <h2 style={{ fontSize: 60, lineHeight: 1, fontWeight: 700, letterSpacing: '-0.03em', margin: '0 auto', maxWidth: 760 }}>
              Dirancang buat <span style={{ color: accent, fontStyle: 'italic', fontWeight: 500 }}>telinga</span> yang haus cerita.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {BENEFITS.map((b, i) => (
              <div key={i} style={{ padding: 32, background: NOICE_BLACK_3, border: `1px solid ${NOICE_GRAY_4}`, borderRadius: 20 }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, marginBottom: 20, background: accent, color: NOICE_BLACK, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={b.icon} size={22} />
                </div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', color: accent, marginBottom: 6 }}>{b.stat}</div>
                <h3 style={{ fontSize: 22, fontWeight: 700, margin: '0 0 10px' }}>{b.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, color: NOICE_GRAY_2 }}>{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

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

      {/* FAQ */}
      <section style={{ padding: '80px 0' }}>
        <div style={W}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.15em', color: accent, marginBottom: 12 }}>FAQ</div>
            <h2 style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
              Pertanyaan yang sering ditanya<span style={{ color: accent }}>.</span>
            </h2>
          </div>
          <div style={{ maxWidth: 800, margin: '0 auto' }}>
            <FAQList items={FAQS} dark />
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: `1px solid ${NOICE_GRAY_4}` }}>
        <div style={{ ...W, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 40, paddingBottom: 40, fontSize: 12, color: NOICE_GRAY_3 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <NoiceLogo size={16} color={accent} />
            <span>© 2026 NOICE. Rumah konten audio Indonesia.</span>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <span>Syarat</span><span>Privasi</span><span>Support</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.V3Desktop = V3Desktop;
window.NOICE_TOKENS = { NOICE_YELLOW, NOICE_BLACK, NOICE_BLACK_2, NOICE_BLACK_3, NOICE_GRAY_1, NOICE_GRAY_2, NOICE_GRAY_3, NOICE_GRAY_4 };