// Shared UI primitives: icons, placeholder images, star rating, etc.

function Icon({ name, size = 16, color = "currentColor", stroke = 1.6 }) {
  const s = { width: size, height: size, display: "inline-block", verticalAlign: "middle", flexShrink: 0 };
  const c = color;
  const sw = stroke;
  switch (name) {
    case "phone":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      );
    case "plane":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M10.5 17.5 8 22l-1.5-1L7 17l-4 1-1-1.5 5-3L4 10l1-1 4.5 1L13 6c.7-.8 2-1 2.5-.5s.3 1.8-.5 2.5l-4 3.5L12 16l-1.5 1.5Z"/>
        </svg>
      );
    case "pin":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13Z"/><circle cx="12" cy="9" r="2.5"/>
        </svg>
      );
    case "calendar":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>
        </svg>
      );
    case "clock":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
        </svg>
      );
    case "shuttle":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <rect x="3" y="6" width="18" height="10" rx="2"/><path d="M3 12h18M7 6V4h10v2"/><circle cx="7.5" cy="18" r="1.5"/><circle cx="16.5" cy="18" r="1.5"/>
        </svg>
      );
    case "shield":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/>
        </svg>
      );
    case "cctv":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M3 7h12v6H3z"/><path d="m15 10 5-3v9l-5-3M5 13v4M9 13v4"/>
        </svg>
      );
    case "valet":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <circle cx="12" cy="7" r="3"/><path d="M5 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2"/><path d="m16 12 2 2 3-3"/>
        </svg>
      );
    case "wash":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M4 14h16M6 14v4M18 14v4M7 10l1-3h8l1 3M5 17h14"/>
        </svg>
      );
    case "ev":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M6 3h8v18H6z"/><path d="M14 8h2a2 2 0 0 1 2 2v5a1 1 0 0 0 1 1"/><path d="m10 9-2 4h3l-1 3"/>
        </svg>
      );
    case "star":
      return (
        <svg viewBox="0 0 24 24" fill={c} stroke={c} strokeWidth={sw} strokeLinejoin="round" style={s}>
          <path d="m12 3 2.8 6 6.2.8-4.6 4.3 1.2 6.3L12 17.7 6.4 20.4l1.2-6.3L3 9.8 9.2 9Z"/>
        </svg>
      );
    case "check":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="m5 12 4.5 4.5L19 7"/>
        </svg>
      );
    case "chevron":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="m9 6 6 6-6 6"/>
        </svg>
      );
    case "arrow":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      );
    case "search":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>
        </svg>
      );
    case "leaf":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M4 20c0-10 6-16 16-16 0 10-6 16-16 16Z"/><path d="M4 20 14 10"/>
        </svg>
      );
    case "crown":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="m3 8 4 4 5-7 5 7 4-4-1 11H4L3 8Z"/>
        </svg>
      );
    case "logo":
      return (
        <svg viewBox="0 0 32 32" fill="none" style={s}>
          <rect width="32" height="32" rx="9" fill={c}/>
          <path d="M10 22V10h5.5a3.5 3.5 0 0 1 0 7H12.5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="22" cy="20" r="1.5" fill="#fff"/>
        </svg>
      );
    case "qr":
      return (
        <svg viewBox="0 0 24 24" fill={c} style={s}>
          <path d="M3 3h7v7H3V3Zm2 2v3h3V5H5Zm9-2h7v7h-7V3Zm2 2v3h3V5h-3ZM3 14h7v7H3v-7Zm2 2v3h3v-3H5Zm9-2h2v2h-2v-2Zm2 2h2v2h-2v-2Zm2-2h3v2h-3v-2Zm0 4h2v2h-2v-2Zm-4 2h2v2h-2v-2Zm2 0h2v2h-2v-2Zm2 0h3v2h-3v-2Z"/>
        </svg>
      );
    case "euro":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M18 7A7 7 0 0 0 8 11M18 17A7 7 0 0 1 8 13M5 10h8M5 14h8"/>
        </svg>
      );
    case "x":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={s}>
          <path d="M6 6l12 12M18 6 6 18"/>
        </svg>
      );
    default:
      return null;
  }
}

