// sections3.jsx — Features, Integrations, Pricing, Testimonials, CTA, Footer

// =========================================================
// FEATURES
// =========================================================
const Features = () => {
  const features = [
  { Icon: IconGlobe, color: 'var(--red)', title: 'Domain unik', desc: 'market101.id/namatoko atau pasang domain sendiri. Pembeli ingat URL kamu.' },
  { Icon: IconPalette, color: 'var(--plum)', title: 'Builder visual', desc: 'Drag-drop section, ganti warna, font, dan layout. Tanpa coding sama sekali.' },
  { Icon: IconBox, color: 'var(--sun)', title: 'Manajemen produk', desc: 'Varian, stok per cabang, foto & video produk, dan import massal via CSV.' },
  { Icon: IconTruck, color: 'var(--mint)', title: '12+ kurir', desc: 'JNE, J&T, SiCepat, Pos, Anteraja, GoSend, dan lainnya. Ongkir auto.' },
  { Icon: IconPay, color: 'var(--sky)', title: 'Pembayaran lengkap', desc: 'QRIS, GoPay, OVO, Dana, transfer bank, dan virtual account semua bank.' },
  { Icon: IconChart, color: 'var(--ink)', title: 'Analitik realtime', desc: 'Lihat performa toko, produk terlaris, dan tracking pengunjung tiap jam.' },
  { Icon: IconUsers, color: 'var(--red)', title: 'Multi-admin', desc: 'Undang tim kamu dengan peran berbeda — kasir, gudang, atau owner.' },
  { Icon: IconChat, color: 'var(--mint)', title: 'Chat pembeli', desc: 'WhatsApp & in-app chat. Notifikasi pesanan masuk langsung ke HP kamu.' },
  { Icon: IconHeart, color: 'var(--plum)', title: 'CRM & Pelanggan', desc: 'Kenali pelangganmu lebih dalam — akses data, riwayat pembelian, dan follow up langsung dari dashboard. Bangun loyalitas, bukan sekadar transaksi.' }];

  return (
    <section id="fitur" className="section-pad" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <span className="eyebrow" style={{ color: 'var(--sun)' }}>Fitur</span>
          <h2 className="h-section" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 10, color: 'var(--paper)' }}>
            Semua yang kamu butuhkan<br />untuk jualan online.
          </h2>
          <p style={{ color: 'rgba(242,239,233,0.65)', fontSize: 18, marginTop: 18 }}>
            Tools enterprise dengan harga UMKM. Dari katalog produk sampai laporan finansial — semua sudah jadi.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 1, background: 'rgba(255,255,255,0.08)', borderRadius: 24, overflow: 'hidden' }}>
          {features.map((f, i) =>
          <div key={i} style={{ background: 'var(--ink)', padding: '36px 28px', display: 'flex', flexDirection: 'column', gap: 14, position: 'relative', transition: 'background .25s ease' }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'var(--ink)'}>
            
              <div style={{ width: 44, height: 44, borderRadius: 12, background: f.color, color: f.color === 'var(--ink)' ? 'var(--paper)' : 'white', display: 'grid', placeItems: 'center' }}>
                <f.Icon size={20} strokeWidth={2.2} />
              </div>
              <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 22, color: 'var(--paper)' }}>{f.title}</div>
              <div style={{ color: 'rgba(242,239,233,0.65)', fontSize: 14, lineHeight: 1.55 }}>{f.desc}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// =========================================================
