/* ============ 63MOBIL — landing sections (part 3: social proof, location, faq) ============ */

/* ---------- testimoni ---------- */
function Testimoni() {
  return (
    <section style={{ padding: "80px 0" }}>
      <div className="wrap">
        <SectionHead eyebrow="Kata pembeli" title="Dipercaya keluarga Medan & sekitarnya" sub="Cerita nyata dari pembeli yang sudah bawa pulang mobil idamannya bersama 63 Mobil." center />
        <div className="testi-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 20 }}>
          {window.TESTIMONI.map((t, i) => (
            <div key={i} className="card" style={{ padding: "26px 26px" }}>
              <div style={{ display: "flex", gap: 3 }}>
                {Array.from({ length: t.rating }).map((_, j) => <Icon key={j} name="star" size={18} style={{ color: "#F5A623", fill: "#F5A623" }} />)}
              </div>
              <p style={{ fontSize: 16.5, lineHeight: 1.6, marginTop: 14, color: "var(--ink-2)" }}>"{t.text}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 20, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                <span style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--ink)", color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17 }}>{t.name[0]}</span>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 15 }}>{t.name}</div>
                  <div style={{ color: "var(--muted)", fontSize: 13 }}>{t.area} · {t.car}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- instagram feed ---------- */
function InstagramFeed() {
  return (
    <section style={{ padding: "80px 0", background: "var(--surface)" }}>
      <div className="wrap">
        <SectionHead
          eyebrow="Instagram"
          title="Ikuti update unit terbaru"
          sub="Reels walkaround, unit baru masuk, dan tips beli mobil bekas. Stok cepat berganti — follow biar nggak kehabisan!"
          action={<a className="btn btn-dark" href="https://instagram.com/63mobilsecondmedan" target="_blank" rel="noreferrer"><Icon name="instagram" size={18} /> @63mobilsecondmedan</a>}
        />
        <div className="ig-grid" style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 12 }}>
          {window.IG_POSTS.map((p, i) => (
            <a key={i} href={p.url || "https://instagram.com/63mobilsecondmedan"} target="_blank" rel="noreferrer" style={{ position: "relative", borderRadius: 14, overflow: "hidden", display: "block" }}
              onMouseEnter={(e)=>e.currentTarget.querySelector('.ig-ov').style.opacity=1}
              onMouseLeave={(e)=>e.currentTarget.querySelector('.ig-ov').style.opacity=0}>
              <Photo src={p.src} label={p.label} tinted={i % 2 === 0} ratio="1 / 1" radius="0" />
              <span style={{ position: "absolute", top: 8, right: 8, background: "rgba(22,19,17,.7)", color: "#fff", fontSize: 11, fontWeight: 700, padding: "3px 8px", borderRadius: 6 }}>{p.tag}</span>
              <div className="ig-ov" style={{ position: "absolute", inset: 0, background: "rgba(232,116,30,.82)", color: "#fff", display: "grid", placeItems: "center", opacity: 0, transition: "opacity .2s" }}>
                <Icon name="instagram" size={30} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- lokasi + booking ---------- */
function Lokasi() {
  const [f, setF] = React.useState({ nama: "", hp: "", unit: "", tgl: "" });
  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 BOOKING kunjungan / test drive.\nNama: ${f.nama}\nHP: ${f.hp}\nUnit: ${f.unit}\nTanggal: ${f.tgl}`);

  return (
    <section id="lokasi" style={{ padding: "80px 0", scrollMarginTop: 80 }}>
      <div className="wrap">
        <SectionHead eyebrow="Kunjungi Kami" title="Mampir & test drive di showroom" sub="Lihat langsung kondisi unit, ngobrol santai, dan test drive. Booking dulu biar unit yang kamu incar siap saat datang." />
        <div id="kontak" className="lok-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 24, scrollMarginTop: 80 }}>
          {/* map */}
          <div className="card" style={{ overflow: "hidden", position: "relative" }}>
            <Photo src="assets/instagram/covers/ig-08.jpg" label="Showroom 63 Mobil Medan" ratio="16 / 10" radius="0" />
            <div className="card" style={{ position: "absolute", left: 18, bottom: 18, right: 18, padding: "16px 18px", display: "flex", gap: 14, alignItems: "center", boxShadow: "var(--shadow-lg)" }}>
              <span style={{ width: 46, height: 46, borderRadius: 12, background: "var(--red)", color: "#fff", display: "grid", placeItems: "center", flex:"none" }}><Icon name="pin" size={24} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 16 }}>Showroom 63 Mobil Medan</div>
                <div style={{ color: "var(--muted)", fontSize: 13.5 }}>Jl. Nibung Raya No.101, Medan Petisah</div>
              </div>
              <a className="btn btn-ghost btn-sm" href="https://maps.google.com/?q=Jl.%20Nibung%20Raya%20No.101%20Medan" target="_blank" rel="noreferrer">Rute <Icon name="arrowRight" size={15} /></a>
            </div>
          </div>
          {/* booking */}
          <div className="card" style={{ padding: 28, boxShadow: "var(--shadow-md)" }}>
            {sent ? <FormResult message={msg} /> : (
              <>
                <h3 style={{ fontSize: 21, fontWeight: 800 }}>Booking test drive</h3>
                <p style={{ color: "var(--muted)", fontSize: 14, marginTop: 6 }}>Pilih waktu, kami siapkan unitnya untukmu.</p>
                <div style={{ display: "grid", gap: 14, marginTop: 20 }}>
                  <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 className="field"><label>Unit yang ingin dilihat</label><input className="input" placeholder="cth. Toyota Avanza 2019" value={f.unit} onChange={set("unit")} /></div>
                  <div className="field"><label>Tanggal kunjungan</label><input className="input" type="date" value={f.tgl} onChange={set("tgl")} /></div>
                </div>
                <button className="btn btn-red btn-block btn-lg" style={{ marginTop: 20 }} onClick={()=>setSent(true)}><Icon name="calendar" size={18} /> Booking Sekarang</button>
                <div style={{ display: "flex", gap: 8, marginTop: 14, alignItems: "center", justifyContent: "center", color: "var(--muted)", fontSize: 13 }}>
                  <Icon name="clock" size={15} /> Senin–Sabtu 09.00–18.00 · Minggu 10.00–16.00
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "80px 0", background: "var(--surface)", scrollMarginTop: 80 }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <SectionHead eyebrow="FAQ" title="Pertanyaan yang sering ditanya" center />
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {window.FAQS.map((item, i) => {
            const o = open === i;
            return (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
                <button onClick={() => setOpen(o ? -1 : i)} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, padding: "20px 22px", textAlign: "left" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17.5 }}>{item.q}</span>
                  <span style={{ flex: "none", color: "var(--red)", transition: "transform .2s", transform: o ? "rotate(180deg)" : "none" }}><Icon name="chevronDown" size={22} /></span>
                </button>
                {o && <div style={{ padding: "0 22px 22px", color: "var(--muted)", fontSize: 15.5, lineHeight: 1.65 }} className="fade-up">{item.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- final CTA ---------- */
function FinalCTA() {
  return (
    <section style={{ padding: "10px 0 80px" }}>
      <div className="wrap">
        <div style={{ position: "relative", overflow: "hidden", borderRadius: "var(--r-xl)", background: "var(--red)", color: "#fff", padding: "56px 48px", textAlign: "center" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 16px)" }}></div>
          <div style={{ position: "relative" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(30px,4.6vw,52px)", letterSpacing: "-0.03em" }}>Siap bawa pulang mobil idaman?</h2>
            <p style={{ fontSize: 18, opacity: .9, marginTop: 14, maxWidth: 560, marginInline: "auto" }}>Chat tim kami sekarang — tanya unit, harga, atau simulasi kredit. Dibalas cepat & ramah.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn btn-dark btn-lg" href={window.waLink()} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={19} /> Chat WhatsApp</a>
              <button className="btn btn-ghost on-dark btn-lg" onClick={() => window.__nav("catalog")}>Lihat Semua Stok <Icon name="arrowRight" size={18} /></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimoni, InstagramFeed, Lokasi, FAQ, FinalCTA });