/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// ─── Iconography ──────────────────────────────────────────────────────────
// Simple stroke-only icons; matches the technical/precise aesthetic.
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    arrow:    <><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></>,
    arrowDl:  <><path d="M7 17 17 7"/><path d="M17 17V7H7"/></>,
    close:    <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    chevron:  <><path d="m6 9 6 6 6-6"/></>,
    plus:     <><path d="M5 12h14"/><path d="M12 5v14"/></>,
    minus:    <><path d="M5 12h14"/></>,
    check:    <><path d="M20 6 9 17l-5-5"/></>,
    phone:    <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    whatsapp: <><path d="M16.5 13.5c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-.9 1.2-.3.2-.6 0-1.2-.5-2.3-1.4c-.8-.7-1.4-1.6-1.6-1.9s0-.4.1-.6c.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5s0-.4 0-.5c0-.2-.7-1.7-1-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.4 1.1 2.8 1.2 3 2.1 3.2 5.1 4.4c1.8.7 2.5.8 3.3.7.5-.1 1.6-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/><path d="M20 4a10 10 0 0 0-16 12L3 21l5-1a10 10 0 0 0 12-16z"/></>,
    pin:      <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></>,
    clock:    <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    shield:   <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
    bolt:     <><path d="m13 2-9 12h7l-1 8 9-12h-7l1-8z"/></>,
    seats:    <><path d="M5 21V11a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10"/><path d="M3 21h18"/><path d="M7 9V5a3 3 0 0 1 6 0v4"/></>,
    gear:     <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 0 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 0 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3 1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 0 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8 1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></>,
    fuel:     <><path d="M3 22h12"/><path d="M4 9V4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v18"/><path d="M14 8h2a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h0v-9l-3-3"/></>,
    door:     <><path d="M13 4h3a2 2 0 0 1 2 2v14H5V6a2 2 0 0 1 2-2h3"/><path d="M11 2v20"/><circle cx="15" cy="13" r=".5" fill="currentColor"/></>,
    star:     <path d="m12 2 3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="currentColor"/>,
    award:    <><circle cx="12" cy="8" r="6"/><path d="M9 14 7.5 22 12 19l4.5 3L15 14"/></>,
    search:   <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    filter:   <><path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></>,
    cal:      <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></>,
    user:     <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    car:      <><path d="M5 17h14M3 13l2-6h14l2 6M3 13v5h2M21 13v5h-2M5 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM19 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></>,
    grid:     <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    list:     <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
    ext:      <><path d="M7 17 17 7"/><path d="M7 7h10v10"/></>,
    play:     <path d="M8 5v14l11-7z" fill="currentColor"/>
  };
  return <svg {...props} aria-hidden="true">{paths[name]}</svg>;
};
window.Icon = Icon;

// ─── Brand / Logo ─────────────────────────────────────────────────────────
const Logo = ({ height = 22 }) => (
  <a href="#/" onClick={(e) => { e.preventDefault(); window.go("home"); }} className="logo" style={{ display:"inline-flex", alignItems:"center", gap:10, height, textDecoration:"none" }}>
    <span style={{ display:"inline-flex", width: height, height, borderRadius: 6, background:"var(--primary)", color:"#0E0F12", alignItems:"center", justifyContent:"center", fontFamily:"var(--font-display)", fontWeight: 800, fontSize: height*0.62, letterSpacing:-0.5 }}>O</span>
    <span style={{ fontFamily:"var(--font-display)", fontWeight: 700, letterSpacing: 1.6, fontSize: height*0.7, color:"var(--text)" }}>
      OCTANE<span style={{ color:"var(--primary)" }}>.</span>RENT
    </span>
  </a>
);
window.Logo = Logo;

// ─── Chip / Pill ──────────────────────────────────────────────────────────
const Chip = ({ children, tone = "default", icon, size = "md" }) => {
  const tones = {
    default: { bg:"rgba(255,255,255,0.04)", fg:"var(--text)", bd:"var(--border)" },
    primary: { bg:"rgba(225,108,42,0.12)", fg:"var(--primary)", bd:"rgba(225,108,42,0.45)" },
    ghost:   { bg:"transparent", fg:"var(--muted)", bd:"var(--border)" },
    solid:   { bg:"var(--primary)", fg:"#0E0F12", bd:"var(--primary)" },
    paper:   { bg:"#fff", fg:"#0E0F12", bd:"#fff" }
  }[tone];
  const sizing = size === "sm" ? { fontSize: 11, padding:"4px 8px" } : { fontSize: 12, padding:"6px 10px" };
  return (
    <span className="chip" style={{ display:"inline-flex", alignItems:"center", gap: 6, ...sizing, borderRadius: 999, border:`1px solid ${tones.bd}`, background: tones.bg, color: tones.fg, fontWeight: 600, letterSpacing: 0.4, textTransform:"uppercase", whiteSpace:"nowrap" }}>
      {icon && <Icon name={icon} size={12}/>}
      {children}
    </span>
  );
};
window.Chip = Chip;

