/* ui — shared primitives: Logo, Icon, Placeholder, Stars, Money, AirportPill */

/* Dual-wing brand mark: gold upper feathers + espresso lower wing, mirrored */
function WingMark({ size = 30, dark = false, gold = "var(--gold)" }) {
  const espresso = dark ? "rgba(255,255,255,.92)" : "var(--espresso)";
  return (
    <svg width={size} height={size * 0.72} viewBox="0 0 100 72" fill="none" aria-hidden="true" style={{ overflow: "visible" }}>
      {/* lower espresso wings */}
      <path d="M50 64 C57 51 70 46 91 35 C77 50 63 55 50 64 Z" fill={espresso} />
      <path d="M50 64 C43 51 30 46 9 35 C23 50 37 55 50 64 Z" fill={espresso} />
      {/* upper gold feathers */}
      <path d="M50 55 C58 42 73 36 95 27 C79 42 63 47 50 55 Z" fill={gold} />
      <path d="M50 55 C42 42 27 36 5 27 C21 42 37 47 50 55 Z" fill={gold} />
      {/* inner short gold accents */}
      <path d="M50 58 C55 49 62 45 73 39 C64 49 57 53 50 58 Z" fill={gold} opacity=".55" />
      <path d="M50 58 C45 49 38 45 27 39 C36 49 43 53 50 58 Z" fill={gold} opacity=".55" />
    </svg>
  );
}

function Logo({ size = 22, dark = false, showText = true }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 11 }}>
      <WingMark size={size * 1.5} dark={dark} />
      {showText && (
        <span style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: size, letterSpacing: ".01em", color: dark ? "#fff" : "var(--ink)", lineHeight: 1 }}>
          Third<span style={{ color: "var(--gold-d)" }}>wing</span>
        </span>
      )}
    </span>
  );
}

const ICONS = {
  plane: "M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z",
  hotel: "M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01M10 21v-4h4v4",
  search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3",
  cal: "M3 9h18M7 3v3M17 3v3M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z",
  user: "M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  arrow: "M5 12h14M13 6l6 6-6 6",
  arrowL: "M19 12H5M11 18l-6-6 6-6",
  check: "M20 6 9 17l-5-5",
  swap: "M7 4v13M7 4 4 7M7 4l3 3M17 20V7M17 20l3-3M17 20l-3-3",
  star: "M12 3l2.6 5.6 6.1.7-4.5 4.1 1.2 6L12 16.8 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z",
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2",
  phone: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8.1 9.5a16 16 0 0 0 6 6l1.1-1.1a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z",
  mail: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6",
  pin: "M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11zM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",
  spark: "M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8z",
  chat: "M21 12a8 8 0 0 1-11.3 7.3L3 21l1.7-6.7A8 8 0 1 1 21 12z",
  wifi: "M5 13a10 10 0 0 1 14 0M8.5 16.5a5 5 0 0 1 7 0M12 20h.01",
  key: "M21 2l-2 2m-3 3 3-3m-7 7a4 4 0 1 1-5.6 5.6A4 4 0 0 1 11 11zm0 0 5-5",
  chart: "M3 3v18h18M7 14v4M12 9v9M17 5v13",
  lock: "M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4",
  doc: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6",
  globe: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z",
  bolt: "M13 2 4 14h7l-1 8 9-12h-7z",
  menu: "M4 6h16M4 12h16M4 18h16",
  x: "M18 6 6 18M6 6l12 12",
  plus: "M12 5v14M5 12h14",
  bag: "M6 7h12l1 14H5zM9 7a3 3 0 0 1 6 0",
  leaf: "M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 11-4 15-9 16zM4 21c2-4 5-7 9-9",
};

function Icon({ name, size = 20, stroke = 1.7, color = "currentColor", fill = "none", style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} className={className} aria-hidden="true">
      <path d={ICONS[name] || ""} />
    </svg>
  );
}

function Stars({ value, size = 14 }) {
  var v = value != null ? value : 0;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "var(--gold-d)", fontWeight: 700, fontSize: 13 }}>
      <Icon name="star" size={size} fill="var(--gold)" color="var(--gold)" stroke={0} />
      {v.toFixed(1)}
    </span>
  );
}

function Money({ value, sar = true, size }) {
  var v = value != null ? value : 0;
  return (
    <span style={{ fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap", fontSize: size }}>
      {sar && <span style={{ fontWeight: 600, color: "var(--ink-3)", fontSize: "0.72em", marginInlineEnd: 4 }}>SAR</span>}
      {v.toLocaleString()}
    </span>
  );
}

/* labeled placeholder image with subtle motion-friendly gradient. Optionally an interactive drop slot. */
function Placeholder({ label, h = 220, r = "var(--r-lg)", tone = "emerald", slot, src, style }) {
  const tones = {
    emerald: "linear-gradient(155deg,#3a2a18,#241a0f)",
    gold: "linear-gradient(155deg,#7a5e22,#3d2f12)",
    sky: "linear-gradient(160deg,#16435a,#0c2531)",
    sand: "linear-gradient(155deg,#8a6f3f,#4a3a20)",
    paper: "linear-gradient(150deg,var(--paper-3),var(--paper-2))",
  };
  // real photography, resolved centrally by slot id (assets/img via images.js)
  const resolved = src || (slot && window.imageForSlot ? window.imageForSlot(slot) : null);
  if (resolved) {
    return (
      <div style={{ height: h, borderRadius: r, background: tones[tone] || tones.emerald, position: "relative", overflow: "hidden", ...style }}>
        <img src={resolved} alt={label || ""} loading="lazy" decoding="async"
          onError={(e) => { e.currentTarget.style.display = "none"; }}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  if (slot) {
    return <image-slot id={slot} style={{ display: "block", width: "100%", height: h, borderRadius: r, ...style }} radius={String(parseInt(r) || 18)} placeholder={label}></image-slot>;
  }
  return (
    <div style={{
      height: h, borderRadius: r, background: tones[tone] || tones.emerald,
      position: "relative", overflow: "hidden", display: "flex", alignItems: "flex-end",
      ...style
    }}>
      <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px)" }}></div>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 80% at 75% 10%, rgba(201,162,75,.22), transparent 60%)" }}></div>
      <span style={{
        position: "relative", margin: 14, fontSize: 10.5, fontWeight: 600, letterSpacing: ".14em",
        textTransform: "uppercase", color: "rgba(255,255,255,.82)", padding: "5px 11px",
        border: "1px solid rgba(255,255,255,.25)", borderRadius: 100, backdropFilter: "blur(4px)"
      }}>{label}</span>
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, center, light }) {
  return (
    <div style={{ maxWidth: center ? 720 : 640, margin: center ? "0 auto" : 0, textAlign: center ? "center" : "start" }}>
      {eyebrow && <div className={"eyebrow" + (center ? " center" : "")} style={{ color: light ? "var(--gold-l)" : undefined }}>{eyebrow}</div>}
      <h2 className="section-title" style={{ marginTop: 16, color: light ? "#fff" : "var(--ink)" }}>{title}</h2>
      {sub && <p className="lead" style={{ marginTop: 16, color: light ? "rgba(255,255,255,.7)" : undefined }}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Logo, WingMark, Icon, ICONS, Stars, Money, Placeholder, SectionHead });