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

// ─────────────────────────────────────────────────────────────────────────────
// Shared icons (drawn inline, simple geometry only)
// ─────────────────────────────────────────────────────────────────────────────
const Icon = {
  arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  ),
  chev: (p) => (
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...p}>
      <path d="M2 3l3 3 3-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  wa: (p) => (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M8 1.5a6.5 6.5 0 0 0-5.6 9.8L1.5 14.5l3.3-.9A6.5 6.5 0 1 0 8 1.5Z" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M5.5 5.5c.2 1.4 1.6 3.6 3.4 4.4.7.3 1.3.2 1.6-.3.2-.4.4-.7 0-1l-1-.6c-.2-.1-.4-.1-.6.1l-.3.3c-.7-.3-1.4-1-1.7-1.7l.3-.3c.2-.2.2-.4.1-.6l-.6-1c-.2-.4-.6-.3-1 0-.4.2-.4.5-.2.7Z" fill="currentColor"/>
    </svg>
  ),
  phone: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M3 2h2l1 3-1.5 1c.5 1.5 1.5 2.5 3 3L8.5 8l3 1v2c0 .5-.5 1-1 1C5.5 12 2 8.5 2 3c0-.5.5-1 1-1Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  ),
  mail: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <rect x="1.5" y="3" width="11" height="8" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M2 4l5 4 5-4" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  pin: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M7 1.5c2.2 0 4 1.7 4 3.9 0 3-4 7-4 7s-4-4-4-7c0-2.2 1.8-3.9 4-3.9Z" stroke="currentColor" strokeWidth="1.2"/>
      <circle cx="7" cy="5.5" r="1.3" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  search: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.3"/>
      <path d="M9 9l3 3" stroke="currentColor" strokeWidth="1.3"/>
    </svg>
  ),
  close: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.3"/>
    </svg>
  ),
  globe: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M1.5 7h11M7 1.5c2 2 2 9 0 11M7 1.5c-2 2-2 9 0 11" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  )
};

// ─────────────────────────────────────────────────────────────────────────────
// CV Auto wordmark — recreated as SVG (raster logo is a known gap per brief)
// ─────────────────────────────────────────────────────────────────────────────
const Wordmark = ({ size = 22, tone = "var(--text)", sub = true }) => (
  <span className="cv-wordmark" style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1, gap: 3 }}>
    <span style={{
      fontFamily: "'Manrope', sans-serif",
      fontWeight: 800,
      letterSpacing: "0.14em",
      fontSize: size,
      color: tone
    }}>
      CV<span style={{ display: "inline-block", width: size * 0.45 }} />AUTO
    </span>
    {sub && (
      <span style={{
        fontFamily: "'Manrope', sans-serif",
        fontWeight: 500,
        letterSpacing: "0.32em",
        fontSize: size * 0.32,
        color: "var(--muted)",
        textTransform: "uppercase"
      }}>
        Approved Luxury Vehicles
      </span>
    )}
  </span>
);