// ─── Button ───────────────────────────────────────────────────────────────
const Btn = ({ children, onClick, variant = "primary", icon, iconRight, size = "md", as = "button", href, full, type, style }) => {
  const sizing = {
    sm: { padding:"8px 14px", fontSize: 12, gap: 6 },
    md: { padding:"12px 18px", fontSize: 13, gap: 8 },
    lg: { padding:"16px 24px", fontSize: 14, gap: 10 }
  }[size];
  const variants = {
    primary: { bg:"var(--primary)", fg:"#0E0F12", bd:"var(--primary)", hover:"var(--secondary)" },
    ghost:   { bg:"transparent", fg:"var(--text)", bd:"var(--border)", hover:"rgba(255,255,255,0.06)" },
    dark:    { bg:"var(--surface-2)", fg:"var(--text)", bd:"var(--border)", hover:"var(--surface)" },
    whatsapp:{ bg:"#25D366", fg:"#0E0F12", bd:"#25D366", hover:"#1fb957" },
    outline: { bg:"transparent", fg:"var(--primary)", bd:"var(--primary)", hover:"rgba(225,108,42,0.08)" }
  };
  const v = variants[variant];
  const [hover, setHover] = useState(false);
  const css = {
    display:"inline-flex", alignItems:"center", justifyContent:"center", ...sizing,
    fontFamily:"var(--font-display)", fontWeight: 700, letterSpacing: 1, textTransform:"uppercase",
    border:`1px solid ${v.bd}`, background: hover ? v.hover : v.bg, color: v.fg, borderRadius: 4,
    cursor:"pointer", textDecoration:"none", width: full ? "100%" : "auto", transition:"all .15s ease",
    ...style
  };
  const inner = <>{icon && <Icon name={icon} size={14}/>}<span>{children}</span>{iconRight && <Icon name={iconRight} size={14}/>}</>;
  if (as === "a" || href) return <a href={href} onClick={onClick} style={css} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} target={href?.startsWith("http") || href?.startsWith("tel") || href?.startsWith("mailto") ? "_blank" : undefined} rel="noopener">{inner}</a>;
  return <button type={type || "button"} onClick={onClick} style={css} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>{inner}</button>;
};
window.Btn = Btn;

// ─── Price helper ─────────────────────────────────────────────────────────
const Price = ({ value, size = "md", muted }) => {
  const sizes = { sm: 14, md: 18, lg: 28, xl: 40 };
  if (value == null) {
    return <span style={{ fontFamily:"var(--font-display)", fontWeight: 600, fontSize: sizes[size]*0.7, color: muted ? "var(--muted)" : "var(--text)", textTransform:"uppercase", letterSpacing: 1 }}>On request</span>;
  }
  return (
    <span style={{ display:"inline-flex", alignItems:"baseline", gap: 4, color:"var(--text)" }}>
      <span style={{ fontSize: sizes[size]*0.55, color:"var(--muted)", fontWeight: 500 }}>FROM</span>
      <span style={{ fontFamily:"var(--font-display)", fontWeight: 700, fontSize: sizes[size], letterSpacing:-0.5, fontVariantNumeric:"tabular-nums" }}>{value.toLocaleString()}</span>
      <span style={{ fontSize: sizes[size]*0.5, color:"var(--muted)", fontWeight: 500 }}>AED / day</span>
    </span>
  );
};
window.Price = Price;

