/* global React, ReactDOM */
/* Shared site chrome: Icon, Header, Footer, BookingModal, helpers.
   Exposed on window for every page. */
const NS = window.BlackLuxuryLimoDesignSystem_3e0f4d;
const { useState: useCS, useEffect: useCE } = React;

const PHONE = "(416) 555-0182";
const PHONE_HREF = "tel:+14165550182";

function Icon({ name, size = 18, color, style }) {
  return <i data-lucide={name} style={{ width: size, height: size, color, ...style }}></i>;
}
window.Icon = Icon;

/* ---- shared nav model ---- */
const NAV = [
  { label: "Home", href: "index.html" },
  { label: "Services", href: "services.html" },
  { label: "Fleet", href: "fleet.html" },
  { label: "Rates", href: "rates.html" },
  { label: "Airport", href: "airport-limo.html" },
  { label: "About", href: "about.html" },
  { label: "Contact", href: "contact.html" },
];
window.SITE_PHONE = PHONE;
window.SITE_PHONE_HREF = PHONE_HREF;

/* persist a quote so the Reserve flow can prefill */
function saveQuote(q) {
  try { localStorage.setItem("bll_quote", JSON.stringify(q)); } catch (e) {}
}
function loadQuote() {
  try { return JSON.parse(localStorage.getItem("bll_quote") || "null"); } catch (e) { return null; }
}
window.saveQuote = saveQuote;
window.loadQuote = loadQuote;

function Header({ active }) {
  const { Button } = NS;
  const [open, setOpen] = useCS(false);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(7,9,10,0.72)", backdropFilter: "blur(14px)",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <div style={{
        maxWidth: "var(--container-max)", margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "15px 40px", gap: "24px",
      }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: "13px", textDecoration: "none", flexShrink: 0 }}>
          <img src="assets/logo/badge-256.png" width="46" height="46" alt="Black Luxury Limo" />
          <span style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: "19px", letterSpacing: "0.12em", color: "var(--text-primary)" }}>BLACK&nbsp;LUXURY</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "9px", fontWeight: 600, letterSpacing: "0.34em", textTransform: "uppercase", color: "var(--gold-500)", marginTop: "4px" }}>Limo&nbsp;·&nbsp;Black&nbsp;Car&nbsp;Service</span>
          </span>
        </a>
        <nav className="bll-nav" style={{ display: "flex", alignItems: "center", gap: "22px", flexShrink: 1, flexWrap: "wrap", justifyContent: "center" }}>
          {NAV.map((l) => {
            const isActive = active === l.href;
            return (
              <a key={l.href} href={l.href} style={{
                fontFamily: "var(--font-sans)", fontSize: "13.5px", fontWeight: 500,
                letterSpacing: "0.04em", textDecoration: "none",
                color: isActive ? "var(--gold-400)" : "var(--text-secondary)",
                transition: "color var(--dur-base) var(--ease-out)",
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--gold-400)"}
              onMouseLeave={(e) => e.currentTarget.style.color = isActive ? "var(--gold-400)" : "var(--text-secondary)"}>{l.label}</a>
            );
          })}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: "18px", flexShrink: 0 }}>
          <a className="bll-phone" href={PHONE_HREF} style={{ display: "flex", alignItems: "center", gap: "8px", fontFamily: "var(--font-mono)", fontSize: "14px", color: "var(--gold-400)", textDecoration: "none", letterSpacing: "0.02em", whiteSpace: "nowrap" }}>
            <Icon name="phone" size={15} /> {PHONE}
          </a>
          <a href="reserve.html"><Button variant="primary" size="md">Reserve</Button></a>
          <button className="bll-burger" aria-label="Menu" onClick={() => setOpen(!open)} style={{ display: "none", alignItems: "center", justifyContent: "center", width: "42px", height: "42px", background: "transparent", border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)", color: "var(--gold-400)", cursor: "pointer" }}>
            <Icon name={open ? "x" : "menu"} size={20} />
          </button>
        </div>
      </div>
      {open && (
        <div className="bll-mobile-nav" style={{ borderTop: "1px solid var(--border-subtle)", padding: "12px 40px 20px", display: "flex", flexDirection: "column", gap: "2px", background: "rgba(7,9,10,0.96)" }}>
          {NAV.map((l) => (
            <a key={l.href} href={l.href} style={{ padding: "13px 0", borderBottom: "1px solid var(--border-subtle)", fontFamily: "var(--font-sans)", fontSize: "15px", textDecoration: "none", color: active === l.href ? "var(--gold-400)" : "var(--text-secondary)" }}>{l.label}</a>
          ))}
          <a href={PHONE_HREF} style={{ padding: "14px 0 0", fontFamily: "var(--font-mono)", fontSize: "15px", color: "var(--gold-400)", textDecoration: "none", display: "flex", alignItems: "center", gap: "8px" }}>
            <Icon name="phone" size={15} /> {PHONE}
          </a>
        </div>
      )}
    </header>
  );
}
window.Header = Header;

