/* ============ 63MOBIL — header & footer ============ */
const { useState: useStateC, useEffect: useEffectC } = React;

function Header({ view }) {
  const [scrolled, setScrolled] = useStateC(false);
  const [open, setOpen] = useStateC(false);
  useEffectC(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);

  const links = [
    { label: "Beranda", to: () => window.__nav("home") },
    { label: "Stok Mobil", to: () => window.__nav("catalog") },
    { label: "Simulasi Kredit", to: () => window.__goSection("simulasi") },
    { label: "Tukar Tambah", to: () => window.__goSection("tukar") },
    { label: "Jual Mobil", to: () => window.__goSection("jual") },
    { label: "Lokasi", to: () => window.__goSection("lokasi") },
  ];

  return (
    <>
      <header style={{
        position: "sticky", top: 0, zIndex: 80,
        background: "rgba(255,255,255,.94)",
        backdropFilter: "blur(14px)",
        borderBottom: "1px solid " + (scrolled ? "var(--line)" : "rgba(230,233,240,.6)"),
        boxShadow: scrolled ? "var(--shadow-sm)" : "none",
        transition: "all .25s ease",
      }}>
        <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 70, gap: 18 }}>
          <Logo />
          <nav style={{ display: "flex", gap: 4 }} className="nav-desktop">
            {links.map((l) => (
              <button key={l.label} onClick={l.to} style={{
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14.5, color: "var(--ink-2)",
                padding: "9px 13px", borderRadius: 9, transition: "background .15s, color .15s",
              }} onMouseEnter={(e)=>{e.currentTarget.style.background="var(--surface)"; e.currentTarget.style.color="var(--red)";}}
                 onMouseLeave={(e)=>{e.currentTarget.style.background="transparent"; e.currentTarget.style.color="var(--ink-2)";}}>
                {l.label}
              </button>
            ))}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <a className="btn btn-wa btn-sm nav-desktop" href={window.waLink()} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={17} /> {window.WA_DISPLAY}
            </a>
            <button className="nav-mobile" onClick={() => setOpen(true)} style={{ padding: 8, color: "var(--ink)" }} aria-label="Menu">
              <Icon name="menu" size={26} />
            </button>
          </div>
        </div>
      </header>

      {open && (
        <div style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(22,19,17,.5)", backdropFilter: "blur(3px)" }} onClick={() => setOpen(false)}>
          <div style={{ position: "absolute", top: 0, right: 0, bottom: 0, width: "min(82vw, 340px)", background: "#fff", padding: "20px 22px", display: "flex", flexDirection: "column", gap: 6 }} onClick={(e)=>e.stopPropagation()}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
              <Logo />
              <button onClick={() => setOpen(false)} style={{ color: "var(--ink)", padding: 6 }}><Icon name="close" size={24} /></button>
            </div>
            {links.map((l) => (
              <button key={l.label} onClick={() => { setOpen(false); l.to(); }} style={{
                textAlign: "left", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 19, padding: "13px 8px", borderBottom: "1px solid var(--line)", color: "var(--ink)",
              }}>{l.label}</button>
            ))}
            <a className="btn btn-wa btn-block" style={{ marginTop: 18 }} href={window.waLink()} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={18} /> Chat WhatsApp
            </a>
          </div>
        </div>
      )}
    </>
  );
}

function Footer() {
  const cols = [
    { h: "Jelajahi", items: [["Stok Mobil", () => window.__nav("catalog")], ["Simulasi Kredit", () => window.__goSection("simulasi")], ["Tukar Tambah", () => window.__goSection("tukar")], ["Jual Mobil Kamu", () => window.__goSection("jual")]] },
    { h: "Bantuan", items: [["FAQ", () => window.__goSection("faq")], ["Booking Test Drive", () => window.__goSection("kontak")], ["Lokasi Showroom", () => window.__goSection("lokasi")], ["Hubungi Kami", () => window.open(window.waLink(), "_blank")]] },
  ];
  return (
    <footer style={{ background: "var(--ink)", color: "#fff", paddingTop: 64 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.3fr", gap: 40 }} className="footer-grid">
          <div>
            <Logo dark />
            <p style={{ color: "rgba(255,255,255,.6)", fontSize: 14.5, lineHeight: 1.65, marginTop: 16, maxWidth: 300 }}>
              Showroom mobil bekas berkualitas di Medan. Jujur, surat lengkap, bisa kredit & tukar tambah. Beli mobil idaman tanpa ribet.
            </p>
            <a className="btn btn-wa btn-sm" style={{ marginTop: 18 }} href={window.waLink()} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={16} /> {window.WA_DISPLAY}
            </a>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h4 style={{ fontSize: 13, letterSpacing: ".12em", textTransform: "uppercase", color: "#FFA24D", fontWeight: 800 }}>{c.h}</h4>
              <div style={{ display: "flex", flexDirection: "column", gap: 11, marginTop: 16 }}>
                {c.items.map(([t, fn]) => (
                  <button key={t} onClick={fn} style={{ textAlign: "left", color: "rgba(255,255,255,.7)", fontSize: 14.5, fontWeight: 500 }}
                    onMouseEnter={(e)=>e.currentTarget.style.color="#fff"} onMouseLeave={(e)=>e.currentTarget.style.color="rgba(255,255,255,.7)"}>{t}</button>
                ))}
              </div>
            </div>
          ))}
          <div>
            <h4 style={{ fontSize: 13, letterSpacing: ".12em", textTransform: "uppercase", color: "#FFA24D", fontWeight: 800 }}>Showroom</h4>
            <p style={{ color: "rgba(255,255,255,.7)", fontSize: 14.5, lineHeight: 1.6, marginTop: 16 }}>
              Jl. Nibung Raya No.101<br />Medan Petisah, Sumatera Utara
            </p>
            <p style={{ color: "rgba(255,255,255,.7)", fontSize: 14.5, lineHeight: 1.6, marginTop: 12 }}>
              Senin–Sabtu 09.00–18.00<br />Minggu 10.00–16.00
            </p>
            <a href="https://instagram.com/63mobilsecondmedan" target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 16, color: "#fff", fontWeight: 700, fontSize: 14.5 }}>
              <Icon name="instagram" size={18} /> @63mobilsecondmedan
            </a>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,.12)", marginTop: 48, padding: "22px 0 28px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, color: "rgba(255,255,255,.45)", fontSize: 13 }}>
          <span>© 2026 63 Mobil · 63mobil.com</span>
          <span>Mobil bekas Medan — jujur, aman, bergaransi.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });