// Marketing landing page + login/register screens for Survey TOM
const { useState: useState_mk } = React;

// ─── Marketing Landing ────────────────────────────────────────────────
// Public-facing /  page. Anonymous visitors land here, then convert into
// signups via "Coba Gratis" / "Mulai Gratis" CTAs. Reuses RESEARCH_KINDS
// from templates.jsx to keep marketing copy in sync with the actual product.
function MarketingLanding({ onGoLogin, onGoRegister }) {
  const kinds = window.RESEARCH_KINDS || [];

  return (
    <div style={{ height: '100%', overflow: 'auto', background: 'var(--bg)' }} className="scroll">
      {/* ─── Nav ───────────────────────────────────────────────────── */}
      <nav style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: 'oklch(0.985 0.003 265 / 0.85)', backdropFilter: 'blur(10px)',
        borderBottom: '1px solid var(--line)',
        padding: '14px 48px', display: 'flex', alignItems: 'center', gap: 28,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'linear-gradient(135deg, var(--primary), oklch(0.62 0.20 290))',
            display: 'grid', placeItems: 'center', color: 'white', fontWeight: 700, fontSize: 13,
          }}>T</div>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Survey TOM</div>
        </div>
        <div style={{ display: 'flex', gap: 22, fontSize: 13.5, color: 'var(--ink-2)' }}>
          <a href="#features" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Fitur</a>
          <a href="#kinds" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Jenis Riset</a>
          <a href="#how" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Cara Kerja</a>
          <a href="#faq" style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>FAQ</a>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost" onClick={onGoLogin}>Masuk</button>
          <button className="btn btn-primary" onClick={onGoRegister}>Coba Gratis</button>
        </div>
      </nav>

      {/* ─── Hero ──────────────────────────────────────────────────── */}
      <section style={{ padding: '72px 48px 60px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -120, right: -80, width: 520, height: 520,
          background: 'radial-gradient(circle, oklch(0.85 0.10 265 / 0.5), transparent 60%)',
          pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute', bottom: -180, left: -120, width: 480, height: 480,
          background: 'radial-gradient(circle, oklch(0.88 0.10 75 / 0.35), transparent 65%)',
          pointerEvents: 'none',
        }} />

        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }}>
          <div>
            <div className="badge badge-primary" style={{ padding: '5px 10px', fontSize: 12 }}>
              <I.Sparkle size={11} />🇮🇩 Platform Riset Brand untuk Bisnis Indonesia
            </div>
            <h1 style={{ fontSize: 54, lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em', margin: '18px 0 16px' }}>
              Riset brand <span style={{ color: 'var(--primary)' }}>secepat &amp; semurah</span>{' '}yang bisnis Indonesia butuhkan.
            </h1>
            <p style={{ fontSize: 16.5, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 520, margin: 0 }}>
              5 jenis riset dalam satu platform — Top of Mind, Market Gap, Concept Test, Brand Name &amp; Brand Perception. Pakai AI yang ngerti Bahasa Indonesia, sebar via WhatsApp, dapat insight siap pakai.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 26 }}>
              <button className="btn btn-primary" onClick={onGoRegister} style={{ fontSize: 14.5, padding: '12px 18px' }}>
                Mulai Gratis 14 Hari <I.ArrowRight size={15} />
              </button>
              <button className="btn btn-ghost" style={{ fontSize: 14.5, padding: '12px 18px' }}>
                <I.Eye size={14} />Lihat Demo
              </button>
            </div>
            <div style={{ display: 'flex', gap: 18, marginTop: 22, fontSize: 12.5, color: 'var(--ink-3)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I.Check size={13} style={{ color: 'oklch(0.55 0.15 155)' }} />Tanpa kartu kredit</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I.Check size={13} style={{ color: 'oklch(0.55 0.15 155)' }} />Setup 5 menit</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I.Check size={13} style={{ color: 'oklch(0.55 0.15 155)' }} />Bahasa Indonesia</span>
            </div>
          </div>

          {/* Hero illustration: rich layered dashboard mock */}
          <div style={{ position: 'relative', height: 480 }}>
            <div className="card" style={{
              position: 'absolute', top: 20, left: 0, right: 20,
              padding: 18, boxShadow: 'var(--shadow-pop)',
              background: 'linear-gradient(180deg, var(--surface), var(--surface))',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 9,
                    background: 'linear-gradient(135deg, oklch(0.55 0.16 25), oklch(0.65 0.14 45))',
                    color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14,
                  }}>G</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Geprekin Aja</div>
                    <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Riset Brand · 6 bulan</div>
                  </div>
                </div>
                <span className="badge badge-success" style={{ fontSize: 10.5 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(0.62 0.16 155)', animation: 'pulse 2s infinite' }} />
                  1,284 respons
                </span>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
                {[
                  { label: 'Top of Mind', val: '32.4%', delta: '↑ 6.8', color: 'var(--primary)' },
                  { label: 'NPS Score',   val: '42',    delta: '↑ 4',   color: 'oklch(0.55 0.14 145)' },
                  { label: 'Brand Recall',val: '68%',   delta: '↑ 11',  color: 'oklch(0.55 0.16 25)' },
                ].map((k) => (
                  <div key={k.label} style={{ padding: '8px 10px', background: 'var(--bg-2)', borderRadius: 8 }}>
                    <div style={{ fontSize: 9.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>{k.label}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 3 }}>
                      <span className="mono" style={{ fontSize: 17, fontWeight: 700, color: k.color, letterSpacing: '-0.01em' }}>{k.val}</span>
                      <span className="mono" style={{ fontSize: 9.5, color: 'oklch(0.45 0.12 155)', fontWeight: 600 }}>{k.delta}</span>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ position: 'relative' }}>
                <svg viewBox="0 0 320 130" style={{ width: '100%', display: 'block' }}>
                  <defs>
                    <linearGradient id="heroAreaG" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="oklch(0.52 0.18 265)" stopOpacity="0.28" />
                      <stop offset="100%" stopColor="oklch(0.52 0.18 265)" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  {[20, 50, 80, 110].map((y, i) => (
                    <line key={i} x1="0" y1={y} x2="320" y2={y} stroke="var(--line-2)" strokeDasharray="2 4" strokeWidth="0.5" />
                  ))}
                  <line x1="200" y1="10" x2="200" y2="115" stroke="oklch(0.78 0.10 75)" strokeDasharray="3 3" strokeWidth="1" />
                  <g transform="translate(200, 8)">
                    <rect x={-30} y={-2} width="60" height="14" rx="7" fill="oklch(0.96 0.05 75)" stroke="oklch(0.82 0.10 75)" strokeWidth="0.6" />
                    <text x={0} y={8} fontSize="8" fontWeight="600" fill="oklch(0.50 0.14 75)" textAnchor="middle">📱 TikTok Ads</text>
                  </g>
                  <path d="M0 95 L 50 90 L 100 80 L 150 65 L 200 50 L 250 28 L 320 18 L 320 130 L 0 130 Z" fill="url(#heroAreaG)" />
                  <path d="M0 95 L 50 90 L 100 80 L 150 65 L 200 50 L 250 28 L 320 18" fill="none" stroke="oklch(0.52 0.18 265)" strokeWidth="2.5" strokeLinecap="round" />
                  <path d="M0 35 L 50 38 L 100 42 L 150 40 L 200 45 L 250 50 L 320 55" fill="none" stroke="oklch(0.68 0.16 25)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinecap="round" />
                  <path d="M0 100 L 50 102 L 100 100 L 150 95 L 200 92 L 250 88 L 320 85" fill="none" stroke="oklch(0.62 0.14 145)" strokeWidth="1.5" strokeDasharray="4 3" strokeLinecap="round" />
                  <circle cx="320" cy="18" r="4" fill="oklch(0.52 0.18 265)" stroke="white" strokeWidth="2" />
                  {['Nov', 'Des', 'Jan', 'Feb', 'Mar', 'Apr'].map((m, i) => (
                    <text key={m} x={i * 64 + 8} y={128} fontSize="8" fill="var(--ink-3)" textAnchor="middle">{m}</text>
                  ))}
                </svg>
              </div>

              <div style={{ display: 'flex', gap: 12, fontSize: 10, marginTop: 8, color: 'var(--ink-3)' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 2.5, background: 'oklch(0.52 0.18 265)', borderRadius: 1 }} />Kopi Kenanga</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 1.5, background: 'oklch(0.68 0.16 25)' }} />Janji Manis</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 10, height: 1.5, background: 'oklch(0.62 0.14 145)' }} />Tomoro</span>
              </div>
            </div>

            {/* Floating: AI Insight */}
            <div className="card" style={{
              position: 'absolute', top: -8, right: 8,
              padding: '8px 12px', transform: 'rotate(3deg)', boxShadow: 'var(--shadow-md)',
              background: 'linear-gradient(135deg, var(--primary-50), var(--surface))',
              border: '1px solid var(--primary-100)', maxWidth: 200,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <div style={{ width: 18, height: 18, borderRadius: 5, background: 'var(--primary)', color: 'white', display: 'grid', placeItems: 'center' }}>
                  <I.Sparkle size={10} />
                </div>
                <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--primary)' }}>AI Insight · Baru</div>
              </div>
              <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.35, color: 'var(--ink)' }}>
                Sukolilo siap jadi pasar baru
              </div>
              <div style={{ fontSize: 9.5, color: 'var(--ink-3)', marginTop: 2 }}>
                Awareness rendah, NPS 8.4 — peluang!
              </div>
            </div>

            {/* Floating: Live respons feed */}
            <div className="card" style={{
              position: 'absolute', top: 220, right: -36,
              padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
              transform: 'rotate(-2deg)', boxShadow: 'var(--shadow-md)',
              background: 'var(--surface)',
            }}>
              <div style={{ position: 'relative', width: 8, height: 8 }}>
                <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'oklch(0.62 0.16 155)', animation: 'pulse 1.6s infinite' }} />
                <span style={{ position: 'absolute', inset: 1.5, borderRadius: '50%', background: 'oklch(0.62 0.16 155)' }} />
              </div>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 600 }}>+184 respons baru</div>
                <div style={{ fontSize: 9, color: 'var(--ink-3)' }}>dari Sukolilo · 2 mnt lalu</div>
              </div>
            </div>

            {/* Floating: Heatmap mini */}
            <div className="card" style={{
              position: 'absolute', bottom: 20, left: -28, padding: 12,
              transform: 'rotate(-2deg)', boxShadow: 'var(--shadow-md)',
              background: 'var(--surface)', maxWidth: 200,
            }}>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginBottom: 4, fontWeight: 500 }}>Sebaran Surabaya</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 2 }}>
                {[
                  0.2,0.3,0.4,0.6,0.7,0.5,0.3,0.2,
                  0.3,0.5,0.7,0.9,0.8,0.6,0.4,0.3,
                  0.4,0.6,0.8,0.95,0.85,0.7,0.5,0.35,
                  0.3,0.5,0.7,0.8,0.7,0.6,0.4,0.3,
                  0.2,0.3,0.5,0.6,0.5,0.4,0.3,0.2,
                ].map((v, i) => (
                  <div key={i} style={{ aspectRatio: '1', borderRadius: 2, background: `oklch(${0.95 - v * 0.4} ${0.04 + v * 0.18} 265)` }} />
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Logos strip */}
        <div style={{ maxWidth: 1100, margin: '70px auto 0', textAlign: 'center' }}>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 16 }}>
            Dipercaya 800+ bisnis di Indonesia
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 36, flexWrap: 'wrap', opacity: 0.55 }}>
            {['KOPI KENANGA', 'BATIK SENJA', 'WARTEG GO', 'RUMAH KARYA', 'TANI PINTAR', 'BENGKEL.ID'].map((n) => (
              <div key={n} className="mono" style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.05em', color: 'var(--ink-2)' }}>{n}</div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Jenis Riset ───────────────────────────────────────────── */}
      <section id="kinds" style={{ padding: '60px 48px', background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="badge badge-primary" style={{ fontSize: 11.5 }}>5 jenis riset · 1 platform</div>
            <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', margin: '12px 0 8px' }}>
              Riset apapun yang bisnismu butuhkan
            </h2>
            <p style={{ fontSize: 14.5, color: 'var(--ink-2)', maxWidth: 580, margin: '0 auto' }}>
              Dari mengukur awareness sampai test konsep produk — pilih template, AI yang generate pertanyaan, kamu fokus baca insight.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
            {kinds.map((k) => (
              <div key={k.id} className="card" style={{
                padding: 20, display: 'flex', flexDirection: 'column', gap: 10,
                transition: 'transform 160ms, box-shadow 160ms',
                cursor: 'pointer',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
                onClick={onGoRegister}
              >
                <div style={{
                  width: 48, height: 48, borderRadius: 12, background: k.bg,
                  display: 'grid', placeItems: 'center', fontSize: 26, lineHeight: 1,
                }}>{k.emoji}</div>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 700 }}>{k.name}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 4, lineHeight: 1.45 }}>{k.tagline}</div>
                </div>
                <div style={{ marginTop: 'auto', display: 'flex', gap: 6, paddingTop: 8, borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}>
                  <span className="badge" style={{ fontSize: 10, padding: '2px 7px' }}>⏱ {k.duration}</span>
                  <span className="badge" style={{ fontSize: 10, padding: '2px 7px' }}>📊 {k.level}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Features ──────────────────────────────────────────────── */}
      <section id="features" style={{ padding: '70px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <div className="badge">Fitur Lengkap</div>
            <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', margin: '12px 0 8px' }}>
              Dirancang untuk konteks Indonesia — bukan template Barat.
            </h2>
            <p style={{ fontSize: 14.5, color: 'var(--ink-2)', maxWidth: 560, margin: '0 auto' }}>
              Workspace tim, AI Bahasa Indonesia, distribusi WhatsApp, reward otomatis, dan visualisasi geografis sampai level kecamatan.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {[
              { icon: <I.Sparkle size={20}/>, color: 'oklch(0.52 0.18 265)', bg: 'var(--primary-50)',
                title: 'AI Auto Insight (Bahasa Indonesia)',
                body: 'AI menganalisis respons dan otomatis menemukan peluang, risiko, dan pola — lengkap dengan rekomendasi tindakan dalam Bahasa Indonesia.' },
              { icon: <I.Trend size={20}/>, color: 'oklch(0.42 0.12 155)', bg: 'var(--success-soft)',
                title: 'Brand Growth Tracker',
                body: 'Pantau pertumbuhan awareness bulan ke bulan. Hubungkan setiap kampanye dengan lonjakan brand recall — buktikan ROI marketing dengan data.' },
              { icon: <I.Users size={20}/>, color: 'oklch(0.50 0.15 285)', bg: 'oklch(0.95 0.04 285)',
                title: 'Workspace Tim & Multi-Brand',
                body: 'Akun agency? Kelola banyak brand client dalam satu dashboard. Invite teammate sebagai owner atau member dengan permission terkontrol.' },
              { icon: <I.Map size={20}/>, color: 'oklch(0.55 0.16 25)', bg: 'oklch(0.96 0.04 25)',
                title: 'Peta Sebaran per Kecamatan',
                body: 'Tahu di kota dan kecamatan mana brand-mu paling kuat — atau paling lemah. Heatmap interaktif dengan deteksi GPS otomatis dari responden.' },
              { icon: <I.Send size={20}/>, color: 'oklch(0.50 0.16 145)', bg: 'oklch(0.95 0.05 145)',
                title: 'Distribusi via WhatsApp + QR',
                body: 'Sebar survei lewat WhatsApp & QR — channel paling natural untuk konsumen Indonesia. Auto-reward voucher / e-wallet kirim otomatis setelah submit.' },
              { icon: <I.Gift size={20}/>, color: 'oklch(0.55 0.16 75)', bg: 'oklch(0.96 0.05 75)',
                title: 'Reward Library Siap Pakai',
                body: 'GoPay, OVO, DANA, Voucher Tokopedia, Pulsa, Diskon outlet — 12+ template hadiah Indonesia siap pakai, distribusi otomatis.' },
            ].map((f, i) => (
              <div key={i} className="card" style={{ padding: 22, display: 'flex', gap: 16 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                  background: f.bg, color: f.color,
                  display: 'grid', placeItems: 'center',
                }}>{f.icon}</div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{f.title}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{f.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── How it works ─────────────────────────────────────────── */}
      <section id="how" style={{ padding: '70px 48px', background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <div className="badge">Cara Kerja</div>
            <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', margin: '12px 0 0' }}>
              Riset brand setara konsultan, dengan harga UMKM.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { n: '01', t: 'Pilih Jenis Riset', b: 'Top of Mind, Concept Test, Brand Name, atau lainnya. AI generate kuesioner dalam Bahasa Indonesia dalam 8 detik.' },
              { n: '02', t: 'Sebar via WhatsApp', b: 'Bagikan link kustom ke pelanggan via WhatsApp, IG, atau QR code di outlet. Reward otomatis kirim — completion rate 3× lipat.' },
              { n: '03', t: 'Dapatkan Insight AI', b: 'AI rangkum temuan dalam Bahasa Indonesia, deteksi peluang & risiko, rekomendasikan action plan untuk tim.' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 22, position: 'relative' }}>
                <div className="mono" style={{ fontSize: 13, color: 'var(--primary)', fontWeight: 600, marginBottom: 6 }}>{s.n}</div>
                <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 8 }}>{s.t}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{s.b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing section disembunyikan dulu — belum launching. Tinggal restore
          blok ini + nav link + #pricing href ketika harga sudah final. */}

      {/* ─── Testimonials ─────────────────────────────────────────── */}
      <section style={{ padding: '60px 48px', background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 6px' }}>
              Apa kata mereka yang sudah pakai
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              {
                quote: 'Dulu riset brand butuh konsultan + 30 juta. Sekarang 5 menit setup, hasilnya akurat — kita launching produk baru sambil ngerti customer.',
                name: 'Putri Anjani',
                role: 'Founder, Kopi Kenanga',
                avatar: 'PA',
                bg: 'oklch(0.78 0.10 35)',
              },
              {
                quote: 'AI insight-nya gila — bisa nemu pasar Sukolilo yang awareness-nya rendah tapi NPS tertinggi. Langsung kita prioritasin buat outlet baru.',
                name: 'Rizki Hidayat',
                role: 'Brand Manager, Geprekin Aja',
                avatar: 'RH',
                bg: 'oklch(0.72 0.12 145)',
              },
              {
                quote: 'Sebagai agency, fitur multi-brand workspace ngebantu banget. 1 dashboard, 7 client, semua ke-track rapi.',
                name: 'Maya Sari',
                role: 'Director, Studio Brand X',
                avatar: 'MS',
                bg: 'oklch(0.74 0.10 285)',
              },
            ].map((t, i) => (
              <div key={i} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ fontSize: 14.5, color: 'var(--ink)', lineHeight: 1.55 }}>
                  "{t.quote}"
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 'auto' }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: t.bg, color: 'white',
                    display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 12,
                  }}>{t.avatar}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── FAQ ─────────────────────────────────────────────────── */}
      <section id="faq" style={{ padding: '70px 48px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <div className="badge">FAQ</div>
            <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', margin: '12px 0 0' }}>
              Pertanyaan yang sering ditanyakan
            </h2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              {
                q: 'Apakah benar gratis selama 14 hari?',
                a: 'Ya — gratis penuh, tanpa kartu kredit. Selama masa early access ini semua fitur AI dan jenis riset bisa kamu pakai. Detail harga setelah 14 hari akan kami umumkan menjelang launching resmi.',
              },
              {
                q: 'AI-nya pakai apa? Apakah datanya aman?',
                a: 'Kami pakai LLM kelas dunia (DeepSeek, OpenAI, Gemini) yang bisa kamu pilih sendiri di Super Admin. Semua respons disimpan di server kami di Indonesia, tidak pernah dipakai untuk training model. Data anonim per default.',
              },
              {
                q: 'Bisa dipakai untuk kategori selain F&B?',
                a: 'Bisa. Kami sudah dipakai oleh kategori F&B, Retail Fashion, E-commerce, Telco, Banking/Fintech, Health & Beauty, Edukasi, dan UMKM lokal. AI menyesuaikan pertanyaan dengan kategori bisnismu.',
              },
              {
                q: 'Bagaimana cara menyebar survei ke responden?',
                a: 'Kamu dapat 1 link unik per campaign. Sebar lewat WhatsApp Broadcast, Status, Story IG, atau QR code di outlet. Reward voucher / cashback otomatis terkirim setelah responden submit — tidak perlu kamu kirim manual.',
              },
              {
                q: 'Bisa untuk agency yang handle banyak client?',
                a: 'Bisa, pakai paket Agency. Tiap client = workspace terpisah dengan brand, campaign, dan member sendiri. Switcher di sidebar memudahkan jump antar workspace.',
              },
              {
                q: 'Berapa lama dapat insight setelah respons masuk?',
                a: 'Real-time. Begitu ada respons baru, dashboard update otomatis. AI Auto Insight regenerate setiap kamu klik refresh — tidak ada delay batch processing.',
              },
            ].map((item, i) => (
              <FaqItem key={i} q={item.q} a={item.a} />
            ))}
          </div>
        </div>
      </section>

      {/* ─── Final CTA ────────────────────────────────────────────── */}
      <section style={{ padding: '50px 48px 60px' }}>
        <div style={{
          maxWidth: 1000, margin: '0 auto',
          background: 'linear-gradient(135deg, var(--primary), oklch(0.42 0.20 290))',
          color: 'white', borderRadius: 22, padding: '44px 44px',
          display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 24,
          boxShadow: '0 24px 48px -20px oklch(0.52 0.18 265 / 0.45)',
        }}>
          <div>
            <h3 style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.015em', margin: 0, lineHeight: 1.2 }}>
              Saatnya bisnis Indonesia ngerti brand-nya sendiri.
            </h3>
            <p style={{ fontSize: 14, opacity: 0.9, margin: '8px 0 0' }}>
              14 hari gratis · 200 respons pertama gratis · tanpa kartu kredit · setup 5 menit.
            </p>
          </div>
          <button onClick={onGoRegister} style={{
            background: 'white', color: 'var(--primary)',
            border: 'none', borderRadius: 12, padding: '14px 22px',
            fontSize: 14.5, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>Mulai Sekarang <I.ArrowRight size={15} /></button>
        </div>
      </section>

      {/* ─── Footer ──────────────────────────────────────────────── */}
      <footer style={{ padding: '32px 48px', borderTop: '1px solid var(--line)', background: 'var(--surface)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 22, height: 22, borderRadius: 6, background: 'linear-gradient(135deg, var(--primary), oklch(0.62 0.20 290))', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11 }}>T</div>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Survey TOM</span>
          </div>
          <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>© 2026 PT Survey Top of Mind Indonesia</span>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 16, fontSize: 12.5, color: 'var(--ink-3)' }}>
            <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Privasi</a>
            <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Syarat</a>
            <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Kontak</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

// FAQ accordion item — local helper used only by MarketingLanding.
function FaqItem({ q, a }) {
  const [open, setOpen] = useState_mk(false);
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
      <button
        onClick={() => setOpen((v) => !v)}
        style={{
          width: '100%', textAlign: 'left', cursor: 'pointer',
          padding: '16px 20px', background: 'transparent', border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        }}
      >
        <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{q}</span>
        <I.ChevronDown size={16} style={{
          color: 'var(--ink-3)', flexShrink: 0,
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 180ms',
        }} />
      </button>
      {open && (
        <div style={{ padding: '0 20px 18px', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6 }}>
          {a}
        </div>
      )}
    </div>
  );
}

// ─── Auth (Login / Register) ─────────────────────────────────────────
function AuthScreen({ mode = 'login', onSwitch, onSubmit, error, busy }) {
  const [m, setM] = useState_mk(mode);
  const isLogin = m === 'login';

  return (
    <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr', overflow: 'hidden', background: 'var(--surface)' }}>
      {/* Left: form */}
      <div className="scroll" style={{ overflow: 'auto', display: 'flex', flexDirection: 'column', padding: '40px 56px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 'auto' }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'linear-gradient(135deg, var(--primary), oklch(0.62 0.20 290))',
            display: 'grid', placeItems: 'center', color: 'white', fontWeight: 700, fontSize: 13,
          }}>T</div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Survey TOM</div>
        </div>

        <div style={{ maxWidth: 380, width: '100%', margin: '40px auto' }} key={m} className="fade-in">
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 6px' }}>
            {isLogin ? 'Masuk ke akunmu' : 'Mulai riset brand-mu'}
          </h1>
          <p style={{ fontSize: 13.5, color: 'var(--ink-2)', margin: '0 0 26px' }}>
            {isLogin
              ? 'Lanjutkan riset brand & lihat insight AI terbaru.'
              : 'Platform riset brand untuk bisnis Indonesia. Gratis 14 hari, tanpa kartu kredit.'}
          </p>

          {/* SSO */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', padding: '11px 14px', fontSize: 13.5 }}>
              <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285f4" d="M22 12.1c0-.7-.1-1.4-.2-2H12v3.8h5.6c-.2 1.3-1 2.4-2 3.1v2.6h3.3c2-1.8 3.1-4.5 3.1-7.5z"/><path fill="#34a853" d="M12 22c2.7 0 5-.9 6.7-2.4L15.4 17c-.9.6-2 .9-3.4.9-2.6 0-4.8-1.7-5.6-4.1H3v2.6C4.7 19.7 8.1 22 12 22z"/><path fill="#fbbc05" d="M6.4 13.8c-.2-.6-.3-1.2-.3-1.8s.1-1.2.3-1.8V7.6H3a10 10 0 0 0 0 8.8l3.4-2.6z"/><path fill="#ea4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.9-2.9C16.9 2.9 14.7 2 12 2 8.1 2 4.7 4.3 3 7.6L6.4 10C7.2 7.6 9.4 5.9 12 5.9z"/></svg>
              Lanjutkan dengan Google
            </button>
            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', padding: '11px 14px', fontSize: 13.5 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M16 1c-1.4 0-3 .9-3.9 2.1-.8 1-1.5 2.6-1.3 4.1 1.5.1 3.1-.9 4-2 .8-1 1.5-2.5 1.2-4.2zm4.6 16.8c-1.2 1.7-2.4 3.5-4.3 3.5-1.9 0-2.5-1.1-4.7-1.1s-2.9 1.1-4.6 1.1c-1.9 0-3.3-1.7-4.5-3.4-2.5-3.6-3-7.7-1.3-10.5 1.2-1.9 3.2-3.1 5.1-3.1 1.9 0 3.1 1 4.7 1 1.6 0 2.6-1 4.7-1 1.7 0 3.6.9 4.8 2.5-4.2 2.3-3.5 8.4-.9 11z"/></svg>
              Lanjutkan dengan Apple
            </button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0 18px' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}></div>
            <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>atau dengan email</span>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}></div>
          </div>

          <form onSubmit={(e) => {
            e.preventDefault();
            const fd = new FormData(e.currentTarget);
            onSubmit?.({
              mode: m,
              name: fd.get('name')?.toString() ?? '',
              businessName: fd.get('businessName')?.toString() ?? '',
              industryCategory: fd.get('industryCategory')?.toString() ?? '',
              email: fd.get('email')?.toString() ?? '',
              password: fd.get('password')?.toString() ?? '',
            });
          }} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {!isLogin && (
              <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <div>
                    <label className="label">Nama lengkap</label>
                    <input className="input" name="name" required placeholder="Putri Anjani" />
                  </div>
                  <div>
                    <label className="label">Nama bisnis / workspace</label>
                    <input className="input" name="businessName" placeholder="Kopi Kenanga" />
                  </div>
                </div>
                <div>
                  <label className="label">Kategori industri</label>
                  <select className="select" name="industryCategory" defaultValue="">
                    <option value="" disabled>Pilih kategori…</option>
                    <option>F&B — Coffee Shop</option>
                    <option>F&B — Restoran</option>
                    <option>Retail Fashion</option>
                    <option>E-commerce</option>
                    <option>Telco</option>
                    <option>Banking / Fintech</option>
                    <option>Lainnya</option>
                  </select>
                </div>
              </>
            )}
            <div>
              <label className="label">Email kerja</label>
              <input className="input" type="email" name="email" required placeholder="kamu@brand.com" />
            </div>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <label className="label">Password</label>
                {isLogin && (
                  <a style={{ fontSize: 12, color: 'var(--primary)', fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>
                    Lupa password?
                  </a>
                )}
              </div>
              <input className="input" type="password" name="password" required minLength={isLogin ? 1 : 8} placeholder={isLogin ? '••••••••' : 'Min. 8 karakter'} />
            </div>
            {error && (
              <div style={{ fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', padding: '8px 10px', borderRadius: 8 }}>
                {error}
              </div>
            )}

            {!isLogin && (
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 4 }}>
                <input type="checkbox" defaultChecked style={{ marginTop: 2 }} />
                <span>Saya setuju dengan <a style={{ color: 'var(--primary)', textDecoration: 'none' }}>Syarat Layanan</a> dan <a style={{ color: 'var(--primary)', textDecoration: 'none' }}>Kebijakan Privasi</a>.</span>
              </label>
            )}

            <button type="submit" disabled={busy} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: 12, fontSize: 14, marginTop: 6, opacity: busy ? 0.7 : 1 }}>
              {busy ? 'Memproses…' : (isLogin ? 'Masuk' : 'Buat Akun & Mulai Gratis')}
            </button>
          </form>

          <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-3)', marginTop: 18 }}>
            {isLogin ? 'Belum punya akun?' : 'Sudah punya akun?'}{' '}
            <a onClick={() => { setM(isLogin ? 'register' : 'login'); onSwitch?.(isLogin ? 'register' : 'login'); }}
               style={{ color: 'var(--primary)', fontWeight: 600, cursor: 'pointer', textDecoration: 'none' }}>
              {isLogin ? 'Daftar gratis' : 'Masuk'}
            </a>
          </div>
        </div>

        <div style={{ marginTop: 'auto', fontSize: 11.5, color: 'var(--ink-4)' }}>
          © 2026 Survey TOM · Bahasa Indonesia
        </div>
      </div>

      {/* Right: showcase */}
      <div style={{
        background: 'linear-gradient(155deg, var(--primary), oklch(0.42 0.20 290))',
        position: 'relative', overflow: 'hidden',
        padding: '48px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        color: 'white',
      }}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none' }}>
          <defs>
            <pattern id="dotsAuth" width="22" height="22" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1.2" fill="white" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#dotsAuth)" />
        </svg>

        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 11.5, opacity: 0.85, textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>
            Insight terbaru
          </div>
          <h2 style={{ fontSize: 30, fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.2, margin: '8px 0 0' }}>
            "Sukolilo siap jadi pasar baru — awareness rendah, NPS tertinggi."
          </h2>
          <div style={{ fontSize: 12.5, opacity: 0.8, marginTop: 8 }}>
            — Insight AI untuk Kopi Kenanga, dideteksi otomatis dari 1,284 respons
          </div>
        </div>

        <div style={{ position: 'relative', marginTop: 32 }}>
          <div style={{
            background: 'rgba(255,255,255,0.95)', color: 'var(--ink)',
            borderRadius: 16, padding: 18,
            boxShadow: '0 24px 48px -16px rgba(0,0,0,0.35)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>Tren Top of Mind</div>
              <span style={{ fontSize: 10.5, padding: '2px 6px', borderRadius: 5, background: 'var(--success-soft)', color: 'oklch(0.42 0.12 155)', fontWeight: 600 }}>↑ 6.8</span>
            </div>
            <svg viewBox="0 0 320 90" style={{ width: '100%', display: 'block' }}>
              <defs>
                <linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="oklch(0.52 0.18 265)" stopOpacity="0.25" />
                  <stop offset="100%" stopColor="oklch(0.52 0.18 265)" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d="M0 70 L 50 65 L 100 58 L 160 48 L 220 36 L 280 22 L 320 12 L 320 90 L 0 90 Z" fill="url(#ag)" />
              <path d="M0 70 L 50 65 L 100 58 L 160 48 L 220 36 L 280 22 L 320 12" fill="none" stroke="oklch(0.52 0.18 265)" strokeWidth="2" />
              <path d="M0 50 L 50 52 L 100 55 L 160 53 L 220 56 L 280 60 L 320 65" fill="none" stroke="oklch(0.68 0.16 25)" strokeWidth="1.4" strokeDasharray="3 3" />
            </svg>
            <div style={{ display: 'flex', gap: 12, fontSize: 11, marginTop: 6, color: 'var(--ink-3)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 2.5, background: 'var(--primary)' }}></span>Brand kamu</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 2.5, background: 'oklch(0.68 0.16 25)' }}></span>Kompetitor</span>
            </div>
          </div>

          <div style={{
            position: 'absolute', top: -24, right: -16,
            background: 'white', color: 'var(--ink)',
            borderRadius: 12, padding: '10px 12px', fontSize: 12,
            boxShadow: '0 12px 24px -10px rgba(0,0,0,0.3)',
            display: 'flex', alignItems: 'center', gap: 8,
            transform: 'rotate(3deg)',
          }}>
            <div style={{ width: 26, height: 26, borderRadius: 8, background: 'var(--primary-50)', color: 'var(--primary)', display: 'grid', placeItems: 'center' }}>
              <I.Sparkle size={13} />
            </div>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 600 }}>+184 respons baru</div>
              <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>dari Sukolilo</div>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, fontSize: 12.5, opacity: 0.9 }}>
          <div style={{ display: 'flex' }}>
            {['PA', 'RH', 'MS'].map((a, i) => (
              <div key={a} style={{
                width: 28, height: 28, borderRadius: '50%',
                background: ['oklch(0.78 0.10 35)', 'oklch(0.72 0.12 145)', 'oklch(0.74 0.10 285)'][i],
                color: 'white', fontWeight: 600, fontSize: 11,
                display: 'grid', placeItems: 'center',
                border: '2px solid oklch(0.42 0.20 285)',
                marginLeft: i === 0 ? 0 : -8,
              }}>{a}</div>
            ))}
          </div>
          <span>Bergabung bersama 800+ bisnis Indonesia yang sudah riset brand-nya sendiri.</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MarketingLanding, AuthScreen });