/* section heading used across pages */
function SectionHead({ eyebrow, title, sub, align = "center" }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "14px", alignItems: align === "center" ? "center" : "flex-start", textAlign: align, maxWidth: align === "center" ? "660px" : "none", margin: align === "center" ? "0 auto" : 0 }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-400)" }}>{eyebrow}</span>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: "44px", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: 0 }}>{title}</h2>
      {sub && <p style={{ fontFamily: "var(--font-sans)", fontSize: "17px", lineHeight: 1.6, color: "var(--text-secondary)", margin: 0 }}>{sub}</p>}
    </div>
  );
}
window.SectionHead = SectionHead;

/* compact page banner for interior pages */
function PageHero({ eyebrow, title, sub, img = "assets/img/city-dusk.jpg", crumbs }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border-subtle)" }}>
      <img src={img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(7,9,10,0.95) 0%, rgba(7,9,10,0.78) 50%, rgba(7,9,10,0.5) 100%)" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-max)", margin: "0 auto", padding: "84px 40px 72px", display: "flex", flexDirection: "column", gap: "16px" }}>
        {crumbs && (
          <div style={{ display: "flex", alignItems: "center", gap: "8px", fontFamily: "var(--font-sans)", fontSize: "12.5px", color: "var(--text-muted)", letterSpacing: "0.04em" }}>
            <a href="index.html" style={{ color: "var(--text-muted)", textDecoration: "none" }}>Home</a>
            <span style={{ color: "var(--gold-600)" }}>·</span>
            <span style={{ color: "var(--text-secondary)" }}>{crumbs}</span>
          </div>
        )}
        {eyebrow && <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-400)" }}>{eyebrow}</span>}
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "56px", lineHeight: 1.05, letterSpacing: "-0.01em", color: "var(--cream-50)", margin: 0, maxWidth: "780px" }}>{title}</h1>
        {sub && <p style={{ fontFamily: "var(--font-sans)", fontSize: "18px", lineHeight: 1.6, color: "var(--beige-200)", margin: 0, maxWidth: "620px" }}>{sub}</p>}
      </div>
    </section>
  );
}
window.PageHero = PageHero;

