/* Shared components — Deals on Wheels */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ---------- Logo (redrawn — original SVG mark) ---------- */
function Logo({ size = 36, mono = false }) {
  const stroke = mono ? "currentColor" : "var(--gold)";
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-label="Deals on Wheels">
      <circle cx="32" cy="32" r="29" stroke={stroke} strokeWidth="1.5" />
      <circle cx="32" cy="32" r="22" stroke={stroke} strokeWidth="0.75" opacity="0.6" />
      {/* abstract car silhouette */}
      <path d="M14 38 L20 30 L28 28 L40 28 L48 32 L52 38 L48 40 L46 40 A4 4 0 0 0 38 40 L26 40 A4 4 0 0 0 18 40 L16 40 Z"
            stroke={stroke} strokeWidth="1.5" strokeLinejoin="round" fill="none" />
      <circle cx="22" cy="40" r="2.5" stroke={stroke} strokeWidth="1.2" />
      <circle cx="42" cy="40" r="2.5" stroke={stroke} strokeWidth="1.2" />
      {/* checker flourish */}
      <path d="M50 22 L58 14 M52 24 L60 16" stroke={stroke} strokeWidth="1" opacity="0.5" />
    </svg>
  );
}

function LogoLockup({ mono = false, compact = false }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Logo size={compact ? 32 : 40} mono={mono} />
      <div style={{ lineHeight: 1 }}>
        <div style={{
          fontFamily: "var(--display)", fontSize: compact ? 18 : 22, fontWeight: 500,
          letterSpacing: "0.04em", color: mono ? "currentColor" : "var(--text)",
        }}>
          Deals on Wheels
        </div>
        <div style={{
          fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.22em",
          textTransform: "uppercase", color: "var(--gold)", marginTop: 4,
        }}>
          Dubai · Est. 2008
        </div>
      </div>
    </div>
  );
}

