/* ============ 63MOBIL — landing sections (part 1) ============ */

function Hero() {
  const [budget, setBudget] = React.useState("Semua harga");
  const [brand, setBrand] = React.useState("Semua");
  const [body, setBody] = React.useState("Semua");

  const go = () => {
    window.__catalogPreset = { budget, brand, body };
    window.__nav("catalog");
  };

  return (
    <section className="mobile-hero" style={{ position: "relative", background: "var(--ink)", color: "#fff", overflow: "hidden" }}>
      {/* glow accents */}
      <div className="hero-glow" style={{ position: "absolute", top: -160, right: -120, width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,116,30,.5), transparent 65%)", filter: "blur(20px)" }}></div>
      <div className="hero-glow" style={{ position: "absolute", bottom: -200, left: -140, width: 480, height: 480, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,116,30,.24), transparent 68%)", filter: "blur(10px)" }}></div>
      <div style={{ position:"absolute", inset:0, background:"repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px)" }}></div>

      <div className="wrap" style={{ position: "relative", paddingTop: 64, paddingBottom: 56 }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 50, alignItems: "center" }}>
          {/* left */}
          <div className="fade-up">
            <div style={{ display: "inline-flex", alignItems: "center", gap: 9, background: "rgba(255,255,255,.08)", border: "1px solid rgba(255,255,255,.16)", padding: "7px 14px", borderRadius: 999, fontSize: 13, fontWeight: 700 }}>
              <span style={{ display:"flex" }}><Icon name="shield" size={15} style={{ color: "#FFA24D" }} /></span>
              Surat lengkap · BPKB aman · Bisa dicek
            </div>
            <h1 className="hero-title" style={{ fontSize: "clamp(40px, 6vw, 76px)", fontWeight: 900, lineHeight: .98, letterSpacing: "-0.04em", marginTop: 22 }}>
              Mobil bekas<br />berkualitas di<br /><span style={{ color: "var(--red)" }}>Medan.</span>
            </h1>
            <p className="hero-copy" style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.72)", marginTop: 20, maxWidth: 480 }}>
              Ratusan unit terawat, harga jujur, bisa <strong style={{color:"#fff"}}>kredit DP ringan</strong> & <strong style={{color:"#fff"}}>tukar tambah</strong>. Survey dulu, baru deal. Anti zonk!
            </p>
            <div className="hero-actions" style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <button className="btn btn-red btn-lg" onClick={() => window.__nav("catalog")}>Lihat Stok <Icon name="arrowRight" size={18} /></button>
              <a className="btn btn-ghost on-dark btn-lg" href={window.waLink()} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={18} /> Tanya via WA</a>
            </div>
            {/* stats */}
            <div className="hero-stats" style={{ display: "flex", gap: 30, marginTop: 40, flexWrap: "wrap" }}>
              {[["150+", "Unit terjual"], ["4.9★", "Rating pembeli"], ["100%", "Surat aman"]].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 30, letterSpacing: "-0.02em" }}>{n}</div>
                  <div style={{ fontSize: 13.5, color: "rgba(255,255,255,.6)", fontWeight: 600, marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* right — hero car + search */}
          <div className="fade-up hero-media" style={{ animationDelay: ".08s" }}>
            <div style={{ position: "relative" }}>
              <Photo src={window.CARS[0]?.images?.[0]?.src} label="Foto unit unggulan / showroom" tinted ratio="4 / 3" radius="var(--r-xl)" style={{ boxShadow: "var(--shadow-lg)" }}>
                <div style={{ position: "absolute", top: 14, left: 14, display: "flex", gap: 8 }}>
                  <span className="badge badge-hot"><Icon name="sparkle" size={12} /> Best deal minggu ini</span>
                </div>
              </Photo>
              {/* floating cred chip */}
              <div className="card hero-cred" style={{ position: "absolute", bottom: -18, left: -18, padding: "12px 15px", display: "flex", alignItems: "center", gap: 11, boxShadow: "var(--shadow-lg)" }}>
                <span style={{ width: 38, height: 38, borderRadius: 10, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center" }}><Icon name="check" size={20} /></span>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 14, color: "var(--ink)" }}>Garansi mesin</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>Tenang setelah beli</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* quick search bar */}
        <div className="card hero-search" style={{ marginTop: 46, padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: 12, boxShadow: "var(--shadow-lg)" }}>
          <div className="field">
            <label><Icon name="money" size={13} style={{verticalAlign:"-2px",marginRight:5}} />Budget</label>
            <select className="select" value={budget} onChange={(e)=>setBudget(e.target.value)}>
              {["Semua harga","< 150 jt","150–200 jt","200–250 jt","> 250 jt"].map(o=><option key={o}>{o}</option>)}
            </select>
          </div>
          <div className="field">
            <label><Icon name="tag" size={13} style={{verticalAlign:"-2px",marginRight:5}} />Merek</label>
            <select className="select" value={brand} onChange={(e)=>setBrand(e.target.value)}>
              {window.BRANDS.map(o=><option key={o}>{o}</option>)}
            </select>
          </div>
          <div className="field">
            <label><Icon name="seat" size={13} style={{verticalAlign:"-2px",marginRight:5}} />Tipe</label>
            <select className="select" value={body} onChange={(e)=>setBody(e.target.value)}>
              {window.BODIES.map(o=><option key={o}>{o}</option>)}
            </select>
          </div>
          <button className="btn btn-red" style={{ alignSelf: "end", height: 48 }} onClick={go}><Icon name="search" size={18} /> Cari Mobil</button>
        </div>
      </div>
    </section>
  );
}

/* ---------- logos / trust strip ---------- */
function TrustBar() {
  const items = [
    ["shield", "Surat 100% lengkap & aman"],
    ["check", "Unit terawat & teruji"],
    ["money", "Kredit DP ringan / cash"],
    ["refresh", "Tukar tambah dihargai pantas"],
  ];
  return (
    <div style={{ background: "var(--red)", color: "#fff" }}>
      <div className="wrap trust-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, padding: "20px 0" }}>
        {items.map(([ic, t]) => (
          <div className="trust-item" key={t} style={{ display: "flex", alignItems: "center", gap: 11, justifyContent: "center" }}>
            <Icon name={ic} size={22} style={{ flex: "none", opacity:.95 }} />
            <span style={{ fontWeight: 700, fontSize: 14.5 }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- featured cars ---------- */
function FeaturedCars() {
  const cars = window.CARS.filter(c => c.status !== "sold").slice(0, 6);
  return (
    <section style={{ padding: "80px 0" }}>
      <div className="wrap">
        <SectionHead
          eyebrow="Unit pilihan"
          title="Stok ready, siap pakai"
          sub="Unit terbaru yang sudah lolos pengecekan. Klik untuk lihat foto, video, dan spesifikasi lengkap."
          action={<button className="btn btn-ghost" onClick={() => window.__nav("catalog")}>Lihat semua stok <Icon name="arrowRight" size={17} /></button>}
        />
        <div className="cars-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {cars.map((c) => <CarCard key={c.id} car={c} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- why us ---------- */
function WhyUs() {
  const items = [
    ["shield", "Surat lengkap & dijamin aman", "BPKB, STNK, faktur lengkap dan bisa dicek keasliannya. Kami tidak menjual unit bodong atau bermasalah."],
    ["search", "Sudah lolos inspeksi", "Setiap unit diperiksa mesin, kaki-kaki, body, dan kelistrikan. Kamu juga bebas bawa ke bengkel langganan."],
    ["money", "Kredit gampang, DP ringan", "Kerja sama banyak leasing terpercaya. DP mulai 15%, kami bantu sampai approve plus simulasi gratis."],
    ["refresh", "Tukar tambah praktis", "Mobil lama kamu dihargai pantas sesuai pasar, selisihnya bisa dikreditkan. Tukar tanpa ribet."],
    ["chat", "Pelayanan jujur & ramah", "Dijelaskan apa adanya, plus-minus unit. Tidak ada biaya tersembunyi. Banyak pelanggan jadi langganan."],
    ["shield", "Garansi untuk ketenangan", "Garansi mesin & transmisi pada unit tertentu, biar kamu tenang setelah serah terima kunci."],
  ];
  return (
    <section style={{ padding: "80px 0", background: "var(--surface)" }}>
      <div className="wrap">
        <SectionHead eyebrow="Kenapa 63 Mobil" title="Beli mobil bekas tanpa was-was" sub="Kami bangun kepercayaan dari transparansi. Inilah yang bikin pembeli balik lagi & merekomendasikan kami." />
        <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {items.map(([ic, t, d], i) => (
            <div key={i} className="card" style={{ padding: "26px 24px" }}>
              <span style={{ width: 50, height: 50, borderRadius: 13, background: "var(--red-tint)", color: "var(--red)", display: "grid", placeItems: "center" }}><Icon name={ic} size={24} /></span>
              <h3 style={{ fontSize: 19, fontWeight: 800, marginTop: 18, lineHeight: 1.2 }}>{t}</h3>
              <p style={{ color: "var(--muted)", fontSize: 14.5, lineHeight: 1.6, marginTop: 9 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustBar, FeaturedCars, WhyUs });