// INTEGRATIONS
// =========================================================
const Integrations = () => {
  const Logo = ({ name, color, kind }) =>
  <div style={{ height: 64, borderRadius: 14, background: 'white', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '0 16px', boxShadow: '0 1px 0 rgba(14,14,16,0.04)' }}>
      <div style={{ width: 28, height: 28, borderRadius: 7, background: color, display: 'grid', placeItems: 'center', color: 'white', fontWeight: 800, fontFamily: 'Bricolage Grotesque', fontSize: 12 }}>{kind}</div>
      <span style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>{name}</span>
    </div>;

  return (
    <section className="section-pad">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }} className="integ-grid">
          <div>
            <span className="eyebrow">Integrasi</span>
            <h2 className="h-section" style={{ fontSize: 'clamp(34px, 4.2vw, 56px)', marginTop: 10 }}>
              Terhubung dengan<br />kurir & pembayaran favorit kamu.
            </h2>
            <p style={{ color: 'var(--muted)', fontSize: 17, marginTop: 18, maxWidth: 460 }}>
              Tidak perlu daftar satu-satu. Setelah toko aktif, semua channel pembayaran dan pengiriman langsung siap dipakai.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" className="btn btn-dark">Lihat semua integrasi <IconArrow size={14} /></a>
            </div>
          </div>

          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 14 }}>Pengiriman</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 28 }}>
              <Logo name="JNE" color="#C8112F" kind="J" />
              <Logo name="J&T Express" color="#E2002C" kind="J&T" />
              <Logo name="SiCepat" color="#E5113B" kind="Si" />
              <Logo name="Pos Indonesia" color="#FFA51E" kind="P" />
              <Logo name="Anteraja" color="#FF3F3F" kind="A" />
              <Logo name="GoSend" color="#00AA13" kind="G" />
            </div>

            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 14 }}>Pembayaran</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              <Logo name="QRIS" color="#E40000" kind="Q" />
              <Logo name="GoPay" color="#00AED6" kind="G" />
              <Logo name="OVO" color="#4C2F92" kind="O" />
              <Logo name="DANA" color="#118EEA" kind="D" />
              <Logo name="ShopeePay" color="#F94B16" kind="S" />
              <Logo name="VA Bank" color="#0E0E10" kind="VA" />
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .integ-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>);

};

// =========================================================
// PRICING
// =========================================================
const Pricing = () => {
  const [annual, setAnnual] = React.useState(true);
  const plans = [
  {
    name: 'Mulai',
    tag: 'Gratis selamanya',
    price: 'Rp 0',
    sub: '/bulan',
    desc: 'Cocok buat seller baru yang mau coba dulu.',
    features: ['1 toko', 'Hingga 50 produk', 'Template dasar', 'QRIS & transfer bank', 'Support komunitas'],
    cta: 'Mulai gratis',
    style: 'plain'
  },
  {
    name: 'Pro',
    tag: 'Paling populer',
    price: annual ? 'Rp 79K' : 'Rp 99K',
    sub: '/bulan',
    orig: annual ? 'Rp 99K' : null,
    desc: 'Buat seller serius yang mau scale.',
    features: ['1 toko + domain sendiri', 'Produk tanpa batas', 'Semua template', 'Semua channel pembayaran', '12+ kurir terintegrasi', 'Analitik realtime', 'Multi-admin (3 user)'],
    cta: 'Coba Pro 14 hari gratis',
    style: 'feature'
  },
  {
    name: 'Bisnis',
    tag: 'Tim & multi-cabang',
    price: annual ? 'Rp 249K' : 'Rp 299K',
    sub: '/bulan',
    orig: annual ? 'Rp 299K' : null,
    desc: 'Buat brand dengan tim & banyak cabang.',
    features: ['Multi-toko & cabang', 'Produk tanpa batas', 'Custom domain + SSL', 'Multi-admin tanpa batas', 'API & webhook', 'Laporan ekspor', 'Priority support 24/7'],
    cta: 'Hubungi sales',
    style: 'plain'
  }];


  return (
    <section id="harga" className="section-pad">
      <div className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow">Harga</span>
          <h2 className="h-section" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 10 }}>
            Harga jujur,<br />tanpa biaya tersembunyi.
          </h2>
          <p style={{ color: 'var(--muted)', fontSize: 17, marginTop: 18, maxWidth: 540, marginInline: 'auto' }}>
            Komisi 0% di paket Pro dan Bisnis. Yang kamu jual, kamu yang punya.
          </p>

          {/* Billing toggle */}
          <div style={{ marginTop: 32, display: 'inline-flex', padding: 4, borderRadius: 999, background: 'var(--white)', border: '1px solid var(--line)' }}>
            {[['Bulanan', false], ['Tahunan', true]].map(([label, val]) =>
            <button
              key={label}
              onClick={() => setAnnual(val)}
              style={{
                padding: '10px 22px', borderRadius: 999, border: 'none',
                background: annual === val ? 'var(--ink)' : 'transparent',
                color: annual === val ? 'var(--paper)' : 'var(--ink)',
                fontWeight: 600, fontSize: 14, fontFamily: 'inherit', transition: 'all .2s'
              }}>
              
                {label} {val && <span style={{ marginLeft: 6, padding: '2px 8px', borderRadius: 999, background: 'var(--sun)', color: 'var(--ink)', fontSize: 10, fontWeight: 800 }}>HEMAT 20%</span>}
              </button>
            )}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20, alignItems: 'stretch' }}>
          {plans.map((p, i) => {
            const featured = p.style === 'feature';
            return (
              <div key={i} style={{
                background: featured ? 'var(--ink)' : 'var(--white)',
                color: featured ? 'var(--paper)' : 'var(--ink)',
                borderRadius: 24, padding: 36, border: featured ? 'none' : '1px solid var(--line)',
                position: 'relative', display: 'flex', flexDirection: 'column',
                boxShadow: featured ? 'var(--shadow-lg)' : 'none',
                transform: featured ? 'scale(1.03)' : 'none'
              }}>
                {featured &&
                <span style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)', padding: '6px 14px', borderRadius: 999, background: 'var(--red)', color: 'white', fontSize: 12, fontWeight: 700 }}>
                    {p.tag}
                  </span>
                }
                <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 22 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: featured ? 'rgba(242,239,233,0.6)' : 'var(--muted)', marginTop: 6 }}>{p.desc}</div>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 24 }}>
                  <span className="h-display" style={{ fontSize: 52 }}>{p.price}</span>
                  <span style={{ fontSize: 14, color: featured ? 'rgba(242,239,233,0.6)' : 'var(--muted)' }}>{p.sub}</span>
                </div>
                {p.orig && <div style={{ fontSize: 13, color: featured ? 'rgba(242,239,233,0.5)' : 'var(--muted)', textDecoration: 'line-through', marginTop: 4 }}>{p.orig}/bulan</div>}

                <button
                  className={featured ? 'btn btn-primary' : 'btn btn-dark'}
                  style={{ marginTop: 24, justifyContent: 'center', background: featured ? undefined : featured ? undefined : 'var(--ink)', color: featured ? undefined : 'var(--paper)' }}
                  onClick={() => { window.location.href = window.__CI_REGISTER_URL__ || '/register?role=seller'; }}>
                  {p.cta} <IconArrow size={14} />
                </button>

                <div style={{ height: 1, background: featured ? 'rgba(255,255,255,0.1)' : 'var(--line)', margin: '28px 0 20px' }} />

                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                  {p.features.map((f, j) =>
                  <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14 }}>
                      <IconCheck size={16} stroke={featured ? 'var(--sun)' : 'var(--red)'} strokeWidth={3} />
                      <span>{f}</span>
                    </div>
                  )}
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

