// sections.jsx — all the landing-page section components

// =========================================================
// NAV
// =========================================================
const Nav = ({ scrolled }) => (
  <nav style={{
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    background: scrolled ? 'rgba(246,242,234,0.85)' : 'transparent',
    backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
    WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
    borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    transition: 'background .25s ease, border-color .25s ease',
  }}>
    <div className="wrap" style={{ height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="logo-tile">101</span>
        <span style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 20, letterSpacing: -0.03 + 'em' }}>Market<span style={{ color: 'var(--red)' }}>101</span></span>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }} className="nav-links">
        {[
          ['Fitur', '#fitur'],
          ['Template', '#template'],
          ['Harga', '#harga'],
          ['Cerita', '#cerita'],
        ].map(([t, h]) => (
          <a key={t} href={h} style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)', opacity: 0.78 }}>{t}</a>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <a href={window.__CI_LOGIN_URL__ || '/login'} className="nav-masuk" style={{ fontSize: 14, fontWeight: 600, padding: '10px 16px' }}>Masuk</a>
        <a href={window.__CI_REGISTER_URL__ || '/register?role=seller'} className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }}>
          Buka toko <IconArrow size={14}/>
        </a>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px){ .nav-links{ display:none !important; } }
      @media (max-width: 480px){ .nav-masuk{ display:none !important; } }
    `}</style>
  </nav>
);

// =========================================================
// HERO
// =========================================================
const Hero = ({ parallaxY, accent }) => {
  // parallaxY is the scroll-derived translation (0 at top, increases as you scroll)
  const py = parallaxY;
  return (
    <section id="top" style={{ paddingTop: 120, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      {/* Decorative grid bg */}
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.6, maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 80%)', WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 80%)' }}/>
      {/* Floating decorative shapes — hidden on mobile via .hero-deco */}
      <div className="hero-deco" style={{ position: 'absolute', top: 140 + py * 0.3, left: '8%', width: 90, height: 90, borderRadius: '50%', background: 'var(--sun)', opacity: 0.85, filter: 'blur(0.5px)', zIndex: 0 }}/>
      <div className="hero-deco" style={{ position: 'absolute', top: 280 - py * 0.2, right: '6%', width: 120, height: 120, borderRadius: 28, background: 'var(--mint)', transform: `rotate(${12 + py * 0.05}deg)`, opacity: 0.8, zIndex: 0 }}/>
      <div className="hero-deco" style={{ position: 'absolute', bottom: -30 + py * 0.15, left: '40%', width: 70, height: 70, borderRadius: 18, background: 'var(--plum)', transform: `rotate(${-8 - py * 0.04}deg)`, opacity: 0.7, zIndex: 0 }}/>

      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
          <span className="pill" style={{ marginBottom: 24 }}>
            <span className="dot"/>
            <span><b style={{ fontWeight: 700 }}>Baru</b> · Builder toko dengan AI sekarang gratis</span>
          </span>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 7.5vw, 96px)', margin: 0 }}>
            Buka toko online<br/>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              dalam{' '}
              <span style={{ position: 'relative', display: 'inline-block' }}>
                <span style={{ position: 'relative', zIndex: 2 }}>5 menit.</span>
                <svg style={{ position: 'absolute', left: -6, right: -6, bottom: -6, width: 'calc(100% + 12px)', height: '46%', zIndex: 1 }} viewBox="0 0 200 30" preserveAspectRatio="none">
                  <path d="M3,22 Q40,4 100,18 T197,12" stroke="var(--red)" strokeWidth="8" fill="none" strokeLinecap="round" opacity="0.92"/>
                </svg>
              </span>
            </span>
          </h1>
          <p style={{ fontSize: 'clamp(17px, 2vw, 21px)', color: 'var(--muted)', maxWidth: 620, marginTop: 28, lineHeight: 1.5 }}>
            Platform mini-marketplace untuk seller Indonesia. Buat toko sendiri, kelola produk, dan terima pesanan — semua di satu tempat. Gratis selamanya.
          </p>

          {/* Domain check */}
          <div className="hero-pill" style={{ marginTop: 36, display: 'flex', gap: 8, padding: 6, paddingLeft: 18, borderRadius: 999, background: 'var(--white)', boxShadow: 'var(--shadow-md)', alignItems: 'center', border: '1px solid var(--line)', fontFamily: 'JetBrains Mono', fontSize: 14, fontWeight: 500 }}>
            <div className="hero-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="kopisenja"
                style={{ background: 'transparent', border: 'none', outline: 'none', fontFamily: 'JetBrains Mono', fontSize: 14, fontWeight: 700, color: 'var(--ink)', minWidth: 0, flex: 1, padding: '8px 0' }}
              />
            </div>
            <button className="btn btn-primary hero-pill-btn" style={{ padding: '12px 20px', flexShrink: 0 }} onClick={() => { window.location.href = window.__CI_REGISTER_URL__ || '/register?role=seller'; }}>
              Cek & buka toko <IconArrow size={14}/>
            </button>
          </div>

          <div style={{ marginTop: 18, display: 'flex', gap: 18, flexWrap: 'wrap', justifyContent: 'center', fontSize: 13, color: 'var(--muted)' }}>
            {['Gratis selamanya', 'Tanpa kartu kredit', 'Setup 5 menit'].map(t => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <IconCheck size={14} stroke="var(--mint)" strokeWidth={3}/> {t}
              </span>
            ))}
          </div>
        </div>

        {/* Hero visual */}
        <div style={{ position: 'relative', marginTop: 80, display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 640 }}>
          {/* Backdrop card */}
          <div style={{
            position: 'absolute', top: 40, left: '50%', transform: `translateX(-50%) translateY(${py * 0.05}px)`,
            width: 'min(960px, 90%)', height: 540, borderRadius: 32,
            background: 'linear-gradient(135deg, #FFE2E6 0%, #FFF5DA 50%, #DCF6EC 100%)',
            border: '1px solid var(--line)',
          }}/>

          {/* Center phone */}
          <div style={{ position: 'relative', zIndex: 3, transform: `translateY(${-py * 0.06}px)` }}>
            <HeroStorePhone accent={accent}/>
          </div>

          {/* Left floating: domain pill — hidden on mobile */}
          <div className="hero-float-card" style={{ position: 'absolute', left: 'max(2%, calc(50% - 460px))', top: 80, zIndex: 4, transform: `translateY(${-py * 0.14}px) rotate(-3deg)` }}>
            <DomainPill/>
          </div>

          {/* Left lower: dashboard card — hidden on mobile */}
          <div className="hero-float-card" style={{ position: 'absolute', left: 'max(2%, calc(50% - 480px))', bottom: 30, zIndex: 4, transform: `translateY(${-py * 0.18}px) rotate(-2deg)` }}>
            <HeroDashboardCard/>
          </div>

          {/* Right floating: order toast — hidden on mobile */}
          <div className="hero-float-card" style={{ position: 'absolute', right: 'max(2%, calc(50% - 460px))', top: 130, zIndex: 4, transform: `translateY(${-py * 0.22}px) rotate(2deg)` }}>
            <OrderToast/>
          </div>

          {/* Right lower: review badge — hidden on mobile */}
          <div className="hero-float-card" style={{ position: 'absolute', right: 'max(2%, calc(50% - 440px))', bottom: 60, zIndex: 4, transform: `translateY(${-py * 0.10}px) rotate(3deg)` }}>
            <div style={{ background: 'white', borderRadius: 16, padding: 16, width: 240, boxShadow: 'var(--shadow-md)', border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', gap: 2, color: 'var(--sun)', marginBottom: 8 }}>
                {[0,1,2,3,4].map(i => <IconStar key={i} size={14}/>)}
              </div>
              <div style={{ fontSize: 13, fontFamily: 'Bricolage Grotesque', fontWeight: 600, lineHeight: 1.35, color: 'var(--ink)' }}>
                "Toko saya jadi profesional banget. Setup-nya cepet."
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 12 }}>
                <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'linear-gradient(135deg,#FFC83A,#ED1B3C)' }}/>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 700 }}>Dewi A.</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)' }}>Owner, Senja Skincare</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// =========================================================
// MARQUEE / LOGO BAR
// =========================================================
const Marquee = () => (
  <section style={{ padding: '40px 0 60px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="wrap" style={{ textAlign: 'center', marginBottom: 28 }}>
      <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: 2, textTransform: 'uppercase', color: 'var(--muted)' }}>
        Dipakai 12.487+ seller di 38 kota di Indonesia
      </span>
    </div>
    <div style={{ overflow: 'hidden', position: 'relative', maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)' }}>
      <div className="marquee-track">
        {[...Array(2)].flatMap((_, n) =>
          ['Senja Skincare', 'Kopi Tani', 'Atelier 22', 'Rumah Batik Mela', 'Halo Petshop', 'Studio Lumin', 'Bali Bites', 'Folk & Form', 'Bumi Roastery', 'Nara Ceramics']
            .map((b, i) => (
              <span key={`${n}-${i}`} style={{ fontFamily: 'Bricolage Grotesque', fontWeight: 600, fontSize: 22, color: 'var(--ink)', opacity: 0.55, display: 'inline-flex', alignItems: 'center', gap: 16 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--red)', opacity: 0.6 }}/>
                {b}
              </span>
            ))
        )}
      </div>
    </div>
  </section>
);

// =========================================================
// STATS
// =========================================================
const Stats = () => (
  <section className="section-pad-sm">
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: 'var(--line)', borderRadius: 24, overflow: 'hidden', border: '1px solid var(--line)' }}>
        {[
          { v: '12.487', l: 'Toko aktif', sub: '+312 minggu ini' },
          { v: 'Rp 4,2M', l: 'GMV bulan ini', sub: 'tumbuh 24% MoM' },
          { v: '38', l: 'Kota di Indonesia', sub: 'dari Aceh hingga Papua' },
          { v: '99,9%', l: 'Uptime', sub: 'tahun berjalan' },
        ].map((s, i) => (
          <div key={i} style={{ background: 'var(--paper)', padding: '32px 28px' }}>
            <div className="h-section" style={{ fontSize: 44, color: 'var(--ink)' }}>{s.v}</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 6 }}>{s.l}</div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ─── Mobile fixes ─────────────────────────────────────── */
const _sectionsMobileStyle = document.createElement('style');
_sectionsMobileStyle.textContent = `
  /* Hero: hide decorative blobs & floating cards on mobile */
  @media (max-width: 640px) {
    .hero-deco { display: none !important; }
    .hero-float-card { display: none !important; }

    /* Hero visual: shrink min-height so phone isn't huge */
    #top .wrap > div + div { min-height: 360px !important; margin-top: 40px !important; }

    /* Hero domain pill → column layout */
    .hero-pill {
      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;
    }
    .hero-pill-domain {
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 8px;
    }
    .hero-pill-domain input { width: 100% !important; flex: 1 !important; font-size: 15px !important; }
    .hero-pill-btn {
      width: 100% !important;
      border-radius: 12px !important;
      padding: 14px !important;
      font-size: 15px !important;
      justify-content: center !important;
    }
  }
`;
document.head.appendChild(_sectionsMobileStyle);

Object.assign(window, { Nav, Hero, Marquee, Stats });