// ─────────────────────────────────────────────────────────────────────────────
// Navbar
// ─────────────────────────────────────────────────────────────────────────────
const Navbar = ({ page, setPage, dark = false }) => {
  const items = [
    ["inventory", "Inventory"],
    ["consignment", "Consignment"],
    ["sell", "Sell your car"],
    ["finance", "Finance"],
    ["about", "About"],
    ["contact", "Contact"]
  ];
  return (
    <header className={`cv-nav ${dark ? "is-dark" : ""}`}>
      <div className="cv-nav-inner">
        <button className="cv-nav-brand" onClick={() => setPage({ name: "home" })} aria-label="CV Auto home">
          <Wordmark size={18} tone="currentColor" sub={false} />
        </button>
        <nav className="cv-nav-links">
          {items.map(([k, label]) => (
            <button
              key={k}
              className={`cv-nav-link ${page.name === k ? "is-active" : ""}`}
              onClick={() => setPage({ name: k })}
            >
              {label}
            </button>
          ))}
        </nav>
        <div className="cv-nav-actions">
          <button className="cv-nav-locale" title="Locale">
            <Icon.globe /> <span>EN</span> <Icon.chev />
          </button>
          <a className="cv-btn cv-btn-ghost" href={CV_FACTS.whatsapp} target="_blank" rel="noopener">
            <Icon.wa /> WhatsApp
          </a>
          <button className="cv-btn cv-btn-primary" onClick={() => setPage({ name: "contact" })}>
            Enquire <Icon.arrow />
          </button>
        </div>
      </div>
    </header>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Vehicle Card
// ─────────────────────────────────────────────────────────────────────────────
const VehicleCard = ({ v, onOpen, layout = "tile" }) => {
  return (
    <article
      className={`cv-card cv-card-${layout}`}
      onClick={() => onOpen(v)}
      role="button"
      tabIndex={0}
    >
      <div className="cv-card-media">
        <img src={v.image} alt={`${v.year} ${v.make} ${v.model}`} loading="lazy" />
        {v.badge && <span className="cv-card-badge">{v.badge}</span>}
        <div className="cv-card-hover">
          <span>View vehicle</span>
          <Icon.arrow />
        </div>
      </div>
      <div className="cv-card-body">
        <div className="cv-card-meta">
          <span className="cv-card-year">{v.year}</span>
          <span className="cv-card-dot" />
          <span className="cv-card-tag">{v.tag}</span>
        </div>
        <h3 className="cv-card-title">
          {v.make} <span>{v.model}</span>
        </h3>
        <div className="cv-card-foot">
          <div className="cv-card-spec">
            <span>{v.body}</span>
            <span className="cv-card-sep">/</span>
            <span>{v.transmission}</span>
          </div>
          <div className="cv-card-price">
            {v.price === "POA"
              ? <em>Price on application</em>
              : v.price}
          </div>
        </div>
      </div>
    </article>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Trust strip (verifiable claims only)
// ─────────────────────────────────────────────────────────────────────────────
const TrustStrip = () => {
  const items = [
    ["Since 2017", "Trading in Al Quoz"],
    ["Multi-brand", "Curated, independent"],
    ["Transparent", "Consignment with daily care"],
    ["Al Quoz", "Opp. Al Serkal Avenue"],
    ["Finance support", "Buyer assistance"]
  ];
  return (
    <div className="cv-trust">
      {items.map(([h, s], i) => (
        <div key={i} className="cv-trust-cell">
          <div className="cv-trust-h">{h}</div>
          <div className="cv-trust-s">{s}</div>
        </div>
      ))}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────────
const Footer = ({ setPage }) => (
  <footer className="cv-footer">
    <div className="cv-footer-grid">
      <div className="cv-footer-brand">
        <Wordmark size={28} tone="var(--paper)" />
        <p className="cv-footer-mission">
          A trusted destination for luxury &amp; performance cars in Dubai.
          Independent multi-brand showroom — not affiliated with the manufacturers listed.
        </p>
      </div>
      <div>
        <div className="cv-footer-h">Inventory</div>
        <ul>
          <li><button onClick={() => setPage({ name: "inventory" })}>All vehicles</button></li>
          <li><button onClick={() => setPage({ name: "inventory", filter: "Sport" })}>Sport &amp; Super</button></li>
          <li><button onClick={() => setPage({ name: "inventory", filter: "Luxury" })}>Luxury sedans</button></li>
          <li><button onClick={() => setPage({ name: "inventory", filter: "SUV" })}>SUVs</button></li>
          <li><button onClick={() => setPage({ name: "inventory", filter: "Classic" })}>Classics</button></li>
        </ul>
      </div>
      <div>
        <div className="cv-footer-h">Services</div>
        <ul>
          <li><button onClick={() => setPage({ name: "consignment" })}>Consign your car</button></li>
          <li><button onClick={() => setPage({ name: "sell" })}>Sell your car</button></li>
          <li><button onClick={() => setPage({ name: "finance" })}>Finance enquiry</button></li>
          <li><button onClick={() => setPage({ name: "about" })}>Auction sourcing</button></li>
          <li><button onClick={() => setPage({ name: "about" })}>Vehicle inspection</button></li>
        </ul>
      </div>
      <div>
        <div className="cv-footer-h">Visit</div>
        <ul>
          <li>{CV_FACTS.address}</li>
          <li><a href={`tel:${CV_FACTS.phone.replace(/\s/g,"")}`}>{CV_FACTS.phone}</a></li>
          <li><a href={`mailto:${CV_FACTS.email}`}>{CV_FACTS.email}</a></li>
          {CV_FACTS.hours.map(([d, t]) => <li key={d}><span style={{ color: "var(--muted)" }}>{d}</span> &nbsp; {t}</li>)}
        </ul>
      </div>
      <div>
        <div className="cv-footer-h">Follow</div>
        <ul>
          {CV_FACTS.socials.map(([name, url]) => (
            <li key={name}><a href={`https://${url}`} target="_blank" rel="noopener">{name}</a></li>
          ))}
        </ul>
      </div>
    </div>
    <div className="cv-footer-rule" />
    <div className="cv-footer-fine">
      <span>© 2026 C V Used Automobile LLC. All rights reserved.</span>
      <span>
        Independent multi-brand dealership. All manufacturer names and marks belong to their respective owners.
      </span>
      <span>EN · العربية · РУ · 中文</span>
    </div>
  </footer>
);

// ─────────────────────────────────────────────────────────────────────────────
// Floating WhatsApp FAB
// ─────────────────────────────────────────────────────────────────────────────
const WhatsAppFab = () => (
  <a className="cv-fab" href={CV_FACTS.whatsapp} target="_blank" rel="noopener" title="Chat on WhatsApp">
    <Icon.wa />
  </a>
);

// ─────────────────────────────────────────────────────────────────────────────
// Section header
// ─────────────────────────────────────────────────────────────────────────────
const SectionHead = ({ eyebrow, title, copy, action }) => (
  <header className="cv-section-head">
    <div>
      <div className="cv-eyebrow">{eyebrow}</div>
      <h2 className="cv-h2">{title}</h2>
      {copy && <p className="cv-section-copy">{copy}</p>}
    </div>
    {action}
  </header>
);

Object.assign(window, {
  Icon, Wordmark, Navbar, VehicleCard, TrustStrip, Footer, WhatsAppFab, SectionHead
});