// =========================================================
// TESTIMONIALS / CERITA
// =========================================================
const Testimonials = () => {
  const stories = [
  {
    quote: 'Tiga bulan jualan di Market101, omzet kami naik 4x. Yang dulu cuma jualan di IG, sekarang punya toko sendiri yang dilihat profesional.',
    name: 'Dewi Arifin', role: 'Owner, Senja Skincare', city: 'Bandung',
    bg: '#FFE2E6', avatar: 'linear-gradient(135deg,#FFC83A,#ED1B3C)',
    stat: '4×', statLabel: 'omzet naik'
  },
  {
    quote: 'Setup-nya gampang banget. Sehari udah jadi tokonya dan langsung dapet order dari pembeli luar kota.',
    name: 'Bagas Pratama', role: 'Founder, Bumi Roastery', city: 'Yogyakarta',
    bg: '#E8F8F2', avatar: 'linear-gradient(135deg,#1FB58F,#0A3D2F)',
    stat: '24 jam', statLabel: 'sampai launch'
  },
  {
    quote: 'Yang paling saya suka: fitur multi-admin. Tim saya bisa kelola pesanan masing-masing tanpa ribet.',
    name: 'Rina Setiawati', role: 'CEO, Folk & Form', city: 'Surabaya',
    bg: '#E8F2FF', avatar: 'linear-gradient(135deg,#5B9BFF,#6B4CE6)',
    stat: '12', statLabel: 'admin di tim'
  }];

  return (
    <section id="cerita" className="section-pad" style={{ background: 'var(--paper-2)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <span className="eyebrow">Cerita seller</span>
            <h2 className="h-section" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', marginTop: 10, maxWidth: 700 }}>
              Mereka mulai kecil.<br />Sekarang mendunia.
            </h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
          {stories.map((s, i) =>
          <div key={i} style={{ background: s.bg, borderRadius: 24, padding: 36, position: 'relative', overflow: 'hidden', minHeight: 360, display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'absolute', top: -10, right: -10, fontFamily: 'Bricolage Grotesque', fontSize: 200, color: 'rgba(14,14,16,0.06)', fontWeight: 800, lineHeight: 1 }}>"</div>
              <div style={{ display: 'flex', gap: 2, color: 'var(--ink)', marginBottom: 16, position: 'relative' }}>
                {[0, 1, 2, 3, 4].map((i) => <IconStar key={i} size={16} />)}
              </div>
              <p style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 500, fontSize: 19, lineHeight: 1.4, position: 'relative', flex: 1, color: 'var(--ink)' }}>
                "{s.quote}"
              </p>
              <div style={{ height: 1, background: 'rgba(14,14,16,0.12)', margin: '20px 0' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: s.avatar }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, fontFamily: 'Bricolage Grotesque' }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{s.role} · {s.city}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 22, color: 'var(--red)', lineHeight: 1 }}>{s.stat}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: 1, marginTop: 2 }}>{s.statLabel}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// =========================================================
