/* shell.jsx — header, footer, demo banner, logo, language switcher */

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ─── Logo wordmark ────────────────────────────────────────────────
// Brief calls for a redrawn SVG; placeholder text mark.
function Logo({ size = 18, className = "" }) {
  return (
    <span className={"logo-mark " + className} style={{ fontSize: size }}>
      <span>F</span>
      <span className="one">1</span>
      <span>RST&nbsp;MOTORS</span>
    </span>
  );
}

// ─── Language switcher ────────────────────────────────────────────
const LANGS = [
  { code: "en", label: "EN", name: "English" },
  { code: "ar", label: "ع", name: "العربية" },
  { code: "ru", label: "RU", name: "Русский" },
  { code: "zh", label: "中", name: "中文" },
];

function LangSwitcher({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    const f = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", f);
    return () => document.removeEventListener("mousedown", f);
  }, [open]);
  const cur = LANGS.find((l) => l.code === value) || LANGS[0];
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        className="btn-xs"
        onClick={() => setOpen(!open)}
        style={{
          border: "1px solid var(--line)",
          borderRadius: 999,
          padding: "6px 10px",
          background: "transparent",
          color: "var(--silver)",
          cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 6,
          fontFamily: "var(--mono)",
          fontSize: 11,
          letterSpacing: "0.06em",
        }}
        aria-label="Language"
      >
        <span style={{ display: "inline-block", width: 14, textAlign: "center" }}>{cur.label}</span>
        <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 2.5L4 5.5L7 2.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/></svg>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 8px)", right: 0,
          background: "var(--ink)",
          border: "1px solid var(--line)",
          borderRadius: 10,
          padding: 6,
          minWidth: 140,
          zIndex: 50,
          boxShadow: "0 12px 40px rgba(0,0,0,0.4)",
        }}>
          {LANGS.map((l) => (
            <button key={l.code}
              onClick={() => { onChange(l.code); setOpen(false); }}
              style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                width: "100%", padding: "8px 10px",
                background: l.code === value ? "rgba(255,255,255,0.04)" : "transparent",
                border: 0, borderRadius: 6,
                color: "var(--silver)", cursor: "pointer",
                fontSize: 13,
                fontFamily: "var(--body)",
              }}>
              <span>{l.name}</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--mute)" }}>{l.code.toUpperCase()}</span>
            </button>
          ))}
          <div style={{ padding: "8px 10px 4px", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.12em", color: "var(--mute-dark)", textTransform: "uppercase" }}>EN + AR fully wired · RU/ZH demo</div>
        </div>
      )}
    </div>
  );
}

// ─── Header ───────────────────────────────────────────────────────
function Header({ route, navigate, lang, setLang, onEnquire }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const t = I18N[lang] || I18N.en;
  const navItems = [
    { id: "inventory", label: t.nav.inventory },
    { id: "sell", label: t.nav.sell },
    { id: "about", label: t.nav.about },
    { id: "contact", label: t.nav.contact },
  ];
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      backdropFilter: scrolled ? "blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
      background: scrolled ? "rgba(11,11,12,0.72)" : "transparent",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background 240ms ease, border-color 240ms ease",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        paddingBlock: 16, gap: 24,
      }}>
        <button onClick={() => navigate({ page: "home" })}
          style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", color: "var(--paper)" }}
          aria-label="F1rst Motors home">
          <Logo size={18} />
        </button>

        <nav style={{ display: "flex", gap: 28, alignItems: "center" }}>
          {navItems.map((n) => {
            const active = (n.id === "inventory" && (route.page === "inventory" || route.page === "vehicle"));
            return (
              <button key={n.id}
                onClick={() => navigate({ page: n.id })}
                className="ul-link"
                style={{
                  background: "transparent", border: 0, padding: "8px 0",
                  cursor: "pointer",
                  color: active ? "var(--paper)" : "var(--silver)",
                  fontSize: 13,
                  letterSpacing: "0.005em",
                  position: "relative",
                }}>
                {n.label}
                {active && <span style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 1, background: "var(--accent)" }} />}
              </button>
            );
          })}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="tel:+97143201030"
            className="mono"
            style={{ fontSize: 11, color: "var(--silver)", letterSpacing: "0.06em" }}>
            +971 4 320 1030
          </a>
          <div style={{ height: 14, width: 1, background: "var(--line)" }} />
          <LangSwitcher value={lang} onChange={setLang} />
          <button className="btn btn-primary btn-sm" onClick={() => onEnquire({})}>{t.nav.enquire}</button>
        </div>
      </div>
    </header>
  );
}

