// Catatu — Features v2 (playful, dense, sticker energy)

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

  return (
    <div>
      {/* HERO */}
      <section style={{ position: 'relative', padding: '70px 64px 50px', textAlign: 'center', overflow: 'hidden' }}>
        <BlobField blobs={[
          { kind: 'a', color: c.peach, size: 200, top: '20%', left: '8%', opacity: 0.5 },
          { kind: 'c', color: c.mint, size: 160, top: '10%', right: '10%', opacity: 0.5 },
          { kind: 'b', color: c.butter, size: 140, bottom: '10%', right: '20%', opacity: 0.4 },
        ]} />
        <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto' }}>
          <StickyNote rotate={-2} style={{ display: 'inline-block', marginBottom: 18 }}>
            Sederhana di luar, cerdas di dalam ✨
          </StickyNote>
          <h1 style={{ fontFamily: 'Fraunces', fontWeight: 500, fontSize: 84, lineHeight: 1, letterSpacing: -3, margin: '6px 0 0', color: c.ink }}>
            Fitur-fitur<br />
            <em style={{ color: c.terra, fontStyle: 'italic' }}>kesayangan kamu.</em>
          </h1>
        </div>
      </section>

      {/* FEATURE GRID */}
      <section style={{ padding: '40px 64px 80px', maxWidth: 1240, margin: '0 auto' }}>
        {/* Row 1: Quick add + Foto struk */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, marginBottom: 24 }}>
          {/* Quick add — featured */}
          <div style={{ background: c.peach, borderRadius: 24, padding: 36, position: 'relative', overflow: 'hidden', minHeight: 360 }}>
            <BlobField blobs={[{ kind: 'a', color: c.cream2, size: 200, top: '-20%', right: '-10%', opacity: 0.5 }]} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.ink, color: c.cream, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>INTI · 01</div>
              <h3 style={{ fontFamily: 'Fraunces', fontSize: 38, fontWeight: 500, letterSpacing: -1.2, margin: '12px 0 0', color: c.ink, lineHeight: 1.05 }}>Catat dalam <em style={{ fontStyle: 'italic' }}>dua detik.</em></h3>
              <p style={{ fontFamily: 'DM Sans', fontSize: 14, color: c.ink2, lineHeight: 1.6, marginTop: 12, maxWidth: 320 }}>
                Ketik "mie ayam 25rb". App nebak kategori sendiri. Salah? Geser sekali, dia inget seterusnya.
              </p>
              <div style={{ marginTop: 20, position: 'absolute', bottom: -260, right: 20 }}>
                <PhoneBezel width={170} tilt={3}>
                  <S.Add />
                </PhoneBezel>
              </div>
            </div>
          </div>

          {/* Foto struk */}
          <div style={{ background: c.lilac, borderRadius: 24, padding: 32, position: 'relative', overflow: 'hidden', minHeight: 360 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.ink, color: c.cream, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>BARU · 02</div>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 30, fontWeight: 500, letterSpacing: -1, margin: '12px 0 0', color: c.ink, lineHeight: 1.05 }}>Foto struk, <em style={{ fontStyle: 'italic' }}>otomatis.</em></h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 13, color: c.ink2, lineHeight: 1.55, marginTop: 10 }}>
              Jepret struk, Catatu baca tanggal, total, item.
            </p>
            {/* fake receipt */}
            <div style={{ marginTop: 16, background: '#fdfaf0', padding: '12px 14px', borderRadius: 4, fontFamily: 'Geist Mono', fontSize: 9, lineHeight: 1.7, color: c.ink, transform: 'rotate(-3deg)', boxShadow: '0 6px 16px rgba(40,30,20,0.12)', maxWidth: 200 }}>
              <div style={{ textAlign: 'center', fontWeight: 700, marginBottom: 4 }}>INDOMARET</div>
              <div style={{ borderTop: `1px dashed ${c.ink3}`, paddingTop: 4 }}>
                INDOMIE GORENG  3.500<br />
                SUSU UHT 1L  18.900<br />
                ROTI TAWAR  13.500<br />
                TELOR 1KG  28.000<br />
              </div>
              <div style={{ borderTop: `1px dashed ${c.ink3}`, paddingTop: 4, marginTop: 4, fontWeight: 700 }}>TOTAL  72.300</div>
            </div>
            <div style={{ position: 'absolute', bottom: 24, right: 24, padding: '6px 12px', borderRadius: 999, background: c.terra, color: c.cream, fontFamily: 'DM Sans', fontSize: 12, fontWeight: 600 }}>
              ✓ Tercatat
            </div>
          </div>
        </div>

        {/* Row 2: 3 amplop, family, insight */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 24 }}>
          {/* Amplop */}
          <div style={{ background: c.mint, borderRadius: 24, padding: 28, minHeight: 320 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.ink, color: c.cream, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>AMPLOP · 03</div>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 26, fontWeight: 500, letterSpacing: -0.8, margin: '12px 0 0', color: c.ink, lineHeight: 1.1 }}>Amplop digital.</h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 13, color: c.ink2, lineHeight: 1.55, marginTop: 10 }}>
              Bagi uang ke amplop. Habis amplop, notif pelan — bukan alarm panik.
            </p>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { e: '🍜', l: 'Makan', col: c.peach, p: 0.7 },
                { e: '🛵', l: 'Transport', col: c.salmon, p: 0.43 },
                { e: '☕', l: 'Kopi', col: c.butter, p: 0.72 },
              ].map((it, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <CatIcon emoji={it.e} color={it.col} size={26} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'DM Sans', fontSize: 11, color: c.ink, fontWeight: 500 }}>{it.l}</div>
                    <div style={{ height: 5, background: 'rgba(0,0,0,0.08)', borderRadius: 999, marginTop: 3, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${it.p * 100}%`, background: it.col, borderRadius: 999 }} />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Family */}
          <div style={{ background: c.cream2, borderRadius: 24, padding: 28, minHeight: 320 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.ink, color: c.cream, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>KELUARGA · 04</div>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 26, fontWeight: 500, letterSpacing: -0.8, margin: '12px 0 0', color: c.ink, lineHeight: 1.1 }}>Catat bareng.</h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 13, color: c.ink2, lineHeight: 1.55, marginTop: 10 }}>
              Belanja keluarga tercatat sekali, semua orang tau. Privasi pribadi tetap milikmu.
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { who: 'Mira', e: '🛒', a: '187K', col: c.terra },
                { who: 'Hardi', e: '🥩', a: '145K', col: c.olive },
                { who: 'Lina', e: '🧴', a: '38K', col: c.butter },
              ].map((tx, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, background: c.cream, padding: '6px 8px', borderRadius: 8 }}>
                  <div style={{ width: 22, height: 22, borderRadius: 11, background: tx.col, color: c.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Fraunces', fontSize: 10, fontWeight: 600 }}>{tx.who[0]}</div>
                  <span style={{ fontSize: 14 }}>{tx.e}</span>
                  <div style={{ flex: 1, fontFamily: 'DM Sans', fontSize: 11, color: c.ink, fontWeight: 500 }}>{tx.who}</div>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 12, color: c.ink, fontWeight: 500 }}>{tx.a}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Insight */}
          <div style={{ background: c.warmDark, color: c.cream, borderRadius: 24, padding: 28, minHeight: 320, position: 'relative', overflow: 'hidden' }}>
            <BlobField blobs={[{ kind: 'a', color: '#e07a4f', size: 180, top: '-30%', right: '-20%', opacity: 0.3 }]} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.cream, color: c.ink, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>CERITA · 05</div>
              <h3 style={{ fontFamily: 'Fraunces', fontSize: 26, fontWeight: 500, letterSpacing: -0.8, margin: '12px 0 0', lineHeight: 1.1 }}>Insight yang manusiawi.</h3>
              <div style={{ fontFamily: 'Fraunces', fontSize: 22, fontStyle: 'italic', lineHeight: 1.3, marginTop: 18, color: '#e07a4f' }}>
                "Kamu jajan kopi 18 kali bulan ini."
              </div>
              <p style={{ fontFamily: 'DM Sans', fontSize: 12, lineHeight: 1.6, opacity: 0.7, marginTop: 8 }}>
                Naik 40% dari Maret. Potong jadi 9 kali → simpan Rp 198rb.
              </p>
            </div>
          </div>
        </div>

        {/* Row 3: Privacy wide */}
        <div style={{ background: c.salmon, borderRadius: 24, padding: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
          <BlobField blobs={[{ kind: 'b', color: c.blush, size: 240, top: '-20%', right: '-5%', opacity: 0.6 }]} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', borderRadius: 999, background: c.ink, color: c.cream, fontFamily: 'Geist Mono', fontSize: 10, fontWeight: 600, letterSpacing: 1 }}>TENANG · 06</div>
            <h3 style={{ fontFamily: 'Fraunces', fontSize: 36, fontWeight: 500, letterSpacing: -1.2, margin: '12px 0 0', color: c.ink, lineHeight: 1.05 }}>Datamu, <em style={{ fontStyle: 'italic' }}>datamu.</em></h3>
            <p style={{ fontFamily: 'DM Sans', fontSize: 14, color: c.ink, lineHeight: 1.6, marginTop: 12, maxWidth: 380 }}>
              Encrypted end-to-end. Server di Indonesia. Nggak dijual ke siapa-siapa. Mau pindah? Ekspor CSV/PDF kapan saja.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { e: '🔒', l: 'End-to-end' },
              { e: '🇮🇩', l: 'Server di ID' },
              { e: '🚫', l: 'Tidak dijual' },
              { e: '📤', l: 'Ekspor bebas' },
            ].map((b, i) => (
              <div key={i} style={{ background: c.cream, padding: '14px 14px', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 22 }}>{b.e}</span>
                <span style={{ fontFamily: 'DM Sans', fontSize: 13, color: c.ink, fontWeight: 500 }}>{b.l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '20px 64px 100px', textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
        <h3 style={{ fontFamily: 'Fraunces', fontSize: 38, fontWeight: 500, letterSpacing: -1, color: c.ink }}>Coba sendiri — gratis.</h3>
        <button onClick={() => goto('download')} style={{ marginTop: 20, height: 56, padding: '0 32px', borderRadius: 14, background: c.terra, color: c.cream, border: 'none', fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>Unduh sekarang →</button>
      </section>
    </div>
  );
}

window.FeaturesPageV2 = FeaturesPageV2;