// ─── Vehicle Card ─────────────────────────────────────────────────────────
const VehicleCard = ({ v, onSelect, density = "comfortable" }) => {
  const [hover, setHover] = useState(false);
  const padding = density === "compact" ? 16 : 20;
  return (
    <article
      onClick={() => onSelect(v)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background:"var(--surface)", border:"1px solid var(--border)", borderRadius: 10,
        overflow:"hidden", cursor:"pointer", display:"flex", flexDirection:"column",
        transition:"transform .25s ease, border-color .25s ease",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        borderColor: hover ? "var(--primary)" : "var(--border)"
      }}
    >
      <div style={{ position:"relative", aspectRatio: "3/2", overflow:"hidden", background:"#000" }}>
        <img src={v.image} alt={`${v.make} ${v.model}`} style={{ width:"100%", height:"100%", objectFit:"cover", transition:"transform .6s ease", transform: hover ? "scale(1.05)" : "scale(1)" }}/>
        {/* corner badge */}
        <div style={{ position:"absolute", top: 12, left: 12, display:"flex", gap: 6, flexWrap:"wrap" }}>
          {v.tags.slice(0,1).map(t => <Chip key={t} tone="primary" size="sm">{t}</Chip>)}
        </div>
        <div style={{ position:"absolute", top: 12, right: 12 }}>
          <Chip tone="ghost" size="sm" icon="check">No deposit</Chip>
        </div>
        {/* category strip */}
        <div style={{ position:"absolute", bottom: 0, left: 0, right: 0, padding:"12px 16px", background:"linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%)", display:"flex", justifyContent:"space-between", alignItems:"flex-end" }}>
          <div style={{ display:"flex", gap: 8, color:"var(--muted)", fontSize: 11, fontWeight: 600, letterSpacing: 1, textTransform:"uppercase" }}>
            <span>{v.category}</span><span style={{opacity:0.4}}>·</span><span>{v.body}</span>
          </div>
        </div>
      </div>
      <div style={{ padding, display:"flex", flexDirection:"column", gap: 12, flex: 1 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color:"var(--muted)", letterSpacing: 1.5, textTransform:"uppercase", marginBottom: 4 }}>{v.make}</div>
          <h3 style={{ margin:0, fontFamily:"var(--font-display)", fontWeight: 600, fontSize: 20, lineHeight: 1.15, letterSpacing:-0.3 }}>{v.model}</h3>
        </div>
        <div style={{ display:"flex", gap: 14, fontSize: 12, color:"var(--muted)", marginTop:"auto" }}>
          <span style={{display:"inline-flex", alignItems:"center", gap: 5}}><Icon name="seats" size={13}/>{v.seats}</span>
          <span style={{display:"inline-flex", alignItems:"center", gap: 5}}><Icon name="gear" size={13}/>{v.transmission}</span>
          <span style={{display:"inline-flex", alignItems:"center", gap: 5}}><Icon name="fuel" size={13}/>{v.fuel}</span>
        </div>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", paddingTop: 14, borderTop:"1px solid var(--border)" }}>
          <Price value={v.price} size="md"/>
          <span style={{ display:"inline-flex", alignItems:"center", gap: 4, color: hover ? "var(--primary)" : "var(--muted)", fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform:"uppercase", transition:"color .2s ease" }}>
            Book <Icon name="arrow" size={12}/>
          </span>
        </div>
      </div>
    </article>
  );
};
window.VehicleCard = VehicleCard;

// ─── Section header ──────────────────────────────────────────────────────
const SectionHead = ({ kicker, title, sub, action, align = "left" }) => (
  <div style={{ display:"flex", justifyContent: align === "center" ? "center" : "space-between", alignItems:"flex-end", flexWrap:"wrap", gap: 24, marginBottom: 36, textAlign: align }}>
    <div style={{ maxWidth: 640 }}>
      {kicker && <div style={{ display:"inline-flex", alignItems:"center", gap: 8, color:"var(--primary)", fontSize: 11, fontWeight: 700, letterSpacing: 2.5, textTransform:"uppercase", marginBottom: 14 }}><span style={{ display:"inline-block", width: 24, height: 1, background:"var(--primary)" }}/>{kicker}</div>}
      <h2 style={{ margin: 0, fontFamily:"var(--font-display)", fontWeight: 600, fontSize: "clamp(28px, 4vw, 44px)", lineHeight: 1.05, letterSpacing:-0.8 }}>{title}</h2>
      {sub && <p style={{ marginTop: 14, color:"var(--muted)", fontSize: 15, lineHeight: 1.6, maxWidth: 580 }}>{sub}</p>}
    </div>
    {action}
  </div>
);
window.SectionHead = SectionHead;

// ─── Sticky WhatsApp / Call FAB ──────────────────────────────────────────
const FloatRail = () => (
  <div style={{ position:"fixed", right: 20, bottom: 20, display:"flex", flexDirection:"column", gap: 10, zIndex: 80 }}>
    <a href="https://wa.me/971527269337" target="_blank" rel="noopener"
       style={{ width: 52, height: 52, borderRadius: 26, background:"#25D366", color:"#0E0F12", display:"flex", alignItems:"center", justifyContent:"center", boxShadow:"0 8px 24px rgba(37,211,102,0.35)", textDecoration:"none" }}
       aria-label="WhatsApp">
      <Icon name="whatsapp" size={24}/>
    </a>
    <a href="tel:+97142536700"
       style={{ width: 52, height: 52, borderRadius: 26, background:"var(--surface-2)", border:"1px solid var(--border)", color:"var(--text)", display:"flex", alignItems:"center", justifyContent:"center", textDecoration:"none" }}
       aria-label="Call">
      <Icon name="phone" size={22}/>
    </a>
  </div>
);
window.FloatRail = FloatRail;

Object.assign(window, { Icon, Logo, Chip, Btn, Price, VehicleCard, SectionHead, FloatRail });