// Catatu — Story / Pricing / Help / Download v2 (playful)

function StoryPageV2({ goto }) {
  const c = window.CT2;
  return (
    <div>
      <section style={{ position: 'relative', padding: '70px 64px 40px', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.peach, size: 200, top: '10%', right: '10%', opacity: 0.5 },
          { kind: 'b', color: c.mint, size: 140, bottom: '0%', left: '15%', opacity: 0.5 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto' }}>
          <StickyNote rotate={-2} style={{ display: 'inline-block', marginBottom: 16 }}>
            Cerita Catatu — dari Bandung 📍
          </StickyNote>
          <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 64, lineHeight: 1.05, letterSpacing: -2, margin: '12px 0 0', color: c.ink }}>
            Mulai dari sebuah <em style={{ color: c.terra, fontStyle: 'italic' }}>buku tulis kecil.</em>
          </h1>
        </div>
      </section>

      <section style={{ padding: '40px 64px 60px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 56, alignItems: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{ position: 'absolute', top: -20, left: -20 }}><SiteBlob kind="c" color={c.butter} size={220} opacity={0.5} /></div>
            <div style={{ position: 'relative' }}><BukuSaku size={200} /></div>
          </div>
          <div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 28, fontStyle: 'italic', fontWeight: 400, lineHeight: 1.4, color: c.ink }}>
              Nenek saya punya buku saku — berisi catatan belanja, ditulis pensil, kolomnya rapi. Tiap akhir bulan, dia tau persis ke mana uang pergi. <span style={{ background: c.butter, padding: '2px 8px', fontStyle: 'normal' }}>Tanpa rumus, tanpa app.</span>
            </div>
            <div style={{ fontFamily: 'Geist Mono', fontSize: 11, color: c.ink2, letterSpacing: 1, textTransform: 'uppercase', marginTop: 16 }}>
              — RAKA, PENDIRI CATATU
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 64px 60px', maxWidth: 720, margin: '0 auto' }}>
        {[
          { h: 'Masalahnya', col: c.peach, p: 'Kami coba banyak app. Semuanya minta hubungkan rekening, kategorisasi 47 jenis, baca pie chart. Setelah 2 minggu — lupa.' },
          { h: 'Yang kami sadari', col: c.mint, p: 'Pencatatan yang berhasil itu sederhana — yang kalah cuma niat. Buku saku nenek bekerja karena: (1) cuma pensil, (2) cuma 4 kolom, (3) ritual pelan tiap malam.' },
          { h: 'Catatu adalah', col: c.lilac, p: 'Buku saku itu — tapi yang ngitung sendiri, hafal warung favoritmu, dan kasih ringkasan jujur tiap bulan. Bukan financial advisor. Bukan accounting software. Hanya buku saku yang baik.' },
          { h: 'Yang kami tolak', col: c.salmon, p: 'Iklan. Notifikasi panik. Pop-up upgrade. Menjual data. Gamifikasi yang ubah keuangan jadi game. Istilah Inggris yang nggak perlu.' },
          { h: 'Yang kami pegang', col: c.butter, p: 'Bahasa lokal yang hangat. Privasi sebagai standar. Gratis selamanya untuk yang dasar. Open ekspor — datamu pulang ke kamu kapan saja.' },
        ].map((s, i) => (
          <div key={i} style={{ marginBottom: 18, background: s.col, borderRadius: 18, padding: '24px 28px' }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 24, fontWeight: 500, letterSpacing: -0.5, color: c.ink, margin: '0 0 10px' }}>{s.h}</h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 16, lineHeight: 1.65, color: c.ink, margin: 0, opacity: 0.85 }}>{s.p}</p>
          </div>
        ))}
      </section>

      <section style={{ padding: '40px 64px 80px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: c.ink3, textAlign: 'center' }}>
          TIM CATATU · 4 ORANG · BANDUNG
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 24 }}>
          {[
            { n: 'Raka P.', r: 'Pendiri & desain', e: '👨‍🎨', col: c.peach },
            { n: 'Tania W.', r: 'Engineering', e: '👩‍💻', col: c.mint },
            { n: 'Bayu A.', r: 'Engineering', e: '👨‍💻', col: c.butter },
            { n: 'Sari N.', r: 'Komunikasi', e: '👩‍🎤', col: c.lilac },
          ].map((p, i) => (
            <div key={i} style={{ background: c.paper, borderRadius: 16, padding: 22, border: `1px solid ${c.line}`, textAlign: 'center' }}>
              <CatIcon emoji={p.e} color={p.col} size={64} />
              <div style={{ fontFamily: 'Fraunces', fontSize: 18, fontWeight: 500, color: c.ink, marginTop: 12 }}>{p.n}</div>
              <div style={{ fontFamily: 'DM Sans', fontSize: 12, color: c.ink2, marginTop: 4 }}>{p.r}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function PricingPageV2({ goto }) {
  const c = window.CT2;
  const [billing, setBilling] = React.useState('monthly');

  const plans = [
    { name: 'Saku', tag: 'Buat yang baru mulai', priceM: 0, priceY: 0, cta: 'Mulai gratis', bg: c.mint, accent: c.olive,
      feats: ['Catatan tak terbatas', '6 kategori amplop', 'Statistik bulanan', 'Ekspor CSV'] },
    { name: 'Pro', tag: 'Buat yang serius ngatur', priceM: 25000, priceY: 240000, cta: '14 hari gratis', bg: c.warmDark, accent: c.terra, fg: c.cream, featured: true,
      feats: ['Semua di Saku', 'Foto struk otomatis', 'Sinkron lintas HP', 'Insight detail', 'Ruang keluarga (4)'] },
    { name: 'Keluarga', tag: 'Buat rumah tangga & komunitas', priceM: 55000, priceY: 528000, cta: 'Bicara dulu', bg: c.peach, accent: c.terraDeep,
      feats: ['Semua di Pro', '8 anggota keluarga', 'Tujuan tabungan bersama', 'Riwayat 5 tahun', 'Prioritas dukungan'] },
  ];

  return (
    <div>
      <section style={{ position: 'relative', padding: '70px 64px 24px', textAlign: 'center', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.lilac, size: 200, top: '20%', left: '8%', opacity: 0.5 },
          { kind: 'c', color: c.butter, size: 160, top: '10%', right: '10%', opacity: 0.5 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}>
          <StickyNote rotate={-2} style={{ display: 'inline-block', marginBottom: 16 }}>
            Bisa batal kapan saja 👍
          </StickyNote>
          <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 64, lineHeight: 1.05, letterSpacing: -2, margin: '12px 0 0', color: c.ink }}>
            Pilih ukuran <em style={{ color: c.terra, fontStyle: 'italic' }}>buku sakumu.</em>
          </h1>
          <div style={{ display: 'inline-flex', marginTop: 26, padding: 4, borderRadius: 12, background: c.paper, border: `1px solid ${c.line}` }}>
            {[{ k: 'monthly', l: 'Bulanan' }, { k: 'yearly', l: 'Tahunan · hemat 20%' }].map(opt => {
              const on = billing === opt.k;
              return (
                <button key={opt.k} onClick={() => setBilling(opt.k)} style={{
                  padding: '10px 18px', borderRadius: 8,
                  background: on ? c.ink : 'transparent', color: on ? c.cream : c.ink2,
                  border: 'none', fontFamily: 'DM Sans', fontSize: 13, fontWeight: 500, cursor: 'pointer',
                }}>{opt.l}</button>
              );
            })}
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 64px 80px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, maxWidth: 1240, margin: '0 auto' }}>
        {plans.map(plan => {
          const featured = plan.featured;
          const fg = plan.fg || c.ink;
          const fg2 = featured ? 'rgba(247,241,227,0.7)' : c.ink2;
          const price = billing === 'monthly' ? plan.priceM : Math.round(plan.priceY / 12);
          const subPrice = billing === 'yearly' && plan.priceY > 0 ? `Rp ${plan.priceY.toLocaleString('id-ID')} / tahun` : null;

          return (
            <div key={plan.name} style={{
              background: plan.bg, color: fg, borderRadius: 24, padding: '32px 28px',
              position: 'relative', display: 'flex', flexDirection: 'column',
              transform: featured ? 'translateY(-8px)' : 'none',
              boxShadow: featured ? '0 30px 60px rgba(40,30,20,0.18)' : '0 8px 20px rgba(40,30,20,0.06)',
              overflow: featured ? 'visible' : 'hidden',
            }}>
              {featured && (
                <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: c.terra, color: c.cream, padding: '4px 14px', borderRadius: 999, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase' }}>
                  Paling populer ⭐
                </div>
              )}
              {!featured && (
                <BlobField blobs={[{ kind: 'a', color: 'rgba(255,255,255,0.4)', size: 140, top: '-30%', right: '-20%' }]} />
              )}
              <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 28, fontWeight: 500, letterSpacing: -0.5 }}>{plan.name}</div>
                  <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: fg2, marginTop: 4 }}>{plan.tag}</div>
                </div>
                <BukuSaku size={48} ink={fg} paper={featured ? '#15110f' : c.paper} back={plan.accent} middle={featured ? '#3a2f28' : c.cream2} accent={plan.accent} />
              </div>

              <div style={{ position: 'relative', marginTop: 24, paddingBottom: 22 }}>
                {price === 0 ? (
                  <div style={{ fontFamily: 'Fraunces', fontSize: 56, fontWeight: 500, letterSpacing: -2, lineHeight: 1 }}>Gratis</div>
                ) : (
                  <>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                      <span style={{ fontFamily: 'DM Sans', fontSize: 16, color: fg2 }}>Rp</span>
                      <span style={{ fontFamily: 'Fraunces', fontSize: 56, fontWeight: 500, letterSpacing: -2, lineHeight: 1 }}>{price.toLocaleString('id-ID')}</span>
                      <span style={{ fontFamily: 'DM Sans', fontSize: 14, color: fg2 }}>/bulan</span>
                    </div>
                    {subPrice && <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: fg2, marginTop: 6 }}>{subPrice}</div>}
                  </>
                )}
              </div>

              <button onClick={() => goto('download')} style={{
                position: 'relative', height: 50, borderRadius: 12,
                background: featured ? c.terra : c.ink, color: c.cream, border: 'none',
                fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500, cursor: 'pointer',
              }}>{plan.cta}</button>

              <div style={{ position: 'relative', marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {plan.feats.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'DM Sans', fontSize: 13, color: fg }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={featured ? c.terra : plan.accent} strokeWidth="3" strokeLinecap="round"><path d="M20 6L9 17l-5-5" /></svg>
                    {f}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </section>
    </div>
  );
}