function Footer() {
  const { Button, TrustBar } = NS;
  return (
    <footer style={{ background: "var(--ink-1000)", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border-subtle)" }}>
        <img src="assets/img/sedan-luggage.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(7,9,10,0.96), rgba(7,9,10,0.6))" }} />
        <div style={{ position: "relative", maxWidth: "var(--container-max)", margin: "0 auto", padding: "64px 40px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "32px", flexWrap: "wrap" }}>
          <div style={{ maxWidth: "520px" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "40px", lineHeight: 1.1, color: "var(--cream-50)", margin: 0 }}>Your car is one tap away.</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "16px", color: "var(--beige-200)", marginTop: "12px" }}>Reserve online in 60 seconds or call our 24/7 dispatch. Instant confirmation, fixed quotes.</p>
          </div>
          <div style={{ display: "flex", gap: "14px", flexWrap: "wrap" }}>
            <a href="reserve.html"><Button variant="primary" size="xl">Reserve Your Car</Button></a>
            <a href={PHONE_HREF} style={{ textDecoration: "none" }}><Button variant="outline" size="xl" iconLeft={<Icon name="phone" size={18} />}>Call 24/7</Button></a>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "48px 40px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: "36px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
            <img src="assets/logo/badge-256.png" width="44" height="44" alt="Black Luxury Limo" />
            <span style={{ fontFamily: "var(--font-display)", fontSize: "17px", letterSpacing: "0.1em", color: "var(--text-primary)" }}>BLACK&nbsp;LUXURY&nbsp;LIMO</span>
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "13.5px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0, maxWidth: "300px" }}>Premium 24/7 black car &amp; airport limo service for Toronto, the GTA, YYZ Pearson and Billy Bishop.</p>
          <TrustBar align="start" items={[
            { icon: <Icon name="shield-check" size={15} />, label: "Licensed & Insured" },
            { icon: <Icon name="badge-check" size={15} />, label: "TLPA Member" },
          ]} />
        </div>
        {[
          { h: "Services", items: [["Airport Transfers", "airport-limo.html"], ["Corporate", "services.html"], ["Weddings", "services.html"], ["Hourly Charter", "services.html"], ["Long-Distance", "services.html"]] },
          { h: "Company", items: [["About", "about.html"], ["Our Fleet", "fleet.html"], ["Rates", "rates.html"], ["Reviews", "index.html#reviews"], ["Contact", "contact.html"]] },
          { h: "Contact", items: [[PHONE, PHONE_HREF], ["book@blackluxurylimo.ca", "mailto:book@blackluxurylimo.ca"], ["Toronto · GTA", "contact.html"], ["24 / 7 Dispatch", "contact.html"]] },
        ].map((col) => (
          <div key={col.h} style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold-500)" }}>{col.h}</div>
            {col.items.map((it) => (
              <a key={it[0]} href={it[1]} style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-secondary)", textDecoration: "none" }}
                onMouseEnter={(e) => e.currentTarget.style.color = "var(--gold-400)"}
                onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-secondary)"}>{it[0]}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid var(--border-subtle)", padding: "20px 40px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "12px", maxWidth: "var(--container-max)", margin: "0 auto", width: "100%", boxSizing: "border-box" }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: "12.5px", color: "var(--text-disabled)" }}>© 2026 Black Luxury Limo · Airport Black Car Service. All rights reserved.</span>
        <span style={{ display: "flex", gap: "18px" }}>
          {["Privacy Policy", "Terms of Service"].map((t) => (
            <a key={t} href="#" style={{ fontFamily: "var(--font-sans)", fontSize: "12.5px", color: "var(--text-disabled)", textDecoration: "none" }}>{t}</a>
          ))}
        </span>
      </div>
    </footer>
  );
}
window.Footer = Footer;

/* image disclaimer note reused near placeholder photography */
function ImageryNote({ style, text }) {
  return (
    <p style={{ fontFamily: "var(--font-sans)", fontSize: "11.5px", color: "var(--text-disabled)", letterSpacing: "0.02em", margin: 0, display: "inline-flex", alignItems: "center", gap: "6px", ...style }}>
      <Icon name="info" size={12} style={{ color: "var(--text-disabled)" }} /> {text || "Representative imagery — not the actual fleet. Real vehicle photos pending."}
    </p>
  );
}
window.ImageryNote = ImageryNote;

/* ---- shared FAQ accordion ---- */
function Accordion({ items }) {
  const [open, setOpen] = useCS(0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ background: "var(--surface-card)", border: `1px solid ${isOpen ? "var(--border-gold)" : "var(--border-subtle)"}`, borderRadius: "var(--r-lg)", overflow: "hidden", transition: "border-color var(--dur-base) var(--ease-out)" }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", padding: "22px 24px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left" }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "19px", color: "var(--text-primary)" }}>{it.q}</span>
              <span style={{ color: "var(--gold-400)", flexShrink: 0, transform: isOpen ? "rotate(180deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}><Icon name="chevron-down" size={20} /></span>
            </button>
            {isOpen && (
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "15px", lineHeight: 1.65, color: "var(--text-secondary)", margin: 0, padding: "0 24px 24px" }}>{it.a}</p>
            )}
          </div>
        );
      })}
    </div>
  );
}
window.Accordion = Accordion;

/* ---- airports we serve: partner logo strip ---- */
function AirportStrip({ title = "Serving Ontario's airports", showReview = true }) {
  const logos = [
    { src: "assets/logo/pearson.png", alt: "Toronto Pearson International Airport", h: 72 },
    { src: "assets/logo/billy-bishop.png", alt: "Billy Bishop Toronto City Airport", h: 34 },
    { src: "assets/logo/waterloo.svg", alt: "Region of Waterloo International Airport", h: 54 },
  ];
  return (
    <section style={{ padding: "56px 40px", background: "var(--bg-base)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="bll-strip" style={{ maxWidth: "var(--container-max)", margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "32px", flexWrap: "wrap" }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--text-muted)", whiteSpace: "nowrap" }}>{title}</span>
        <div className="bll-strip-logos" style={{ display: "flex", alignItems: "center", gap: "clamp(24px, 3.4vw, 48px)", flex: "1 1 auto", justifyContent: "center", flexWrap: "nowrap" }}>
          {logos.map((l) => (
            <img key={l.src} src={l.src} alt={l.alt} style={{ height: l.h + "px", width: "auto", maxWidth: "100%", objectFit: "contain", filter: "grayscale(1) brightness(0) invert(1)", opacity: 0.55 }} />
          ))}
        </div>
        {showReview && (
          <div className="bll-strip-review" style={{ display: "flex", alignItems: "center", gap: "12px", paddingLeft: "32px", borderLeft: "1px solid var(--border-subtle)" }}>
            <img src="assets/logo/tripadvisor.svg" alt="TripAdvisor" style={{ height: "30px", width: "auto", filter: "grayscale(1) brightness(0) invert(1)", opacity: 0.55 }} />
            <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "15px", color: "var(--gold-400)" }}>4.9 ★</span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: "11.5px", color: "var(--text-muted)" }}>1,200+ reviews</span>
            </span>
          </div>
        )}
      </div>
    </section>
  );
}
window.AirportStrip = AirportStrip;