// CTA
// =========================================================
const CTA = () => {
  return (
    <section id="cta" className="section-pad" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <div style={{ background: 'var(--red)', borderRadius: 32, padding: 'clamp(48px, 8vw, 96px)', color: 'white', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
          {/* Decorative shapes */}
          <div style={{ position: 'absolute', top: -60, left: -60, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
          <div style={{ position: 'absolute', bottom: -80, right: -80, width: 280, height: 280, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
          <div className="cta-deco" style={{ position: 'absolute', top: 40, right: 60, width: 40, height: 40, borderRadius: 10, background: 'var(--sun)', transform: 'rotate(15deg)' }} />
          <div className="cta-deco" style={{ position: 'absolute', bottom: 50, left: 80, width: 50, height: 50, borderRadius: '50%', background: 'var(--mint)' }} />

          <div style={{ position: 'relative', zIndex: 2 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.18)', fontSize: 13, fontWeight: 600 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#fff', boxShadow: '0 0 0 4px rgba(255,255,255,0.25)' }} />
              312 toko baru minggu ini
            </span>
            <h2 className="h-display" style={{ fontSize: 'clamp(48px, 8vw, 96px)', marginTop: 28, marginBottom: 24 }}>
              Toko kamu,<br />menunggu untuk dibuka.
            </h2>
            <p style={{ fontSize: 19, opacity: 0.9, maxWidth: 580, marginInline: 'auto' }}>
              Daftar gratis sekarang. Setup butuh 5 menit. Order pertama kamu mungkin sebelum tidur malam ini.
            </p>

            {/* Domain input */}
            <div className="cta-pill" style={{ marginTop: 36, display: 'inline-flex', gap: 8, padding: 6, paddingLeft: 20, borderRadius: 999, background: 'white', color: 'var(--ink)', alignItems: 'center', fontFamily: 'JetBrains Mono', fontSize: 15, fontWeight: 500, boxShadow: '0 30px 60px -20px rgba(14,14,16,0.4)', maxWidth: 'calc(100% - 16px)' }}>
              <div className="cta-pill-domain" style={{ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }}>
                <span style={{ color: 'var(--muted)', whiteSpace: 'nowrap' }}>market101.id/</span>
                <input type="text" defaultValue="tokoanda" style={{ background: 'transparent', border: 'none', outline: 'none', fontFamily: 'JetBrains Mono', fontSize: 15, fontWeight: 700, minWidth: 0, flex: 1, padding: '12px 0' }} />
              </div>
              <button className="btn btn-dark cta-pill-btn" style={{ padding: '14px 22px', flexShrink: 0 }} onClick={() => { window.location.href = window.__CI_REGISTER_URL__ || '/register?role=seller'; }}>
                Klaim & buka <IconArrow size={14} />
              </button>
            </div>

            <div style={{ marginTop: 18, fontSize: 13, opacity: 0.85 }}>Gratis selamanya · Tanpa kartu kredit · Setup 5 menit</div>
          </div>
        </div>
      </div>
    </section>);

};

// =========================================================
// FOOTER
// =========================================================
const Footer = () =>
<footer style={{ background: 'var(--ink)', color: 'var(--paper)', paddingTop: 80, paddingBottom: 32 }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 64 }} className="ftr-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <span className="logo-tile">101</span>
            <span style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 24, color: 'var(--paper)' }}>Market<span style={{ color: 'var(--red)' }}>101</span></span>
          </div>
          <p style={{ color: 'rgba(242,239,233,0.6)', fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
            Platform mini-marketplace untuk seller Indonesia. Buat toko, kelola produk, terima pesanan — dalam 5 menit.
          </p>
          <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
            {['IG', 'TT', 'YT', 'X'].map((s) =>
          <a key={s} href="#" style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,0.06)', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, fontFamily: 'Bricolage Grotesque', color: 'var(--paper)' }}>{s}</a>
          )}
          </div>
        </div>
        {[
      { h: 'Produk', l: [
        { t: 'Fitur',          u: '#fitur' },
        { t: 'Template',       u: '#template' },
        { t: 'Harga',          u: '#harga' },
        { t: 'Integrasi',      u: '#' },
        { t: 'Roadmap',        u: '#' },
      ]},
      { h: 'Seller', l: [
        { t: 'Buka toko',      u: window.__CI_REGISTER_URL__ || '/register' },
        { t: 'Akademi seller', u: '#' },
        { t: 'Cerita seller',  u: '#cerita' },
        { t: 'Komunitas',      u: '#' },
      ]},
      { h: 'Bantuan', l: [
        { t: 'Pusat bantuan',  u: '#' },
        { t: 'Status sistem',  u: '#' },
        { t: 'Kontak',         u: window.__CI_CONTACT_URL__ || '/contact' },
        { t: 'API docs',       u: '#' },
        { t: 'Mitra',          u: '#' },
      ]},
      { h: 'Perusahaan', l: [
        { t: 'Tentang',        u: window.__CI_ABOUT_URL__   || '/about' },
        { t: 'Berita',         u: window.__CI_NEWS_URL__    || '/news' },
        { t: 'Kontak',         u: window.__CI_CONTACT_URL__ || '/contact' },
      ]},
      ].map((col, i) =>
      <div key={i}>
            <div style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 700, fontSize: 14, marginBottom: 16 }}>{col.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.l.map((item) =>
          <a key={item.t} href={item.u} style={{ color: 'rgba(242,239,233,0.6)', fontSize: 14 }}>{item.t}</a>
          )}
            </div>
          </div>
      )}
      </div>
      <div style={{ height: 1, background: 'rgba(255,255,255,0.08)' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, flexWrap: 'wrap', gap: 16 }}>
        <div style={{ color: 'rgba(242,239,233,0.5)', fontSize: 13 }}>© 2026 Market101. All RIghts Reserved.</div>
        <div style={{ display: 'flex', gap: 20, color: 'rgba(242,239,233,0.5)', fontSize: 13 }}>
          <span>🇮🇩 Indonesia</span>
          <span>Bahasa Indonesia</span>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px){
        .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
      }
      @media (max-width: 480px){
        .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
        footer > div { padding-left: 18px !important; padding-right: 18px !important; }
      }
    `}</style>
  </footer>;


/* ─── Mobile fixes ─────────────────────────────────────── */
const _sections3MobileStyle = document.createElement('style');
_sections3MobileStyle.textContent = `
  @media (max-width: 640px) {
    /* CTA: hide small decorative pills that overlap text */
    .cta-deco { display: none !important; }

    /* CTA domain pill → column layout, full width */
    .cta-pill {
      display: flex !important;
      flex-direction: column !important;
      border-radius: 20px !important;
      padding: 14px 14px 10px !important;
      align-items: stretch !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 0 !important;
    }
    .cta-pill-domain {
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(14,14,16,0.1);
      margin-bottom: 8px;
    }
    .cta-pill-domain input { width: 100% !important; flex: 1 !important; }
    .cta-pill-btn {
      width: 100% !important;
      border-radius: 12px !important;
      padding: 14px !important;
      font-size: 15px !important;
      justify-content: center !important;
    }

    /* Pricing: remove scale transform on featured card (causes overflow) */
    #harga .card-featured { transform: none !important; }

    /* Footer: simplify grid on very small screens */
    .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  }
`;
document.head.appendChild(_sections3MobileStyle);

Object.assign(window, { Features, Integrations, Pricing, Testimonials, CTA, Footer });