function HelpPageV2({ goto }) {
  const c = window.CT2;
  const [active, setActive] = React.useState(0);
  const sections = [
    { cat: 'Memulai', col: c.peach, items: [
      { q: 'Apa benar gratis selamanya?', a: 'Iya. Paket Saku tanpa trial — gratis terus, tanpa iklan, tanpa minta upgrade tiap minggu.' },
      { q: 'Bagaimana cara mulai?', a: 'Unduh dari App Store/Play Store. Buat akun pakai email atau Google. Catatan pertama bisa dimulai dalam 30 detik.' },
      { q: 'Datanya disimpan di mana?', a: 'Server di Jakarta. Catatan terenkripsi end-to-end — bahkan tim Catatu nggak bisa baca isinya.' },
    ]},
    { cat: 'Pembayaran', col: c.mint, items: [
      { q: 'Bisa bayar pakai apa?', a: 'GoPay, OVO, DANA, ShopeePay, transfer bank, atau kartu kredit. Pro tahunan bisa pakai QRIS dengan invoice.' },
      { q: 'Kalau batalkan Pro, data hilang?', a: 'Aman. Data tetap di akun kamu, hanya foto-struk dan sinkronisasi yang non-aktif. Naik ulang kapan saja.' },
      { q: 'Refund?', a: 'Iya, dalam 14 hari pertama. Email halo@catatu.app, refund 3 hari kerja.' },
    ]},
    { cat: 'Privasi', col: c.lilac, items: [
      { q: 'Data dijual ke pihak ketiga?', a: 'Tidak. Tidak pernah, tidak akan. Bisnis kami dari langganan Pro, bukan jual data.' },
      { q: 'Bisa ekspor data?', a: 'Bisa kapan saja. Settings → Ekspor → CSV/PDF, kirim ke email. Datamu, datamu.' },
      { q: 'Kalau Catatu tutup?', a: 'Notifikasi 6 bulan sebelumnya. Ekspor lengkap disediakan. Encryption key tetap di kamu.' },
    ]},
    { cat: 'Fitur', col: c.butter, items: [
      { q: 'Bisa hubungkan rekening bank?', a: 'Belum. Sengaja — minta izin yang luas. Manual lebih privasi-friendly.' },
      { q: 'Untuk usaha kecil?', a: 'Untuk pencatatan harian usaha mikro, ya. Produk khusus: Catatu untuk Tim — kontak halo@catatu.app.' },
      { q: 'Bahasa selain Indonesia?', a: 'Sekarang: Indonesia & Inggris. Sunda & Jawa coming soon.' },
    ]},
  ];

  return (
    <div>
      <section style={{ position: 'relative', padding: '70px 64px 30px', textAlign: 'center', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.peach, size: 180, top: '20%', left: '12%', opacity: 0.5 },
          { kind: 'b', color: c.mint, size: 160, top: '10%', right: '15%', opacity: 0.5 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}>
          <StickyNote rotate={-2} style={{ display: 'inline-block', marginBottom: 14 }}>
            Bantuan & FAQ 💬
          </StickyNote>
          <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: -1.8, margin: '10px 0 0', color: c.ink }}>
            Kalau ragu, <em style={{ color: c.terra, fontStyle: 'italic' }}>tanya saja.</em>
          </h1>
          <p style={{ fontFamily: 'DM Sans', fontSize: 16, color: c.ink2, marginTop: 14 }}>
            Email <a href="mailto:halo@catatu.app" style={{ color: c.terraDeep, fontWeight: 500 }}>halo@catatu.app</a> — biasanya balas 1 hari.
          </p>
        </div>
      </section>

      <section style={{ padding: '24px 64px 80px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', gap: 10, marginBottom: 24, flexWrap: 'wrap' }}>
          {sections.map((s, i) => {
            const on = active === i;
            return (
              <button key={i} onClick={() => setActive(i)} style={{
                padding: '10px 18px', borderRadius: 999,
                background: on ? c.ink : s.col, color: on ? c.cream : c.ink,
                border: 'none', cursor: 'pointer',
                fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500,
              }}>{s.cat}</button>
            );
          })}
        </div>
        {sections[active].items.map((f, i) => (
          <FaqItem2 key={`${active}-${i}`} q={f.q} a={f.a} c={c} />
        ))}
      </section>
    </div>
  );
}

