/* ============ 63MOBIL — shared components ============ */
const { useState, useEffect, useRef } = React;

/* ---------- icon set (simple line icons) ---------- */
function Icon({ name, size = 20, stroke = 2, style }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
  const paths = {
    search: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.2-3.2" /></>,
    phone: <path d="M3 5c0 9 7 16 16 16l2.5-3.2-4.2-2-1.6 1.6a13 13 0 0 1-6.6-6.6L11.2 9 9.2 5 6 3 3 5Z" />,
    pin: <><path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z" /><circle cx="12" cy="10" r="2.4" /></>,
    star: <path d="M12 3l2.6 5.5 6 .8-4.4 4.2 1.1 6L12 16.9 6.7 19.5l1.1-6L3.4 9.3l6-.8L12 3Z" />,
    chevron: <path d="M9 6l6 6-6 6" />,
    chevronDown: <path d="M6 9l6 6 6-6" />,
    menu: <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>,
    close: <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>,
    shield: <><path d="M12 3l7 3v5c0 4.6-3 8.2-7 10-4-1.8-7-5.4-7-10V6l7-3Z" /><path d="M9 12l2 2 4-4" /></>,
    refresh: <><path d="M21 8a9 9 0 0 0-15.6-3.4L3 7" /><path d="M3 4v3h3" /><path d="M3 16a9 9 0 0 0 15.6 3.4L21 17" /><path d="M21 20v-3h-3" /></>,
    tag: <><path d="M3 12V4h8l9 9-8 8-9-9Z" /><circle cx="7.5" cy="7.5" r="1.4" /></>,
    play: <path d="M7 4.5v15l13-7.5-13-7.5Z" />,
    check: <path d="M4 12.5l5 5 11-11" />,
    gauge: <><path d="M12 13l4-4" /><path d="M4.5 18a9 9 0 1 1 15 0" /></>,
    seat: <><path d="M5 18v-2a3 3 0 0 1 3-3h3l2-7h3l-2 9H8" /><path d="M5 18h12" /></>,
    gear: <><path d="M7 7h10" /><path d="M7 7v10" /><path d="M17 7v10" /><circle cx="7" cy="7" r="1.3" /><circle cx="17" cy="7" r="1.3" /><circle cx="7" cy="17" r="1.3" /></>,
    fuel: <><path d="M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16" /><path d="M3 21h14" /><path d="M15 9h2.5a2 2 0 0 1 2 2v6a1.5 1.5 0 0 0 3 0V8l-2.5-2.5" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18" /><path d="M8 3v4" /><path d="M16 3v4" /></>,
    whatsapp: <path d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3Zm4.7 12.3c-.2.6-1.2 1.1-1.7 1.1-.5.1-1 .2-3.2-.7-2.7-1.1-4.4-3.9-4.5-4-.1-.2-1-1.4-1-2.6 0-1.2.6-1.8.9-2 .2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6c-.2.2-.3.3-.1.6.2.3.8 1.3 1.7 2 1.2.9 1.6 1 1.9 1.2.2 0 .4 0 .5-.2l.7-.9c.2-.2.4-.2.6-.1l1.9.9c.2.1.4.2.4.3.1.2.1.8-.1 1.3Z" />,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" /></>,
    filter: <path d="M3 5h18l-7 8v6l-4-2v-4L3 5Z" />,
    money: <><rect x="2.5" y="6" width="19" height="12" rx="2" /><circle cx="12" cy="12" r="2.6" /><path d="M6 9v6M18 9v6" /></>,
    sparkle: <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z" />,
    arrowRight: <path d="M4 12h15M13 6l6 6-6 6" />,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    chat: <path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12Z" />,
    upload: <><path d="M12 16V5" /><path d="M7 10l5-5 5 5" /><path d="M5 19h14" /></>,
    heart: <path d="M12 20s-7-4.5-9.2-9C1.4 8 3 4.5 6.4 4.5c2 0 3.2 1.2 3.6 2 .4-.8 1.6-2 3.6-2 3.4 0 5 3.5 3.6 6.5C19 15.5 12 20 12 20Z" />,
  };
  return <svg {...p}>{paths[name] || null}</svg>;
}

/* ---------- logo ---------- */
function Logo({ dark = false, size = 34 }) {
  const src = dark ? "assets/logo-white.png" : "assets/logo-mark.png";
  const h = dark ? size * 1.5 : size * 1.18;
  return (
    <a href="#" onClick={(e)=>{e.preventDefault(); window.__nav && window.__nav("home");}} style={{ display: "flex", alignItems: "center" }} aria-label="63 Mobil — Beranda">
      <img src={src} alt="63 Mobil" style={{ height: h, width: "auto", display: "block" }} />
    </a>
  );
}

/* ---------- status badge ---------- */
function StatusBadge({ status }) {
  if (status === "ready") return <span className="badge badge-ready"><span className="dot" style={{animation:"ping 1.6s infinite"}}></span>Ready</span>;
  if (status === "booked") return <span className="badge badge-booked"><span className="dot"></span>Booked</span>;
  return <span className="badge badge-sold"><span className="dot"></span>Terjual</span>;
}

