// Catatu — Home page v2 (playful, phone parade, organic)

function HomePageV2({ goto }) {
  const c = window.CT2;
  const S = window.SCREENS;

  return (
    <div>
      {/* ═══ HERO ═══ */}
      <section style={{ position: 'relative', padding: '50px 64px 80px', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.peach, size: 280, top: '5%', right: '-5%', opacity: 0.5 },
          { kind: 'b', color: c.mint, size: 180, top: '40%', left: '-3%', opacity: 0.5 },
          { kind: 'c', color: c.butter, size: 140, top: '70%', left: '40%', opacity: 0.4 },
          { kind: 'd', color: c.lilac, size: 100, top: '15%', left: '35%', opacity: 0.5 },
        ]} />

        <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <StickyNote rotate={-3} style={{ display: 'inline-block', marginBottom: 24 }}>
              Sat-set, dua detik selesai ✏️
            </StickyNote>
            <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 92, lineHeight: 0.98, letterSpacing: -3.5, margin: 0, color: c.ink }}>
              Yuk catat<br />
              <em style={{ fontStyle: 'italic', color: c.terra }}>duitmu.</em>
            </h1>
            <Scribble width={280} color={c.terra} style={{ marginTop: 8 }} />
            <p style={{ fontFamily: 'DM Sans', fontSize: 18, lineHeight: 1.6, color: c.ink2, maxWidth: 440, marginTop: 22 }}>
              Pencatat keuangan harian yang ngerti kebiasaan kamu. Ketik nama warung, Catatu nebak kategorinya. <em style={{ color: c.terraDeep, fontStyle: 'normal', fontWeight: 600 }}>Kelar.</em>
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button onClick={() => goto('download')} style={{ height: 54, padding: '0 26px', borderRadius: 14, background: c.ink, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>Mulai gratis</button>
              <button onClick={() => goto('features')} style={{ height: 54, padding: '0 22px', borderRadius: 14, background: 'transparent', color: c.ink, border: `1.5px solid ${c.ink}`, fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>Lihat fitur →</button>
            </div>

            {/* category strip */}
            <div style={{ marginTop: 40, paddingTop: 24, borderTop: `1px dashed ${c.ink3}` }}>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: c.ink3, letterSpacing: 1.4, marginBottom: 12 }}>CATAT APAPUN — APP NEBAK SENDIRI</div>
              <div style={{ display: 'flex', gap: 14 }}>
                {window.CATEGORIES.slice(0, 7).map((cat, i) => (
                  <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                    <CatIcon emoji={cat.emoji} color={cat.color} size={44} />
                    <div style={{ fontFamily: 'DM Sans', fontSize: 10, color: c.ink2, fontWeight: 500 }}>{cat.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* phone parade */}
          <div style={{ position: 'relative', height: 580 }}>
            <div style={{ position: 'absolute', top: 60, left: 0, zIndex: 1 }}>
              <PhoneBezel width={200} tilt={-5}>
                <S.Add />
              </PhoneBezel>
            </div>
            <div style={{ position: 'absolute', top: 0, left: 180, zIndex: 3 }}>
              <PhoneBezel width={220} tilt={2}>
                <S.Dashboard />
              </PhoneBezel>
            </div>
            <div style={{ position: 'absolute', top: 80, right: 0, zIndex: 2 }}>
              <PhoneBezel width={200} tilt={6}>
                <S.AmplopRecap />
              </PhoneBezel>
            </div>
            <StickyNote rotate={4} color={c.cream2} style={{ position: 'absolute', top: -10, right: 20, zIndex: 5 }}>
              Hemat 238rb bulan ini! 🎉
            </StickyNote>
            <div style={{ position: 'absolute', bottom: 20, left: 60, zIndex: 5 }}>
              <Pin color={c.terra} size={20} />
            </div>
          </div>
        </div>
      </section>

      {/* ═══ ① FIRST RUN ═══ */}
      <section style={{ background: c.paper, padding: '90px 64px', position: 'relative', borderTop: `1px solid ${c.line}`, borderBottom: `1px solid ${c.line}` }}>
        <BlobField blobs={[
          { kind: 'b', color: c.blush, size: 200, top: '10%', right: '5%', opacity: 0.5 },
          { kind: 'c', color: c.mint, size: 160, bottom: '-10%', left: '10%', opacity: 0.5 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 8 }}>
            <SectionNum n={1} />
            <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.4, color: c.ink2, textTransform: 'uppercase' }}>FIRST RUN</div>
            <Tape width={60} color={c.tape} rotate={-3} />
          </div>
          <h2 style={{ fontFamily: 'Fraunces', fontSize: 48, fontWeight: 500, letterSpacing: -1.5, margin: '8px 0 0', color: c.ink, lineHeight: 1.05, maxWidth: 720 }}>
            Onboarding yang nggak <em style={{ fontStyle: 'italic', color: c.terra }}>bikin pusing.</em>
          </h2>
          <p style={{ fontFamily: 'DM Sans', fontSize: 16, color: c.ink2, marginTop: 14, maxWidth: 580, lineHeight: 1.55 }}>
            Lima layar, satu menit. Pilih kategori, atur amplop, selesai. Semua bisa diubah nanti.
          </p>

          <div style={{ marginTop: 40, display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap' }}>
            {[
              { Comp: S.Login, label: 'Login' },
              { Comp: S.Categories, label: 'Step 1 · Kategori' },
              { Comp: S.Amplop, label: 'Step 2 · Atur amplop' },
              { Comp: S.Sendiri, label: 'Step 3 · Solo / keluarga' },
            ].map((sc, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                <PhoneBezel width={170}>
                  <sc.Comp />
                </PhoneBezel>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: c.ink2, letterSpacing: 0.8, textTransform: 'uppercase' }}>{sc.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ ② DAILY USE ═══ */}
      <section style={{ padding: '90px 64px', position: 'relative', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.peach, size: 240, top: '20%', left: '-5%', opacity: 0.4 },
          { kind: 'd', color: c.lilac, size: 180, bottom: '10%', right: '0%', opacity: 0.5 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 8 }}>
            <SectionNum n={2} color={c.olive} />
            <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.4, color: c.ink2, textTransform: 'uppercase' }}>CORE APP — DAILY USE</div>
            <Tape width={60} color={c.mint} rotate={2} />
          </div>
          <h2 style={{ fontFamily: 'Fraunces', fontSize: 48, fontWeight: 500, letterSpacing: -1.5, margin: '8px 0 0', color: c.ink, lineHeight: 1.05, maxWidth: 720 }}>
            Dashboard yang <em style={{ fontStyle: 'italic', color: c.olive }}>gampang dibaca.</em>
          </h2>
          <p style={{ fontFamily: 'DM Sans', fontSize: 16, color: c.ink2, marginTop: 14, maxWidth: 580, lineHeight: 1.55 }}>
            Quick add, transactions, statistik, budget. Empat layar yang kamu pakai tiap hari.
          </p>

          <div style={{ marginTop: 40, display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap' }}>
            {[
              { Comp: S.Dashboard, label: 'Dashboard' },
              { Comp: S.Add, label: 'Quick add' },
              { Comp: S.Transactions, label: 'Transactions' },
              { Comp: S.Statistik, label: 'Statistik' },
              { Comp: S.AmplopRecap, label: 'Amplop' },
            ].map((sc, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
                <PhoneBezel width={150}>
                  <sc.Comp />
                </PhoneBezel>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: c.ink2, letterSpacing: 0.8, textTransform: 'uppercase' }}>{sc.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══ TESTIMONIAL ═══ */}
      <section style={{ background: c.lilac, padding: '90px 64px', position: 'relative', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.lavender, size: 200, top: '-10%', right: '10%', opacity: 0.6 },
          { kind: 'c', color: c.blush, size: 160, bottom: '-10%', left: '5%', opacity: 0.6 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: 'Fraunces', fontSize: 42, fontStyle: 'italic', lineHeight: 1.3, color: c.ink, fontWeight: 400 }}>
            "Saya nggak suka rumus Excel, tapi suka nulis di buku tulis. Catatu rasanya kayak <span style={{ background: c.butter, padding: '2px 8px' }}>buku tulis yang ngitung sendiri.</span>"
          </div>
          <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12 }}>
            <CatIcon emoji="👩‍🏫" color={c.terra} size={48} />
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500, color: c.ink }}>Rina, 31</div>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: c.ink2, letterSpacing: 0.8 }}>GURU SD · BANDUNG</div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══ CTA ═══ */}
      <section style={{ padding: '80px 64px 100px', position: 'relative' }}>
        <div style={{
          maxWidth: 1180, margin: '0 auto', borderRadius: 28,
          background: c.warmDark, color: c.cream, padding: '60px 56px',
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', alignItems: 'center', gap: 48,
          position: 'relative', overflow: 'hidden',
        }}>
          <BlobField blobs={[
            { kind: 'a', color: '#e07a4f', size: 280, top: '-30%', right: '-10%', opacity: 0.3 },
            { kind: 'b', color: c.butter, size: 180, bottom: '-30%', left: '-5%', opacity: 0.2 },
          ]} />
          <div style={{ position: 'relative' }}>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 52, fontWeight: 500, letterSpacing: -1.6, margin: 0, lineHeight: 1.05 }}>
              Mulai catat hari ini.<br />
              <em style={{ color: '#e07a4f', fontStyle: 'italic' }}>Tenang bulan depan.</em>
            </h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 16, color: 'rgba(247,241,227,0.7)', marginTop: 14, maxWidth: 520, lineHeight: 1.55 }}>
              Gratis selamanya. Tanpa iklan, tanpa pop-up, tanpa data dijual.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 26 }}>
              <button onClick={() => goto('download')} style={{ height: 52, padding: '0 26px', borderRadius: 12, background: c.cream, color: c.ink, border: 'none', fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>Unduh aplikasi</button>
              <button onClick={() => goto('story')} style={{ height: 52, padding: '0 22px', borderRadius: 12, background: 'transparent', color: c.cream, border: `1.5px solid rgba(247,241,227,0.3)`, fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>Baca cerita</button>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <BukuSaku size={180} ink={c.cream} paper="#15110f" back="#e07a4f" middle="#3a2f28" accent="#e07a4f" />
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomePageV2 = HomePageV2;