function Stars({ value = 4.5, size = 14, color = "#F5A524" }) {
  const full = Math.floor(value);
  const half = value - full >= 0.4 && value - full < 0.9;
  const empty = 5 - full - (half ? 1 : 0);
  return (
    <span style={{ display: "inline-flex", gap: 1, alignItems: "center" }}>
      {Array.from({ length: full }).map((_, i) => <Icon key={"f" + i} name="star" size={size} color={color}/>)}
      {half && (
        <span style={{ position: "relative", width: size, height: size, display: "inline-block" }}>
          <span style={{ position: "absolute", inset: 0, color: "#E5E7EB" }}><Icon name="star" size={size} color="#E5E7EB"/></span>
          <span style={{ position: "absolute", inset: 0, width: "50%", overflow: "hidden" }}><Icon name="star" size={size} color={color}/></span>
        </span>
      )}
      {Array.from({ length: empty }).map((_, i) => <Icon key={"e" + i} name="star" size={size} color="#E5E7EB"/>)}
    </span>
  );
}

// Abstract placeholder image — striped gradient with label. Deterministic by seed.
function PlaceholderImage({ seed = 1, label = "parking photo", height = 160, rounded = 12 }) {
  // derive two hues deterministically
  const h1 = (seed * 47) % 360;
  const h2 = (h1 + 30) % 360;
  const bg = `linear-gradient(135deg, oklch(0.88 0.04 ${h1}), oklch(0.78 0.05 ${h2}))`;
  return (
    <div style={{
      position: "relative",
      height,
      borderRadius: rounded,
      overflow: "hidden",
      background: bg,
      display: "flex",
      alignItems: "flex-end",
      padding: 10,
    }}>
      {/* diagonal stripes */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 18px)",
      }}/>
      {/* little bezier "road" */}
      <svg viewBox="0 0 200 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.25 }}>
        <path d="M-10 80 C 40 40, 120 60, 210 20" stroke="#fff" strokeWidth="3" fill="none"/>
        <path d="M-10 95 C 30 60, 130 75, 210 35" stroke="#fff" strokeWidth="1" fill="none" strokeDasharray="4 4"/>
      </svg>
      {label && (
        <span style={{
          position: "relative",
          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
          fontSize: 10,
          letterSpacing: 0.4,
          textTransform: "uppercase",
          color: "rgba(20,30,40,0.55)",
          background: "rgba(255,255,255,0.6)",
          padding: "2px 6px",
          borderRadius: 4,
        }}>{label}</span>
      )}
    </div>
  );
}

function Badge({ kind, children }) {
  const styles = {
    shuttle: { bg: "oklch(0.95 0.03 230)", fg: "oklch(0.35 0.08 230)" },
    cctv: { bg: "oklch(0.95 0.025 200)", fg: "oklch(0.35 0.06 200)" },
    confirm: { bg: "oklch(0.95 0.04 150)", fg: "oklch(0.38 0.08 150)" },
    valet: { bg: "oklch(0.95 0.03 60)", fg: "oklch(0.4 0.08 60)" },
    premium: { bg: "oklch(0.95 0.04 310)", fg: "oklch(0.4 0.1 310)" },
    eco: { bg: "oklch(0.94 0.05 140)", fg: "oklch(0.4 0.1 140)" },
  };
  const s = styles[kind] || styles.shuttle;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      background: s.bg, color: s.fg,
      padding: "3px 8px", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: 0.1,
    }}>{children}</span>
  );
}

function BadgeFor({ kind, lang = "fr" }) {
  const labels = {
    fr: { shuttle: "Navette", cctv: "CCTV 24/7", confirm: "Confirmation immédiate", valet: "Voiturier", premium: "Premium", eco: "Éco" },
    en: { shuttle: "Shuttle", cctv: "CCTV 24/7", confirm: "Instant confirmation", valet: "Valet", premium: "Premium", eco: "Eco" },
  };
  const iconName = { shuttle: "shuttle", cctv: "cctv", confirm: "check", valet: "valet", premium: "crown", eco: "leaf" }[kind];
  return (
    <Badge kind={kind}>
      <Icon name={iconName} size={11} />
      {labels[lang][kind]}
    </Badge>
  );
}

Object.assign(window, { Icon, Stars, PlaceholderImage, Badge, BadgeFor });