// sections2.jsx — bottom-half sections

// =========================================================
// DATA OWNERSHIP
// =========================================================
const DataOwnership = () => {
  const bars = [38, 52, 44, 68, 57, 79, 63, 85, 72, 91, 81, 97];

  const customers = [
    { init: 'SR', name: 'Sari Rahayu',  city: 'Jakarta',   orders: 4, total: 'Rp 2,4 jt', badge: 'Loyal', col: '#5B9BFF' },
    { init: 'BP', name: 'Budi Pratama', city: 'Bandung',   orders: 2, total: 'Rp 980 rb', badge: '',       col: '#1FB58F' },
    { init: 'RP', name: 'Rina Putri',   city: 'Surabaya',  orders: 7, total: 'Rp 5,1 jt', badge: 'Top',   col: '#FFC83A' },
  ];

  const theyHide = [
    'Nama & kontak customer',
    'Riwayat pembelian customer',
    'Sumber traffic toko kamu',
    'Siapa yang repeat order',
    'Analitik performa produk',
    'Export data mentah',
  ];

  const weShow = [
    { label: 'Nama & no. HP semua customer',   note: 'Follow up kapan saja' },
    { label: 'Riwayat belanja per customer',    note: 'Siapa pembeli setia kamu' },
    { label: 'Laporan penjualan harian',        note: 'Revenue & tren tiap hari' },
    { label: 'Traffic & sumber pengunjung',     note: 'Dari mana mereka datang' },
    { label: 'Performa tiap produk',            note: 'Views, klik, konversi' },
    { label: 'Export ke CSV / Excel',           note: 'Data mentah, 100% milikmu' },
  ];

  const cats = [
    { Icon: IconUsers,    label: 'Data Pelanggan', stat: '100%',      note: 'Nama, HP, riwayat beli',    col: '#5B9BFF' },
    { Icon: IconChart,    label: 'Data Penjualan', stat: 'Harian',    note: 'Revenue & tren real-time',  col: '#1FB58F' },
    { Icon: IconBox,      label: 'Data Produk',    stat: 'Per-item',  note: 'Views, klik, konversi',     col: '#FFC83A' },
    { Icon: IconSparkles, label: 'Aktivitas Toko', stat: 'Live',      note: 'Visitor, sesi, sumber',     col: '#6B4CE6' },
  ];

  return (
    <section id="data" style={{ background: '#08080C', color: '#F2EFE9', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>

      {/* Ambient glows */}
      <div style={{ position: 'absolute', top: -100, left: '10%', width: 700, height: 500, background: 'radial-gradient(ellipse, rgba(91,155,255,0.09) 0%, transparent 65%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: -60, right: '5%', width: 500, height: 380, background: 'radial-gradient(ellipse, rgba(31,181,143,0.07) 0%, transparent 65%)', pointerEvents: 'none' }} />

      <div className="wrap">

        {/* ── Eyebrow + headline ── */}
        <div style={{ maxWidth: 840, marginBottom: 72 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 16px', borderRadius: 999, background: 'rgba(91,155,255,0.1)', border: '1px solid rgba(91,155,255,0.22)', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#5B9BFF', marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#5B9BFF', boxShadow: '0 0 0 3px rgba(91,155,255,0.25)' }} />
            Data Ownership
          </span>
          <h2 className="h-section" style={{ fontSize: 'clamp(36px, 5vw, 66px)', color: '#F2EFE9', marginBottom: 24 }}>
            Platform lain menyembunyikan<br/>datamu. Kami tunjukkan<br/>semuanya.
          </h2>
          <p style={{ color: 'rgba(242,239,233,0.55)', fontSize: 18, lineHeight: 1.68, maxWidth: 640 }}>
            Di marketplace besar, data customermu dikuasai platform — kamu tidak tahu siapa yang beli, darimana mereka datang, atau berapa kali mereka kembali. Di Market101, semua itu transparan dan sepenuhnya jadi milikmu.
          </p>
        </div>

        {/* ── Main 2-col: dashboard + comparison ── */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 24, marginBottom: 24 }} className="do-main">

          {/* Left: dashboard mockup */}
          <div style={{ background: '#0F0F17', borderRadius: 24, border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden' }}>

            {/* Topbar */}
            <div style={{ padding: '16px 22px', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#1FB58F', boxShadow: '0 0 0 3px rgba(31,181,143,0.22)' }} />
                <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(242,239,233,0.6)' }}>Dashboard · Kopi Senja</span>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: '#1FB58F', background: 'rgba(31,181,143,0.12)', padding: '3px 10px', borderRadius: 999 }}>Live</span>
            </div>

            {/* Revenue + bar chart */}
            <div style={{ padding: '22px 22px 0' }}>
              <div style={{ marginBottom: 18 }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(242,239,233,0.35)', marginBottom: 6 }}>Pendapatan bulan ini</div>
                <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 36, letterSpacing: '-0.03em', color: '#F2EFE9', lineHeight: 1 }}>Rp 24.380.000</div>
                <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#1FB58F', background: 'rgba(31,181,143,0.12)', padding: '3px 8px', borderRadius: 6 }}>+31% vs bulan lalu</span>
                  <span style={{ fontSize: 12, color: 'rgba(242,239,233,0.32)' }}>312 pesanan</span>
                </div>
              </div>

              {/* Bars */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 68 }}>
                {bars.map((h, i) => (
                  <div key={i} style={{
                    flex: 1,
                    height: h + '%',
                    borderRadius: '3px 3px 0 0',
                    background: i === bars.length - 1 ? '#5B9BFF' : 'rgba(91,155,255,0.2)',
                  }} />
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0 18px', fontSize: 10, color: 'rgba(242,239,233,0.22)', borderTop: '1px solid rgba(255,255,255,0.04)', marginTop: 1 }}>
                <span>1 Mei</span><span>15 Mei</span><span>Hari ini</span>
              </div>
            </div>

            {/* Mini stats row */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
              {[
                { v: '1.240', l: 'Pengunjung' },
                { v: '8,4%',  l: 'Konversi' },
                { v: '312',   l: 'Pesanan' },
              ].map((s, i) => (
                <div key={i} style={{ padding: '14px 0', textAlign: 'center', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
                  <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 20, color: '#F2EFE9' }}>{s.v}</div>
                  <div style={{ fontSize: 11, color: 'rgba(242,239,233,0.35)', marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>

            {/* Customer list */}
            <div style={{ padding: '16px 22px 22px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(242,239,233,0.3)', marginBottom: 14 }}>Customer Terbaru</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {customers.map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: c.col, display: 'grid', placeItems: 'center', fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 11, color: '#08080C', flexShrink: 0 }}>
                      {c.init}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <span style={{ fontSize: 13, fontWeight: 600, color: '#F2EFE9' }}>{c.name}</span>
                        {c.badge ? (
                          <span style={{ fontSize: 9, fontWeight: 800, padding: '2px 6px', borderRadius: 999, background: c.badge === 'Top' ? '#FFC83A' : 'rgba(91,155,255,0.18)', color: c.badge === 'Top' ? '#08080C' : '#5B9BFF' }}>
                            {c.badge}
                          </span>
                        ) : null}
                      </div>
                      <div style={{ fontSize: 11, color: 'rgba(242,239,233,0.35)', marginTop: 1 }}>{c.city} · {c.orders}x beli</div>
                    </div>
                    <div style={{ textAlign: 'right', flexShrink: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Bricolage Grotesque', color: '#F2EFE9' }}>{c.total}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right: comparison cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>

            {/* They hide */}
            <div style={{ background: 'rgba(237,27,60,0.04)', border: '1px solid rgba(237,27,60,0.14)', borderRadius: 20, padding: '22px 22px', flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: 'rgba(237,27,60,0.12)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <IconX size={14} stroke="#ED1B3C" strokeWidth={2.5} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'rgba(242,239,233,0.8)' }}>Marketplace besar</div>
                  <div style={{ fontSize: 11, color: 'rgba(237,27,60,0.6)', marginTop: 1 }}>Data seller tidak dibagikan</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {theyHide.map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                    <div style={{ width: 15, height: 15, borderRadius: 4, background: 'rgba(237,27,60,0.1)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <IconX size={7} stroke="rgba(237,27,60,0.5)" strokeWidth={3} />
                    </div>
                    <span style={{ fontSize: 13, color: 'rgba(242,239,233,0.32)', textDecoration: 'line-through' }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* We show */}
            <div style={{ background: 'rgba(31,181,143,0.05)', border: '1px solid rgba(31,181,143,0.18)', borderRadius: 20, padding: '22px 22px', flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: 'rgba(31,181,143,0.14)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <IconCheck size={14} stroke="#1FB58F" strokeWidth={2.5} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: '#F2EFE9' }}>Market101</div>
                  <div style={{ fontSize: 11, color: 'rgba(31,181,143,0.72)', marginTop: 1 }}>Transparan & 100% milik kamu</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {weShow.map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                    <div style={{ width: 15, height: 15, borderRadius: 4, background: 'rgba(31,181,143,0.14)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1 }}>
                      <IconCheck size={7} stroke="#1FB58F" strokeWidth={3} />
                    </div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(242,239,233,0.8)' }}>{item.label}</div>
                      <div style={{ fontSize: 11, color: 'rgba(242,239,233,0.34)', marginTop: 1 }}>{item.note}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* ── Bottom: 4 data category cards ── */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="do-cats">
          {cats.map((cat, i) => (
            <div key={i} style={{ background: '#0F0F17', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 20, padding: '22px 20px' }}>
              <div style={{ width: 42, height: 42, borderRadius: 11, display: 'grid', placeItems: 'center', marginBottom: 14, background: cat.col + '1A' }}>
                <cat.Icon size={20} stroke={cat.col} strokeWidth={2} />
              </div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', color: cat.col, lineHeight: 1, marginBottom: 6 }}>{cat.stat}</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#F2EFE9', marginBottom: 4 }}>{cat.label}</div>
              <div style={{ fontSize: 12, color: 'rgba(242,239,233,0.38)' }}>{cat.note}</div>
            </div>
          ))}
        </div>

      </div>

      <style>{`
        @media (max-width: 900px) {
          .do-main { grid-template-columns: 1fr !important; }
          .do-cats { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .do-cats { gap: 12px !important; }
        }
      `}</style>
    </section>
  );
};

// =========================================================
// HOW IT WORKS — sticky scroll-through
// =========================================================
const HowItWorks = () => {
  const [active, setActive] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const viewH = window.innerHeight;
      // Active step based on how much of the section has scrolled into view
      const total = rect.height - viewH;
      const scrolled = Math.max(0, -rect.top);
      const pct = total > 0 ? Math.min(1, scrolled / total) : 0;
      const step = Math.min(2, Math.floor(pct * 3));
      setActive(step);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const steps = [
    {
      eyebrow: 'Langkah 01',
      title: 'Daftar &\nbuat toko.',
      desc: 'Daftar gratis dalam 30 detik. Pilih nama toko, pilih template, dan kustomisasi sesuai brand kamu. Tanpa coding, tanpa setup ribet.',
      visual: 'setup',
    },
    {
      eyebrow: 'Langkah 02',
      title: 'Upload\nproduk.',
      desc: 'Tambahkan produk lengkap dengan foto, video, harga, stok, dan varian. Import massal dari CSV atau langsung satu per satu — bebas kamu pilih.',
      visual: 'product',
    },
    {
      eyebrow: 'Langkah 03',
      title: 'Terima\npesanan.',
      desc: 'Pembeli belanja lewat link toko kamu. Kamu kelola pesanan, cetak resi otomatis dari kurir favorit, dan dapatkan pembayaran langsung ke rekening.',
      visual: 'order',
    },
  ];

  return (
    <section id="cara" ref={ref} className="hiw-section" style={{ minHeight: '300vh', position: 'relative', background: 'var(--paper-2)' }}>
      <div className="hiw-sticky" style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', alignItems: 'center' }}>
        <div className="wrap" style={{ width: '100%' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="hiw-grid">
            {/* Left — sticky title + steps */}
            <div>
              <span className="eyebrow">Cara kerjanya</span>
              <h2 className="h-section" style={{ fontSize: 'clamp(40px, 5.5vw, 72px)', marginTop: 12, marginBottom: 16 }}>
                Dari nol ke<br/>toko aktif<br/>dalam 3 langkah.
              </h2>
              <p style={{ color: 'var(--muted)', fontSize: 17, maxWidth: 460, marginBottom: 40 }}>
                Tidak butuh tim developer, tidak butuh hosting. Cukup ide dan produk — sisanya biar Market101 yang urus.
              </p>

              {/* Step indicators */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {steps.map((s, i) => (
                  <div key={i} className="hiw-step" style={{ display: 'flex', gap: 16, opacity: active === i ? 1 : 0.4, transition: 'opacity .3s ease' }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 12, flex: '0 0 44px',
                      background: active === i ? 'var(--red)' : 'transparent',
                      color: active === i ? 'white' : 'var(--ink)',
                      border: active === i ? 'none' : '1.5px solid var(--line-strong)',
                      display: 'grid', placeItems: 'center', fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 18,
                      transition: 'all .3s ease',
                    }}>
                      {String(i + 1).padStart(2, '0')}
                    </div>
                    <div style={{ paddingTop: 8 }}>
                      <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 18 }}>
                        {s.title.replace('\n', ' ')}
                      </div>
                      <div className={`hiw-step-desc${active === i ? ' hiw-step-desc--active' : ''}`} style={{ fontSize: 14, color: 'var(--muted)', marginTop: 6, maxWidth: 380, display: active === i ? 'block' : 'none' }}>{s.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right — visual that swaps */}
            <div className="hiw-visual" style={{ position: 'relative', height: 520 }}>
              {steps.map((s, i) => (
                <div key={i} style={{
                  position: 'absolute', inset: 0,
                  opacity: active === i ? 1 : 0,
                  transform: active === i ? 'translateY(0) scale(1)' : (active > i ? 'translateY(-40px) scale(0.95)' : 'translateY(40px) scale(0.95)'),
                  transition: 'opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)',
                  pointerEvents: active === i ? 'auto' : 'none',
                }}>
                  <HiwVisual variant={s.visual}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hiw-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 640px) {
          /* Disable sticky scroll on mobile — just show a plain section */
          .hiw-section { min-height: unset !important; }
          .hiw-sticky {
            position: static !important;
            height: auto !important;
            padding: 64px 0 40px !important;
            align-items: flex-start !important;
          }
          /* All steps fully visible, all descriptions shown */
          .hiw-step { opacity: 1 !important; }
          .hiw-step-desc { display: block !important; }
          /* Hide animated visual panel — too tall for mobile */
          .hiw-visual { display: none !important; }
        }
      `}</style>
    </section>
  );
};

const HiwVisual = ({ variant }) => {
  if (variant === 'setup') {
    return (
      <div style={{ width: '100%', height: '100%', borderRadius: 24, background: 'white', border: '1px solid var(--line)', padding: 28, boxShadow: 'var(--shadow-md)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--muted)', letterSpacing: 1, textTransform: 'uppercase' }}>Buat toko baru</div>
        <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 26, marginTop: 4 }}>Atur tampilan toko kamu</div>

        {/* Form rows */}
        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6, color: 'var(--muted)' }}>Nama toko</div>
            <div style={{ height: 44, borderRadius: 10, border: '1.5px solid var(--ink)', display: 'flex', alignItems: 'center', padding: '0 14px', fontWeight: 600 }}>Kopi Senja</div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6, color: 'var(--muted)' }}>URL toko</div>
            <div style={{ height: 44, borderRadius: 10, border: '1.5px solid var(--line)', display: 'flex', alignItems: 'center', padding: '0 14px', fontFamily: 'JetBrains Mono', fontSize: 13 }}>
              <span style={{ color: 'var(--muted)' }}>market101.id/</span><span style={{ fontWeight: 700 }}>kopisenja</span>
              <span style={{ marginLeft: 'auto', color: 'var(--mint)', fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <IconCheck size={12} strokeWidth={3}/> Tersedia
              </span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6, color: 'var(--muted)' }}>Pilih template</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[
                { bg: '#FAF7F1', accent: '#ED1B3C', active: true },
                { bg: '#0E0E10', accent: '#FFC83A' },
                { bg: '#E8F2FF', accent: '#5B9BFF' },
                { bg: '#E8F8F2', accent: '#1FB58F' },
              ].map((t, i) => (
                <div key={i} style={{ aspectRatio: '3/4', borderRadius: 8, background: t.bg, border: t.active ? '2px solid var(--red)' : '1.5px solid var(--line)', padding: 6, position: 'relative' }}>
                  <div style={{ height: 18, borderRadius: 3, background: t.accent, opacity: 0.85 }}/>
                  <div style={{ marginTop: 4, height: 4, background: 'rgba(0,0,0,0.1)', borderRadius: 2 }}/>
                  <div style={{ marginTop: 2, height: 4, background: 'rgba(0,0,0,0.1)', borderRadius: 2, width: '70%' }}/>
                  {t.active && <div style={{ position: 'absolute', top: -8, right: -8, width: 20, height: 20, borderRadius: '50%', background: 'var(--red)', color: 'white', display: 'grid', placeItems: 'center' }}><IconCheck size={10} strokeWidth={3}/></div>}
                </div>
              ))}
            </div>
          </div>
        </div>

        <button className="btn btn-primary" style={{ width: '100%', marginTop: 24 }}>
          Buat toko sekarang <IconArrow size={14}/>
        </button>
      </div>
    );
  }
  if (variant === 'product') {
    return (
      <div style={{ width: '100%', height: '100%', borderRadius: 24, background: 'white', border: '1px solid var(--line)', boxShadow: 'var(--shadow-md)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 20 }}>Produk</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>42 produk · 38 aktif</div>
          </div>
          <button className="btn btn-dark" style={{ padding: '8px 14px', fontSize: 13 }}>+ Tambah produk</button>
        </div>
        <div style={{ flex: 1, padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, overflow: 'hidden' }}>
          {[
            { n: 'Gayo Aceh 250g', p: '85.000', stock: 24, bg: '#3B2517' },
            { n: 'Toraja Sapan 250g', p: '92.000', stock: 18, bg: '#5A3A22' },
            { n: 'Kintamani 250g', p: '78.000', stock: 31, bg: '#7C4B27' },
            { n: 'Single Cup', p: '35.000', stock: 12, bg: '#2A1B12' },
          ].map((p, i) => (
            <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }}>
              <div style={{ aspectRatio: '16/9', background: `linear-gradient(135deg, ${p.bg} 0%, ${p.bg}cc 100%)`, position: 'relative' }}>
                <span style={{ position: 'absolute', top: 8, left: 8, fontSize: 9, fontWeight: 700, padding: '3px 7px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: 'var(--ink)' }}>● Aktif</span>
              </div>
              <div style={{ padding: 12 }}>
                <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>{p.n}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 12 }}>
                  <span style={{ fontWeight: 700, color: 'var(--red)' }}>Rp {p.p}</span>
                  <span style={{ color: 'var(--muted)' }}>Stok {p.stock}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  // order
  return (
    <div style={{ width: '100%', height: '100%', borderRadius: 24, background: 'var(--ink)', color: 'var(--paper)', padding: 28, boxShadow: 'var(--shadow-md)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.6, letterSpacing: 1, textTransform: 'uppercase' }}>Pesanan masuk</div>
          <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 26, marginTop: 4 }}>3 pesanan baru</div>
        </div>
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: 'var(--mint)', boxShadow: '0 0 0 6px rgba(31,181,143,0.2)' }}/>
      </div>

      <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[
          { n: 'Rina Setiawati', loc: 'Surabaya', item: 'Gayo Aceh × 2', total: '170.000', status: 'Bayar', col: 'var(--sun)' },
          { n: 'Bagas P.', loc: 'Jakarta', item: 'Toraja + Kintamani', total: '170.000', status: 'Siap kirim', col: 'var(--sky)' },
          { n: 'Dewi Arifin', loc: 'Bandung', item: 'Single Cup × 4', total: '140.000', status: 'Dikirim', col: 'var(--mint)' },
        ].map((o, i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.06)', borderRadius: 14, padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: o.col, color: 'var(--ink)', display: 'grid', placeItems: 'center', fontWeight: 800, fontFamily: 'Bricolage Grotesque', fontSize: 14 }}>{o.n[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.n} · <span style={{ opacity: 0.6, fontWeight: 500 }}>{o.loc}</span></div>
              <div style={{ fontSize: 12, opacity: 0.7, marginTop: 2 }}>{o.item}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>Rp {o.total}</div>
              <div style={{ fontSize: 10, fontWeight: 700, marginTop: 2, padding: '2px 8px', borderRadius: 999, background: o.col, color: 'var(--ink)', display: 'inline-block' }}>{o.status}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 24, padding: 16, borderRadius: 14, background: 'var(--red)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, opacity: 0.85 }}>Total hari ini</div>
          <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 24 }}>Rp 4.182.500</div>
        </div>
        <IconArrow size={24}/>
      </div>
    </div>
  );
};

// =========================================================
// TEMPLATES
// =========================================================
const Templates = () => {
  const cardsRef = React.useRef([]);

  const handleMouseMove = (e, i) => {
    const el = cardsRef.current[i];
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(1000px) rotateY(${x * 8}deg) rotateX(${-y * 8}deg) translateY(-6px)`;
  };
  const handleMouseLeave = (i) => {
    const el = cardsRef.current[i];
    if (!el) return;
    el.style.transform = 'perspective(1000px) rotateY(0) rotateX(0) translateY(0)';
  };

  const templates = [
    { name: 'Minimal', tag: 'Editorial · Putih', palette: { bg: '#FAF7F1', fg: '#0E0E10', line: 'rgba(14,14,16,0.1)', accent: '#ED1B3C', heroBg: '#0E0E10', heroText: '#FAF7F1' }, productColors: ['#E5D9C6','#D4C4A8','#BFA987','#A88F6F','#8B7355','#6E5A40'] },
    { name: 'Bold', tag: 'Energi · Gelap', palette: { bg: '#0E0E10', fg: '#F2EFE9', line: 'rgba(255,255,255,0.08)', accent: '#FFC83A', heroBg: '#FFC83A', heroText: '#0E0E10' }, productColors: ['#FFC83A','#ED1B3C','#5B9BFF','#1FB58F','#6B4CE6','#FF7A45'] },
    { name: 'Premium', tag: 'Luxury · Krem', palette: { bg: '#F0E8DA', fg: '#2A1F18', line: 'rgba(42,31,24,0.12)', accent: '#2A1F18', heroBg: '#2A1F18', heroText: '#F0E8DA' }, productColors: ['#C9B89A','#A89478','#876F50','#5C4630','#3D2F22','#2A1F18'] },
    { name: 'Pasar', tag: 'Warung · Cerah', palette: { bg: '#E8F8F2', fg: '#0A3D2F', line: 'rgba(10,61,47,0.12)', accent: '#1FB58F', heroBg: '#1FB58F', heroText: '#FFFFFF' }, productColors: ['#FFC83A','#FF7A45','#1FB58F','#5B9BFF','#ED1B3C','#0A3D2F'] },
  ];

  return (
    <section id="template" className="section-pad">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <span className="eyebrow">Template</span>
            <h2 className="h-section" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 10, maxWidth: 700 }}>
              Empat template.<br/>Satu untuk tiap mood toko.
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">Lihat semua <IconArrow size={14}/></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
          {templates.map((t, i) => (
            <div
              key={i}
              ref={el => cardsRef.current[i] = el}
              onMouseMove={e => handleMouseMove(e, i)}
              onMouseLeave={() => handleMouseLeave(i)}
              style={{ transition: 'transform .35s cubic-bezier(.2,.7,.2,1)' }}
            >
              <TemplateCard {...t}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { DataOwnership, HowItWorks, HiwVisual, Templates });