function FaqItem2({ q, a, c }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: `1px dashed ${c.ink3}` }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', padding: '20px 0', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        fontFamily: 'Fraunces', fontSize: 20, fontWeight: 500, color: c.ink, letterSpacing: -0.3,
      }}>
        <span>{q}</span>
        <span style={{ fontFamily: 'DM Sans', fontSize: 22, color: c.terra, transition: 'transform 0.2s', transform: open ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
      </button>
      {open && <div style={{ paddingBottom: 20, fontFamily: 'DM Sans', fontSize: 15, lineHeight: 1.65, color: c.ink2, maxWidth: 660 }}>{a}</div>}
    </div>
  );
}

function DownloadPageV2({ goto }) {
  const c = window.CT2;
  return (
    <div style={{ background: c.warmDark, color: c.cream, minHeight: '70vh' }}>
      <section style={{ padding: '90px 64px 110px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: '#e07a4f', size: 400, top: '20%', left: '50%', opacity: 0.2 },
          { kind: 'c', color: c.butter, size: 200, top: '10%', left: '10%', opacity: 0.15 },
          { kind: 'b', color: c.lilac, size: 220, bottom: '10%', right: '8%', opacity: 0.15 },
        ]} />
        <div style={{ position: 'relative' }}>
          <StickyNote rotate={-3} color={c.cream2} style={{ display: 'inline-block', marginBottom: 24 }}>
            Tanpa kartu kredit · gratis selamanya 🎉
          </StickyNote>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12, filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.4))' }}>
            <BukuSaku size={180} ink={c.cream} paper="#15110f" back="#e07a4f" middle="#3a2f28" accent="#e07a4f" />
          </div>
          <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 80, lineHeight: 1, letterSpacing: -3, margin: '32px 0 0' }}>
            Mulai catat<br />
            <em style={{ fontStyle: 'italic', color: '#e07a4f' }}>hari ini.</em>
          </h1>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            {[
              { l: 'App Store', sub: 'iOS 16.0+', e: '🍎' },
              { l: 'Play Store', sub: 'Android 9.0+', e: '🤖' },
              { l: 'Web (beta)', sub: 'Chrome / Safari', e: '🌐' },
            ].map((s, i) => (
              <button key={i} style={{
                padding: '14px 24px', borderRadius: 14, background: c.cream, color: c.warmDark, border: 'none',
                cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'DM Sans', textAlign: 'left',
              }}>
                <span style={{ fontSize: 28 }}>{s.e}</span>
                <div>
                  <div style={{ fontSize: 10, fontFamily: 'Geist Mono', color: c.ink3, letterSpacing: 0.8, textTransform: 'uppercase' }}>UNDUH DI</div>
                  <div style={{ fontSize: 16, fontWeight: 600 }}>{s.l}</div>
                  <div style={{ fontSize: 10, fontFamily: 'Geist Mono', color: c.ink3, marginTop: 1 }}>{s.sub}</div>
                </div>
              </button>
            ))}
          </div>
          <div style={{ marginTop: 48, fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 1.4, color: 'rgba(247,241,227,0.4)' }}>
            VERSI 2.4.1 · 14 MB · DATA PRIBADI TIDAK DIKIRIM
          </div>
        </div>
      </section>
    </div>
  );
}

window.StoryPageV2 = StoryPageV2;
window.PricingPageV2 = PricingPageV2;
window.HelpPageV2 = HelpPageV2;
window.DownloadPageV2 = DownloadPageV2;