/* Superior Car Rental — Shared UI primitives */

/* SVG redraw of the Superior logo mark (stylized S with horizontal speed-lines)
   Original is a wordmark in amber; here we render it as a clean inline SVG mark
   so it scales crisply and matches whatever accent the user picks. */
const SuperiorMark = ({ size = 32, color = "currentColor" }) => (
  <svg width={size} height={size * 0.72} viewBox="0 0 100 72" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M14 0 Q 0 0 0 14 L 0 58 Q 0 72 14 72 L 100 72 L 100 56 L 22 56 L 22 44 L 88 44 L 88 28 L 22 28 L 22 16 L 100 16 L 100 0 Z"
      fill={color}
    />
    <rect x="32" y="22" width="42" height="3" fill="var(--noir)" />
    <rect x="38" y="34" width="48" height="3" fill="var(--noir)" />
    <rect x="32" y="46" width="42" height="3" fill="var(--noir)" />
  </svg>
);

const SuperiorWordmark = ({ light = false, height = 28 }) => (
  <div className="row" style={{ gap: 12, alignItems: "center" }}>
    <SuperiorMark size={height * 1.1} color="var(--accent)" />
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
      <div style={{
        fontFamily: "var(--font-display)",
        fontWeight: 800,
        fontSize: height * 0.78,
        letterSpacing: "-0.02em",
        color: light ? "var(--ink-paper)" : "var(--paper)",
        textTransform: "uppercase"
      }}>SUPERIOR</div>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: height * 0.32,
        letterSpacing: "0.22em",
        color: "var(--accent)",
        marginTop: 2,
        textTransform: "uppercase"
      }}>Car Rental — Dubai</div>
    </div>
  </div>
);

/* Tiny icon set — line icons, single-color, currentColor */
const Icon = {
  Seats: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 19v-7a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v7"/><path d="M4 19h16"/><path d="M6 9V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v3"/></svg>,
  Doors: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="3" width="14" height="18" rx="1"/><circle cx="15" cy="12" r="1" fill="currentColor"/></svg>,
  Trans: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/><line x1="6" y1="8" x2="6" y2="16"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  Engine: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 9h2l1-2h6l1 2h2v6h-2l-1 2h-6l-1-2H5z"/><path d="M3 11h2M19 11h2"/></svg>,
  Fuel: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="3" width="10" height="18" rx="1"/><path d="M14 8l3 0a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2"/><line x1="7" y1="7" x2="11" y2="7"/></svg>,
  Speed: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21a9 9 0 1 0-9-9"/><path d="M12 12l5-3"/></svg>,
  Heart: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill={p.filled?"currentColor":"none"} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  Arrow: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></svg>,
  ArrowL: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="11 6 5 12 11 18"/></svg>,
  Whatsapp: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>,
  Phone: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><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.127.96.361 1.903.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.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  Close: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  Cal: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  Pin: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Star: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
  Sparkle: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.5 5L19 9.5 14 11l-2 5-2-5-5-1.5L10 8z"/></svg>,
  Shield: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  Truck: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="5" width="14" height="12" rx="1"/><polygon points="15 8 19 8 23 12 23 17 15 17"/><circle cx="6" cy="20" r="2"/><circle cx="19" cy="20" r="2"/></svg>,
  Clock: (p) => <svg viewBox="0 0 24 24" className={p.className||"icon"} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
};

/* Helpers */
const Button = ({ kind = "primary", size, className = "", children, ...p }) => (
  <button className={`btn btn-${kind} ${size?`btn-${size}`:""} ${className}`} {...p}>{children}</button>
);

const Eyebrow = ({ children, gold }) => (
  <div className={`eyebrow ${gold?"eyebrow-gold":""}`}>{children}</div>
);

const Aed = () => <span className="aed">AED</span>;

/* Whatsapp helper */
const waLink = (msg) => `https://wa.me/971567671411?text=${encodeURIComponent(msg)}`;

/* Format short date e.g. "12 Jun" */
const fmtDate = (d) => {
  if (!d) return "";
  const date = new Date(d);
  return date.toLocaleDateString("en-GB", { day: "numeric", month: "short" });
};

const todayPlus = (n) => {
  const d = new Date();
  d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
};

Object.assign(window, { SuperiorMark, SuperiorWordmark, Icon, Button, Eyebrow, Aed, waLink, fmtDate, todayPlus });