/* ---------- Navbar ---------- */
function Navbar({ route, navigate, theme, onContact, onAr }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
    { id: "inventory", label: "Inventory" },
    { id: "sell", label: "Sell / Trade-in" },
    { id: "finance", label: "Finance" },
    { id: "metaverse", label: "Virtual Showroom" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];

  const lightTheme = theme === "light";
  const bg = scrolled
    ? (lightTheme ? "rgba(247,244,238,0.92)" : "rgba(11,13,16,0.88)")
    : (lightTheme ? "rgba(247,244,238,0.6)" : "rgba(11,13,16,0.0)");
  const textColor = lightTheme ? "var(--text-ink)" : "var(--text)";
  const borderColor = scrolled ? (lightTheme ? "rgba(0,0,0,0.06)" : "var(--line)") : "transparent";

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: bg, backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)",
      borderBottom: `1px solid ${borderColor}`,
      transition: "background .3s, border-color .3s",
      color: textColor,
    }}>
      <div className="container-wide" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 76,
      }}>
        <button className="unstyled-button" onClick={() => navigate("home")}>
          <LogoLockup mono={lightTheme} />
        </button>

        <nav style={{ display: "flex", alignItems: "center", gap: 28 }} className="nav-desktop">
          {items.map((it) => (
            <button key={it.id} className="unstyled-button" onClick={() => navigate(it.id)}
                    style={{
                      fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em",
                      textTransform: "uppercase",
                      color: route === it.id ? "var(--gold)" : "inherit",
                      paddingBottom: 4,
                      borderBottom: route === it.id ? "1px solid var(--gold)" : "1px solid transparent",
                      transition: "color .2s, border-color .2s",
                    }}>
              {it.label}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 14 }} className="nav-actions">
          <div style={{
            display: "flex", gap: 0, border: `1px solid ${lightTheme ? "rgba(0,0,0,0.15)" : "var(--line)"}`,
          }}>
            {["EN", "AR", "RU", "中文"].map((lang) => (
              <button key={lang} className="unstyled-button" onClick={onAr && lang === "AR" ? onAr : undefined}
                      style={{
                        padding: "6px 9px",
                        fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em",
                        color: lang === "EN" ? (lightTheme ? "var(--text-ink)" : "var(--text)") : (lightTheme ? "var(--text-ink-mute)" : "var(--text-mute)"),
                        background: lang === "EN" ? (lightTheme ? "rgba(0,0,0,0.05)" : "rgba(196,162,74,0.1)") : "transparent",
                      }}>
                {lang}
              </button>
            ))}
          </div>
          <button onClick={onContact} className="btn btn--sm">Enquire</button>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .nav-desktop { display: none !important; }
        }
        @media (max-width: 720px) {
          .nav-actions > div:first-child { display: none; }
        }
      `}</style>
    </header>
  );
}

/* ---------- Vehicle Card ---------- */
function VehicleCard({ v, onClick, dark = true }) {
  const priceText = v.askPrice ? "Request Price" : `AED ${v.price.toLocaleString()}`;
  return (
    <article className="unstyled-button" onClick={() => onClick(v)}
             style={{
               display: "flex", flexDirection: "column",
               background: dark ? "var(--ink)" : "var(--paper)",
               border: `1px solid ${dark ? "var(--line)" : "rgba(0,0,0,0.08)"}`,
               color: dark ? "var(--text)" : "var(--text-ink)",
               cursor: "pointer", transition: "transform .3s, border-color .3s",
             }}
             onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--gold)"}
             onMouseLeave={(e) => e.currentTarget.style.borderColor = dark ? "var(--line)" : "rgba(0,0,0,0.08)"}>
      <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden", background: dark ? "#1A1D22" : "#E5DECF" }}>
        <img src={v.img} alt={`${v.year} ${v.make} ${v.model}`}
             style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .8s" }}
             onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.04)"}
             onLoad={(e) => { e.currentTarget.style.opacity = 1; }} />
        <div style={{
          position: "absolute", top: 12, left: 12,
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em",
          background: "rgba(11,13,16,0.7)", color: "var(--gold)",
          padding: "5px 9px", textTransform: "uppercase",
        }}>
          {v.id.toUpperCase()}
        </div>
        {v.tags && v.tags[0] && (
          <div style={{
            position: "absolute", top: 12, right: 12,
            fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.14em",
            background: "var(--gold)", color: "var(--noir)",
            padding: "5px 9px", textTransform: "uppercase",
          }}>
            {v.tags[0]}
          </div>
        )}
      </div>
      <div style={{ padding: "22px 24px 24px", display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
        <div>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em",
            textTransform: "uppercase", color: dark ? "var(--text-mute)" : "var(--text-ink-mute)",
          }}>
            {v.year} · {v.make}
          </div>
          <div style={{
            fontFamily: "var(--display)", fontSize: 26, fontWeight: 500,
            marginTop: 6, lineHeight: 1.1, letterSpacing: "-0.01em",
          }}>
            {v.model} <span style={{ color: dark ? "var(--text-mute)" : "var(--text-ink-mute)", fontStyle: "italic" }}>{v.variant}</span>
          </div>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12,
          fontFamily: "var(--mono)", fontSize: 10.5,
          color: dark ? "var(--text-mute)" : "var(--text-ink-mute)",
          paddingTop: 14,
          borderTop: `1px solid ${dark ? "var(--line)" : "rgba(0,0,0,0.06)"}`,
        }}>
          <div>
            <div style={{ fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>Mileage</div>
            <div style={{ color: dark ? "var(--text)" : "var(--text-ink)", marginTop: 3 }} className="tabular">{v.mileage.toLocaleString()} km</div>
          </div>
          <div>
            <div style={{ fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>Engine</div>
            <div style={{ color: dark ? "var(--text)" : "var(--text-ink)", marginTop: 3 }}>{v.engine.split(" ").slice(0, 2).join(" ")}</div>
          </div>
          <div>
            <div style={{ fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.7 }}>0–100</div>
            <div style={{ color: dark ? "var(--text)" : "var(--text-ink)", marginTop: 3 }} className="tabular">{v.zeroToHundred}</div>
          </div>
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          marginTop: "auto", paddingTop: 8,
        }}>
          <div>
            <div style={{ fontSize: 9.5, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "var(--text-mute)" : "var(--text-ink-mute)", fontFamily: "var(--mono)" }}>Price</div>
            <div style={{
              fontFamily: v.askPrice ? "var(--mono)" : "var(--display)",
              fontSize: v.askPrice ? 14 : 22,
              fontWeight: v.askPrice ? 400 : 500,
              letterSpacing: v.askPrice ? "0.12em" : "0",
              color: v.askPrice ? "var(--gold)" : (dark ? "var(--text)" : "var(--text-ink)"),
              marginTop: 4, textTransform: v.askPrice ? "uppercase" : "none",
            }} className="tabular">
              {priceText}
            </div>
          </div>
          <div style={{
            fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em",
            color: "var(--gold)", textTransform: "uppercase",
            display: "flex", alignItems: "center", gap: 6,
          }}>
            View — <span style={{ fontSize: 14 }}>→</span>
          </div>
        </div>
      </div>
    </article>
  );
}

/* ---------- Section header (consistent across pages) ---------- */
function SectionHead({ eyebrow, title, sub, align = "left", light = false, action }) {
  return (
    <div style={{
      display: "flex", flexDirection: align === "center" ? "column" : "row",
      alignItems: align === "center" ? "center" : "flex-end",
      justifyContent: "space-between",
      gap: 24, textAlign: align,
      paddingBottom: 36, marginBottom: 36,
      borderBottom: `1px solid ${light ? "rgba(0,0,0,0.08)" : "var(--line)"}`,
    }}>
      <div style={{ maxWidth: align === "center" ? 720 : 760 }}>
        {eyebrow && <div className="h-eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>}
        <h2 className="h-display" style={{
          fontSize: "clamp(36px, 5vw, 56px)", margin: 0,
          color: light ? "var(--text-ink)" : "var(--text)",
        }}>
          {title}
        </h2>
        {sub && (
          <p style={{
            marginTop: 18, fontSize: 16, lineHeight: 1.6,
            color: light ? "var(--text-ink-mute)" : "var(--text-mute)",
            maxWidth: 580,
          }}>{sub}</p>
        )}
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer({ navigate, onContact }) {
  return (
    <footer style={{
      background: "#070809", borderTop: "1px solid var(--line)",
      paddingTop: 80, paddingBottom: 32,
      color: "var(--text-mute)",
    }}>
      <div className="container-wide">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr", gap: 48,
          paddingBottom: 60, borderBottom: "1px solid var(--line)",
        }} className="footer-cols">
          <div>
            <LogoLockup />
            <p style={{ marginTop: 22, lineHeight: 1.7, maxWidth: 320, fontSize: 14 }}>
              An independent Dubai showroom for luxury, exotic, and pre-owned cars.
              Buy, sell, trade-in and finance — confidently, since 2008.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              <a href="#" className="chip">Instagram <span style={{ opacity: 0.6 }}>@dealsonwheelsuae</span></a>
            </div>
          </div>
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Showroom</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><button className="unstyled-button" onClick={() => navigate("inventory")}>Browse Inventory</button></li>
              <li><button className="unstyled-button" onClick={() => navigate("sell")}>Sell Your Car</button></li>
              <li><button className="unstyled-button" onClick={() => navigate("finance")}>Finance</button></li>
              <li><button className="unstyled-button" onClick={() => navigate("metaverse")}>Virtual Showroom</button></li>
            </ul>
          </div>
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Studio</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><button className="unstyled-button" onClick={() => navigate("about")}>About</button></li>
              <li><button className="unstyled-button" onClick={() => navigate("contact")}>Contact</button></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onContact(); }}>Press</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onContact(); }}>Careers</a></li>
            </ul>
          </div>
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Visit</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--text)" }}>
              Sheikh Zayed Road, Exit 46<br />
              After Oasis Centre, Al Quoz 1<br />
              Dubai · UAE
            </div>
            <div style={{ marginTop: 18, fontSize: 13, lineHeight: 1.7 }}>
              <div className="tabular">+971 52 790 0000 <span style={{ color: "var(--gold)", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em" }}>(to confirm)</span></div>
              <div>sales@dealsonwheels.ae</div>
              <div style={{ marginTop: 8, color: "var(--text-mute)" }}>Mon – Sat · 09:00 – 21:00</div>
            </div>
          </div>
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 32, flexWrap: "wrap", gap: 16,
          fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--text-dim)",
        }}>
          <div>© 2008 – 2026 Deals on Wheels Automobile Trading LLC</div>
          <div>Trade Licence — Dubai DED</div>
          <div>Inventory archival until live feed connected</div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-cols { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .footer-cols { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

/* ---------- Enquiry Modal ---------- */
function EnquiryModal({ open, onClose, vehicle, mode = "enquire" }) {
  const [sent, setSent] = useState(false);
  useEffect(() => { if (!open) setSent(false); }, [open]);
  if (!open) return null;
  const titles = {
    enquire: "Enquire",
    price: "Request Price",
    viewing: "Book a Viewing",
    contact: "Get in Touch",
  };
  const subs = {
    enquire: "A senior advisor will reply within the working day. We'll arrange a private viewing if you'd like.",
    price: "Pricing is confirmed per buyer, factoring spec, mileage and import status. We share full numbers privately.",
    viewing: "Book a private viewing at the Al Quoz showroom. Espresso, no pressure.",
    contact: "Tell us what you're looking for — or send a registration number for a trade-in valuation.",
  };

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(7,8,9,0.85)", backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24, animation: "fadeUp .25s ease",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "var(--ink)", border: "1px solid var(--line)",
        maxWidth: 920, width: "100%", maxHeight: "90vh", overflow: "auto",
        display: "grid", gridTemplateColumns: vehicle ? "1fr 1fr" : "1fr",
      }} className="modal-grid">
        {vehicle && (
          <div style={{
            background: `url(${vehicle.img}) center/cover`, position: "relative",
            minHeight: 320,
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(11,13,16,0.1) 0%, rgba(11,13,16,0.85) 100%)",
              padding: 28, display: "flex", flexDirection: "column", justifyContent: "flex-end",
            }}>
              <div className="h-mono-sm" style={{ color: "var(--gold)" }}>{vehicle.id.toUpperCase()}</div>
              <div className="h-display" style={{ fontSize: 32, marginTop: 8 }}>
                {vehicle.year} {vehicle.make}
              </div>
              <div style={{ fontFamily: "var(--display)", fontSize: 22, fontStyle: "italic", color: "var(--text-mute)" }}>
                {vehicle.model} {vehicle.variant}
              </div>
            </div>
          </div>
        )}
        <div style={{ padding: "36px 36px 32px", display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div className="h-eyebrow">{vehicle ? "Vehicle Enquiry" : "Direct Line"}</div>
              <h3 className="h-display" style={{ fontSize: 32, marginTop: 10 }}>{titles[mode]}</h3>
            </div>
            <button onClick={onClose} className="unstyled-button" style={{
              width: 36, height: 36, border: "1px solid var(--line)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--text-mute)",
            }}>✕</button>
          </div>
          <p style={{ marginTop: 14, color: "var(--text-mute)", fontSize: 14, lineHeight: 1.6 }}>{subs[mode]}</p>

          {!sent ? (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
                  style={{ display: "flex", flexDirection: "column", gap: 22, marginTop: 28, flex: 1 }}>
              <div className="field">
                <label>Your Name</label>
                <input type="text" required placeholder="—" />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
                <div className="field">
                  <label>Phone / WhatsApp</label>
                  <input type="tel" required placeholder="+971" />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="—" />
                </div>
              </div>
              {mode === "viewing" && (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
                  <div className="field">
                    <label>Preferred Date</label>
                    <input type="date" />
                  </div>
                  <div className="field">
                    <label>Time</label>
                    <select>
                      <option>09:00 – 11:00</option>
                      <option>11:00 – 13:00</option>
                      <option>14:00 – 16:00</option>
                      <option>16:00 – 18:00</option>
                      <option>18:00 – 21:00</option>
                    </select>
                  </div>
                </div>
              )}
              <div className="field">
                <label>Message</label>
                <textarea rows={3} placeholder={vehicle ? `I'd like to know more about ${vehicle.year} ${vehicle.make} ${vehicle.model}…` : "How can we help?"} />
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: "auto", paddingTop: 12 }}>
                <button type="submit" className="btn btn--lg">Send Enquiry</button>
                <button type="button" className="btn btn--lg btn--whatsapp">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.9 2.3 1 2.5c.1.2 1.7 2.6 4.2 3.6 1.5.6 2.1.7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.2-1.4c1.4.8 2.9 1.2 4.6 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
                  WhatsApp
                </button>
              </div>
            </form>
          ) : (
            <div style={{ marginTop: 36, padding: 28, border: "1px solid var(--gold)", background: "rgba(196,162,74,0.06)" }}>
              <div className="h-eyebrow">Received</div>
              <h4 className="h-display" style={{ fontSize: 26, margin: "10px 0 14px" }}>Thank you.</h4>
              <p style={{ color: "var(--text-mute)", margin: 0, fontSize: 14, lineHeight: 1.6 }}>
                An advisor will be in touch shortly. If you'd like, message us directly on WhatsApp for the fastest reply.
              </p>
              <button onClick={onClose} className="btn btn--ghost" style={{ marginTop: 24 }}>Close</button>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .modal-grid { grid-template-columns: 1fr !important; }
          .modal-grid > div:first-child { min-height: 200px !important; }
        }
      `}</style>
    </div>
  );
}

/* ---------- WhatsApp FAB ---------- */
function WhatsAppFab() {
  return (
    <a href="#" onClick={(e) => e.preventDefault()} style={{
      position: "fixed", bottom: 28, right: 28, zIndex: 50,
      width: 58, height: 58, borderRadius: "50%",
      background: "#1F8A5B", color: "white",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 10px 28px rgba(31,138,91,0.45), 0 0 0 6px rgba(31,138,91,0.15)",
      transition: "transform .2s",
    }}
      onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.08)"}
      onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.7-1.4-1.6-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.9 2.3 1 2.5c.1.2 1.7 2.6 4.2 3.6 1.5.6 2.1.7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.2-1.4c1.4.8 2.9 1.2 4.6 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    </a>
  );
}

Object.assign(window, { Logo, LogoLockup, Navbar, VehicleCard, SectionHead, Footer, EnquiryModal, WhatsAppFab });