// ─── Demo data badge ──────────────────────────────────────────────
function DemoBadge({ children = "Demo data — feed-driven in production", style = {} }) {
  return (
    <span className="demo-badge" style={style}>
      <span className="dot" />
      {children}
    </span>
  );
}

// ─── Section header ───────────────────────────────────────────────
function SectionHead({ eyebrow, title, sub, align = "left", style = {} }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : 880, marginInline: align === "center" ? "auto" : 0, ...style }}>
      {eyebrow && <div className="kbd-eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>}
      <h2 className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", margin: 0 }}>{title}</h2>
      {sub && <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.5, color: "var(--mute)", maxWidth: 640 }}>{sub}</p>}
    </div>
  );
}

// ─── Footer ───────────────────────────────────────────────────────
function Footer({ navigate, onEnquire }) {
  return (
    <footer style={{ borderTop: "1px solid var(--line)", background: "var(--noir)", paddingBlock: 72 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 48, marginBottom: 56 }}>
          <div>
            <Logo size={20} />
            <p style={{ marginTop: 18, color: "var(--mute)", fontSize: 14, maxWidth: 280, lineHeight: 1.5 }}>
              A curated Dubai showroom of luxury, exotic and hyper-cars. Browse, enquire, or commission us to source.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn-light btn-sm" onClick={() => onEnquire({})}>Enquire</button>
              <a className="btn btn-ghost btn-sm" href="tel:+97143201030">Call</a>
            </div>
          </div>
          {[
            { title: "Browse", links: [["Inventory", () => navigate({ page: "inventory" })], ["Recently sold", () => navigate({ page: "inventory", filter: { status: "sold" } })], ["Compare", null], ["Number plates", null]] },
            { title: "Services", links: [["Sell your car", () => navigate({ page: "sell" })], ["Trade-in", () => navigate({ page: "sell" })], ["Book a viewing", () => onEnquire({ intent: "viewing" })], ["Export enquiry", () => onEnquire({ intent: "export" })]] },
            { title: "Showroom", links: [["About", () => navigate({ page: "about" })], ["Visit us", () => navigate({ page: "contact" })], ["Careers", null], ["News", null]] },
            { title: "Contact", links: [["+971 4 320 1030", null], ["info@f1rstmotors.com", null], ["WhatsApp — pending", null], ["Sheikh Zayed Rd, Dubai", null]] },
          ].map((col) => (
            <div key={col.title}>
              <div className="kbd-eyebrow" style={{ marginBottom: 18 }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {col.links.map(([label, action], i) => (
                  <li key={i}>
                    {action ? (
                      <button onClick={action} style={{ background: "transparent", border: 0, color: "var(--silver)", padding: 0, cursor: "pointer", fontSize: 14, textAlign: "left" }} className="ul-link">{label}</button>
                    ) : (
                      <span style={{ color: "var(--mute)", fontSize: 14 }}>{label}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <hr className="rule" />

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 28, flexWrap: "wrap", gap: 16 }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--mute-dark)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            © 2026 F1rst Motors LLC · Danube Building, 409 Sheikh Zayed Rd, Al Quoz 1, Dubai
          </div>
          <div style={{ display: "flex", gap: 18 }}>
            {["Instagram", "Facebook", "TikTok", "YouTube", "LinkedIn"].map((s) => (
              <a key={s} href="#" className="ul-link" style={{ fontSize: 12, color: "var(--silver)" }}>{s}</a>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 36, paddingTop: 22, borderTop: "1px solid var(--line-soft)", fontSize: 11, color: "var(--mute-dark)", lineHeight: 1.7 }}>
          <strong style={{ color: "var(--mute)", fontWeight: 500 }}>Prototype notes —</strong>{" "}
          Inventory shown is demo data; in production it loads from the dealer feed. Scale claims are stated by F1rst Motors, not independently verified. No rating is published until the live Google number is confirmed. Manufacturer wordmarks are used in plain text only; logo rights to be confirmed before publication.
        </div>
      </div>
    </footer>
  );
}

// ─── In-page sticky bottom CTA (mobile-style) ─────────────────────
function StickyBar({ onEnquire }) {
  return (
    <div style={{
      position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 40,
      background: "rgba(11,11,12,0.88)",
      backdropFilter: "blur(14px)",
      WebkitBackdropFilter: "blur(14px)",
      borderTop: "1px solid var(--line)",
      padding: "12px 16px",
      display: "none",
    }} className="sticky-bar">
      <div style={{ display: "flex", gap: 8, maxWidth: 720, margin: "0 auto" }}>
        <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => onEnquire({})}>Enquire</button>
        <a className="btn btn-ghost" href="tel:+97143201030">Call</a>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Header, Footer, SectionHead, DemoBadge, StickyBar, LANGS });