/* ---- quick-quote modal (home hero) ---- */
function BookingModal({ open, onClose, quote }) {
  const { Button, Badge } = NS;
  if (!open) return null;
  const q = quote || {};
  const line = (label, value, mono) => (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "13px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", letterSpacing: "0.02em", textTransform: "uppercase" }}>{label}</span>
      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: "15px", color: "var(--text-primary)", fontWeight: 500, textAlign: "right" }}>{value}</span>
    </div>
  );
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "var(--scrim-heavy)", backdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", padding: "24px" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "480px", maxWidth: "100%", maxHeight: "90vh", overflow: "auto", background: "var(--surface-1)", border: "1px solid var(--border-gold)", borderRadius: "var(--r-xl)", boxShadow: "var(--shadow-xl)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 24px", borderBottom: "1px solid var(--border-subtle)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
            <img src="assets/logo/badge-256.png" width="34" height="34" alt="" />
            <span style={{ fontFamily: "var(--font-display)", fontSize: "18px", letterSpacing: "0.06em", color: "var(--text-primary)" }}>Your Instant Quote</span>
          </div>
          <button onClick={onClose} style={{ background: "transparent", border: "none", color: "var(--text-muted)", cursor: "pointer", display: "inline-flex" }}><Icon name="x" size={20} /></button>
        </div>
        <div style={{ padding: "24px" }}>
          <div style={{ position: "relative", borderRadius: "var(--r-lg)", overflow: "hidden", height: "120px", marginBottom: "20px" }}>
            <img src="assets/img/luxury-suv.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "var(--grad-scrim-bottom)" }} />
            <div style={{ position: "absolute", left: "16px", bottom: "12px" }}><Badge variant="gold">Luxury SUV · Escalade</Badge></div>
          </div>
          {line("From", q.pickup || "YYZ — Pearson T1")}
          {line("To", q.dropoff || "Downtown Toronto")}
          {line("Pickup", (q.date || "Jun 24, 2026") + " · " + (q.time || "6:45 AM"), true)}
          {line("Distance", "27 km · ~32 min", true)}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "18px 0 6px" }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "13px", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-muted)" }}>All-in fare from</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "30px", fontWeight: 600, color: "var(--gold-400)" }}>$92.00</span>
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "12.5px", color: "var(--text-muted)", margin: "0 0 18px" }}>Includes meet &amp; greet, flight tracking, taxes and gratuity. No surge pricing.</p>
          <a href="reserve.html" style={{ textDecoration: "none" }}>
            <Button variant="primary" size="lg" block iconRight={<Icon name="arrow-right" size={18} />}>Reserve This Car</Button>
          </a>
        </div>
      </div>
    </div>
  );
}
window.BookingModal = BookingModal;

/* ---- generic mount with lucide icon hydration ---- */
window.mountPage = function (element, activeHref) {
  function go() {
    if (!window.BlackLuxuryLimoDesignSystem_3e0f4d || !window.React || !window.ReactDOM) { setTimeout(go, 30); return; }
    const root = document.getElementById("root");
    ReactDOM.createRoot(root).render(element);
    let obs, scheduled = false;
    const refresh = () => {
      if (!window.lucide) return;
      if (obs) obs.disconnect();
      window.lucide.createIcons();
      if (obs) obs.observe(root, { childList: true, subtree: true });
    };
    const schedule = () => { if (scheduled) return; scheduled = true; requestAnimationFrame(() => { scheduled = false; refresh(); }); };
    obs = new MutationObserver(schedule);
    obs.observe(root, { childList: true, subtree: true });
    setTimeout(refresh, 80);
  }
  go();
};
