/* ============ 63MOBIL — landing sections (part 2: tools & forms) ============ */

/* ---------- credit simulator ---------- */
function Simulasi() {
  const cars = window.CARS.filter(c => c.status !== "sold" && window.hasPrice(c));
  const [carId, setCarId] = React.useState(cars[0]?.id || "");
  const car = cars.find(c => c.id === carId) || cars[0];
  const [dpPct, setDpPct] = React.useState(20);
  const [tenor, setTenor] = React.useState(4);

  if (!car) return null;

  const rate = 0.055; // flat per tahun (estimasi)
  const dp = Math.round(car.price * dpPct / 100);
  const pokok = car.price - dp;
  const bunga = pokok * rate * tenor;
  const total = pokok + bunga;
  const angsuran = Math.round(total / (tenor * 12));

  const msg = `Halo 63 Mobil, saya mau simulasi kredit:\n- Unit: ${car.brand} ${car.model} ${car.variant} ${car.year}\n- Harga: ${window.rupiah(car.price)}\n- DP: ${window.rupiah(dp)} (${dpPct}%)\n- Tenor: ${tenor} tahun\n- Estimasi angsuran: ${window.rupiah(angsuran)}/bln\nMohon info ketersediaan & syaratnya ya.`;

  return (
    <section id="simulasi" style={{ padding: "80px 0", background: "var(--ink)", color: "#fff", scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead dark eyebrow="Simulasi Kredit" title="Hitung cicilan dalam 10 detik" sub="Geser DP dan pilih tenor untuk lihat estimasi angsuran per bulan. Tinggal kirim ke WhatsApp, kami bantu sampai approve." />
        <div className="sim-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 26, alignItems: "stretch" }}>
          {/* controls */}
          <div style={{ background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.12)", borderRadius: "var(--r-lg)", padding: 28 }}>
            <div className="field" style={{ marginBottom: 22 }}>
              <label style={{ color: "rgba(255,255,255,.8)" }}>Pilih unit</label>
              <select className="select" style={{ background: "rgba(255,255,255,.07)", color: "#fff", borderColor: "rgba(255,255,255,.18)" }} value={carId} onChange={(e)=>setCarId(e.target.value)}>
                {cars.map(c => <option key={c.id} value={c.id} style={{color:"#000"}}>{c.brand} {c.model} {c.variant} {c.year} — {window.rupiah(c.price)}</option>)}
              </select>
            </div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <span style={{ fontWeight: 700, fontSize: 14, color: "rgba(255,255,255,.8)" }}>Uang muka (DP)</span>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, color: "#FFA24D" }}>{dpPct}% · {window.rupiah(dp)}</span>
              </div>
              <input type="range" min="15" max="60" step="5" value={dpPct} onChange={(e)=>setDpPct(+e.target.value)} style={{ width: "100%", accentColor: "var(--red)" }} />
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, color: "rgba(255,255,255,.8)", marginBottom: 10 }}>Tenor (lama cicilan)</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {[1,2,3,4,5].map(t => (
                  <button key={t} onClick={()=>setTenor(t)} style={{
                    flex: 1, minWidth: 56, padding: "12px 0", borderRadius: 10, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 15,
                    background: tenor===t ? "var(--red)" : "rgba(255,255,255,.07)", color: "#fff",
                    border: "1px solid " + (tenor===t ? "var(--red)" : "rgba(255,255,255,.16)"), transition: "all .15s",
                  }}>{t} thn</button>
                ))}
              </div>
            </div>
          </div>
          {/* result */}
          <div style={{ background: "var(--red)", borderRadius: "var(--r-lg)", padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between", boxShadow: "var(--shadow-red)" }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, opacity: .85 }}>Estimasi angsuran per bulan</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(40px,6vw,62px)", letterSpacing: "-0.03em", lineHeight: 1, marginTop: 8 }}>
                {window.rupiah(angsuran)}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 26 }}>
                {[["Harga unit", window.rupiah(car.price)], ["Uang muka", window.rupiah(dp)], ["Pokok kredit", window.rupiah(pokok)], ["Tenor", tenor + " tahun"]].map(([l,v]) => (
                  <div key={l} style={{ background: "rgba(255,255,255,.15)", borderRadius: 12, padding: "12px 14px" }}>
                    <div style={{ fontSize: 12, opacity: .8, fontWeight: 600 }}>{l}</div>
                    <div style={{ fontWeight: 800, fontSize: 16, marginTop: 3 }}>{v}</div>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: 12, opacity: .8, marginTop: 16, lineHeight: 1.5 }}>*Estimasi simulasi flat. Angka final mengikuti persetujuan & promo leasing.</p>
            </div>
            <a className="btn btn-dark btn-block btn-lg" style={{ marginTop: 22 }} href={window.waLink(msg)} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={19} /> Ajukan via WhatsApp
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- reusable mini form helper ---------- */
function FormResult({ message }) {
  return (
    <div style={{ textAlign: "center", padding: "10px 0" }}>
      <span style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", margin: "0 auto" }}><Icon name="check" size={30} /></span>
      <h3 style={{ fontSize: 22, fontWeight: 800, marginTop: 16 }}>Data tersimpan!</h3>
      <p style={{ color: "var(--muted)", fontSize: 15, marginTop: 8, maxWidth: 320, marginInline: "auto" }}>Lanjutkan kirim ke WhatsApp supaya tim kami langsung memprosesnya untuk kamu.</p>
      <a className="btn btn-wa btn-lg" style={{ marginTop: 18 }} href={message} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={19} /> Kirim ke WhatsApp</a>
    </div>
  );
}

/* ---------- tukar tambah ---------- */
function TukarTambah() {
  const [f, setF] = React.useState({ merek: "", tahun: "", incar: "", nama: "", hp: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const msg = window.waLink(`Halo 63 Mobil, saya mau TUKAR TAMBAH.\nMobil saya: ${f.merek} ${f.tahun}\nIncar unit: ${f.incar}\nNama: ${f.nama}\nHP: ${f.hp}`);

  return (
    <section id="tukar" style={{ padding: "80px 0", scrollMarginTop: 80 }}>
      <div className="wrap">
        <div className="tt-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 44, alignItems: "center" }}>
          <div>
            <div className="eyebrow"><span style={{width:18,height:2,background:"currentColor",display:"inline-block"}}></span>Tukar Tambah</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>Tukar mobil lama,<br />bawa pulang yang baru</h2>
            <p className="section-sub" style={{ marginTop: 16 }}>Mobil lama kamu kami hargai pantas sesuai kondisi & harga pasar Medan. Selisihnya bisa dibayar cash atau dikreditkan. Prosesnya cepat & transparan.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 26 }}>
              {[["tag","Penawaran harga jujur sesuai pasar"],["clock","Estimasi cepat, langsung dari WhatsApp"],["refresh","Selisih bisa cash atau kredit"]].map(([ic,t])=>(
                <div key={t} style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: "var(--red-tint)", color: "var(--red)", display: "grid", placeItems: "center", flex:"none" }}><Icon name={ic} size={20} /></span>
                  <span style={{ fontWeight: 600, fontSize: 15.5 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 28, boxShadow: "var(--shadow-md)" }}>
            {sent ? <FormResult message={msg} /> : (
              <>
                <h3 style={{ fontSize: 21, fontWeight: 800 }}>Cek estimasi tukar tambah</h3>
                <p style={{ color: "var(--muted)", fontSize: 14, marginTop: 6 }}>Isi data singkat, gratis tanpa komitmen.</p>
                <div className="lead-form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 20 }}>
                  <div className="field"><label>Merek & model mobil lama</label><input className="input" placeholder="cth. Honda Brio" value={f.merek} onChange={set("merek")} /></div>
                  <div className="field"><label>Tahun</label><input className="input" placeholder="cth. 2018" value={f.tahun} onChange={set("tahun")} /></div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}><label>Unit yang diincar di 63 Mobil</label><input className="input" placeholder="cth. Toyota Rush 2020" value={f.incar} onChange={set("incar")} /></div>
                  <div className="field"><label>Nama</label><input className="input" placeholder="Nama kamu" value={f.nama} onChange={set("nama")} /></div>
                  <div className="field"><label>No. HP / WA</label><input className="input" placeholder="08xxx" value={f.hp} onChange={set("hp")} /></div>
                </div>
                <button className="btn btn-red btn-block btn-lg" style={{ marginTop: 20 }} onClick={()=>setSent(true)}><Icon name="refresh" size={18} /> Cek Estimasi Sekarang</button>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- jual mobil ---------- */
function JualMobil() {
  const [f, setF] = React.useState({ merek: "", tahun: "", km: "", harga: "", nama: "", hp: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const msg = window.waLink(`Halo 63 Mobil, saya mau JUAL MOBIL.\nMobil: ${f.merek} ${f.tahun}\nKM: ${f.km}\nHarga harapan: ${f.harga}\nNama: ${f.nama}\nHP: ${f.hp}`);

  return (
    <section id="jual" style={{ padding: "80px 0", background: "var(--surface)", scrollMarginTop: 80 }}>
      <div className="wrap">
        <div className="tt-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 44, alignItems: "center" }}>
          <div className="card" style={{ padding: 28, boxShadow: "var(--shadow-md)", order: 1 }}>
            {sent ? <FormResult message={msg} /> : (
              <>
                <h3 style={{ fontSize: 21, fontWeight: 800 }}>Jual mobil kamu ke kami</h3>
                <p style={{ color: "var(--muted)", fontSize: 14, marginTop: 6 }}>Dibeli cepat, dibayar tunai, tanpa repot pasang iklan.</p>
                <div className="lead-form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 20 }}>
                  <div className="field" style={{ gridColumn: "1 / -1" }}><label>Merek & model</label><input className="input" placeholder="cth. Toyota Avanza" value={f.merek} onChange={set("merek")} /></div>
                  <div className="field"><label>Tahun</label><input className="input" placeholder="cth. 2019" value={f.tahun} onChange={set("tahun")} /></div>
                  <div className="field"><label>Kilometer</label><input className="input" placeholder="cth. 60.000" value={f.km} onChange={set("km")} /></div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}><label>Harga harapan (opsional)</label><input className="input" placeholder="cth. 160 jt" value={f.harga} onChange={set("harga")} /></div>
                  <div className="field"><label>Nama</label><input className="input" placeholder="Nama kamu" value={f.nama} onChange={set("nama")} /></div>
                  <div className="field"><label>No. HP / WA</label><input className="input" placeholder="08xxx" value={f.hp} onChange={set("hp")} /></div>
                </div>
                <button className="btn btn-dark btn-block btn-lg" style={{ marginTop: 20 }} onClick={()=>setSent(true)}><Icon name="money" size={18} /> Minta Penawaran</button>
              </>
            )}
          </div>
          <div style={{ order: 2 }}>
            <div className="eyebrow"><span style={{width:18,height:2,background:"currentColor",display:"inline-block"}}></span>Jual Mobil</div>
            <h2 className="section-title" style={{ marginTop: 14 }}>Mau jual mobil?<br />Kami beli cepat & tunai</h2>
            <p className="section-sub" style={{ marginTop: 16 }}>Nggak perlu repot pasang iklan dan ladenin penawar iseng. Kirim data mobil kamu, kami kasih penawaran harga, deal — langsung dibayar.</p>
            <div className="feature-mini-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 26 }}>
              {[["clock","Penawaran cepat","Estimasi harga hari itu juga"],["money","Dibayar tunai","Aman, langsung cair"],["shield","Urusan surat dibantu","Balik nama diurus tim kami"],["check","Tanpa biaya tersembunyi","Transparan dari awal"]].map(([ic,t,d])=>(
                <div key={t} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 14, padding: "16px 16px" }}>
                  <Icon name={ic} size={22} style={{ color: "var(--red)" }} />
                  <div style={{ fontWeight: 800, fontSize: 15, marginTop: 10 }}>{t}</div>
                  <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 3 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Simulasi, TukarTambah, JualMobil });