/* ---------- photo ---------- */
function Photo({ label, src, alt, tinted = false, ratio = "4 / 3", radius, style, children }) {
  return (
    <div className={"ph" + (tinted ? " tinted" : "") + (src ? " has-img" : "")} style={{ aspectRatio: ratio, width: "100%", borderRadius: radius, ...style }}>
      {src ? (
        <img className="ph-img" src={src} alt={alt || label || ""} loading="eager" decoding="async" />
      ) : (
        <>
          <div className="ph-cam"><Icon name="search" size={34} /></div>
          {label && <span className="ph-label">Foto belum tersedia: {label}</span>}
        </>
      )}
      {children}
    </div>
  );
}

/* ---------- car card ---------- */
function CarCard({ car }) {
  const sold = car.status === "sold";
  return (
    <article className="card car-card" style={{ overflow: "hidden", cursor: "pointer", opacity: sold ? .72 : 1 }}
      onMouseEnter={(e)=>{ e.currentTarget.style.transform="translateY(-5px)"; e.currentTarget.style.boxShadow="var(--shadow-lg)"; e.currentTarget.style.borderColor="var(--line-2)"; }}
      onMouseLeave={(e)=>{ e.currentTarget.style.transform="none"; e.currentTarget.style.boxShadow="var(--shadow-sm)"; e.currentTarget.style.borderColor="var(--line)"; }}
      onClick={()=> window.__nav("detail", car.id)}>
      <div style={{ position: "relative" }}>
        <Photo src={car.images && car.images[0] && car.images[0].src} label={car.brand + " " + car.model + " " + car.year} tinted={car.hot} ratio="16 / 11" radius="0" />
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", gap: 7 }}>
          <StatusBadge status={car.status} />
          {car.hot && !sold && <span className="badge badge-hot"><Icon name="sparkle" size={12} />Best deal</span>}
        </div>
        {car.video && (
          <span style={{ position:"absolute", bottom:12, right:12, display:"inline-flex", alignItems:"center", gap:6,
            background:"rgba(22,19,17,.78)", color:"#fff", fontSize:12, fontWeight:700, padding:"6px 11px", borderRadius:999, backdropFilter:"blur(4px)" }}>
            <Icon name="play" size={12} /> Video
          </span>
        )}
      </div>
      <div style={{ padding: "16px 17px 18px" }}>
        <div className="car-meta" style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "var(--muted)", fontWeight: 600 }}>
          <span>{car.body}</span><span>•</span><span>{car.transmission}</span><span>•</span><span>{window.kmShort(car)}</span>
        </div>
        <h3 className="car-title" style={{ fontSize: 19.5, fontWeight: 800, margin: "7px 0 0", lineHeight: 1.12 }}>
          {car.brand} {car.model} <span style={{ color: "var(--muted)", fontWeight: 700 }}>{car.variant}</span>
        </h3>
        <div className="car-price-row" style={{ display:"flex", alignItems:"baseline", gap:8, marginTop:13 }}>
          <span className="car-price" style={{ fontFamily:"var(--font-display)", fontWeight:900, fontSize:24, letterSpacing:"-0.02em" }}>{window.priceText(car)}</span>
          <span style={{ fontSize:12.5, color:"var(--muted)", fontWeight:600 }}>· {car.year}</span>
        </div>
        <div className="car-finance" style={{ display:"flex", gap:8, marginTop:12, flexWrap:"wrap" }}>
          <span style={{ fontSize:12.5, fontWeight:700, color:"var(--ink-2)", background:"var(--surface)", padding:"6px 10px", borderRadius:8 }}>
            {window.dpText(car)}
          </span>
          <span style={{ fontSize:12.5, fontWeight:700, color:"var(--red)", background:"var(--red-tint)", padding:"6px 10px", borderRadius:8 }}>
            {window.monthlyText(car)}
          </span>
        </div>
      </div>
    </article>
  );
}

/* ---------- floating WhatsApp ---------- */
function WAFloat() {
  return (
    <a className="wa-float" href={window.waLink("Halo 63 Mobil, saya lihat web 63mobil.com. Boleh info unit yang ready?")} target="_blank" rel="noreferrer">
      <span className="pulse"><Icon name="whatsapp" size={22} /></span>
      <span className="lbl">Chat Sekarang</span>
    </a>
  );
}

/* ---------- section heading ---------- */
function SectionHead({ eyebrow, title, sub, dark = false, center = false, action }) {
  return (
    <div style={{ display:"flex", alignItems:"flex-end", justifyContent:"space-between", gap:24, flexWrap:"wrap", marginBottom:34, textAlign: center ? "center":"left", flexDirection: center? "column":"row" }}>
      <div style={{ maxWidth: center? "none":640, margin: center? "0 auto":0 }}>
        {eyebrow && <div className={"eyebrow" + (dark?" on-dark":"")}><span style={{width:18,height:2,background:"currentColor",display:"inline-block"}}></span>{eyebrow}</div>}
        <h2 className="section-title" style={{ marginTop:14, color: dark?"#fff":"var(--ink)" }}>{title}</h2>
        {sub && <p className="section-sub" style={{ marginTop:14, color: dark? "rgba(255,255,255,.7)":"var(--muted)", marginLeft: center?"auto":0, marginRight:center?"auto":0 }}>{sub}</p>}
      </div>
      {action}
    </div>
  );
}

Object.assign(window, { Icon, Logo, StatusBadge, Photo, CarCard, WAFloat, SectionHead });