// components.jsx — Concierge design system primitives
const GOLD = "#D4AF6D";
const GOLD_DIM = "#8C7546";
const INK = "#0E0E0E";
const SURFACE = "#171717";
const SURFACE_2 = "#1F1F1F";
const HAIRLINE = "rgba(255,255,255,0.08)";
const HAIRLINE_GOLD = "rgba(212,175,109,0.18)";
const TEXT_DIM = "rgba(255,255,255,0.52)";
const TEXT_MUTED = "rgba(255,255,255,0.72)";
// ─────────── Brand spark — diamond with 4 rays ─────────────
function Spark({ size = 14, color = GOLD, animate = false }) {
return (
);
}
// ─────────── Wordmark ─────────────
function ConciergeMark({ size = 14, color = "#fff" }) {
return (
Concierge
);
}
// ─────────── Hairline-bordered card with subtle inner highlight ─────────────
function Card({ children, style = {}, gold = false, onClick, padding = 16 }) {
return (
{children}
);
}
// ─────────── Hairline divider ─────────────
function Hairline({ gold = false, style = {} }) {
return ;
}
// ─────────── Mono caption (used a lot) ─────────────
function Mono({ children, style = {}, color = TEXT_DIM, size = 10, weight = 400 }) {
return {children};
}
// ─────────── Serif numeral / heading ─────────────
function Serif({ children, size = 28, weight = 400, color = "#fff", style = {} }) {
return {children};
}
// ─────────── Gold pill button ─────────────
function GoldButton({ children, onClick, style = {}, ghost = false, small = false }) {
return (
);
}
// ─────────── Ghost icon button (round, hairline) ─────────────
function IconButton({ children, onClick, size = 36, style = {} }) {
return (
);
}
// ─────────── Sparkline (for fuel/odometer/spend) ─────────────
function Sparkline({ data, w = 80, h = 20, color = GOLD }) {
if (!data || data.length < 2) return null;
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * w;
const y = h - ((v - min) / range) * h;
return `${x},${y.toFixed(1)}`;
}).join(" ");
return (
);
}
// ─────────── Custom glyphs (no emoji, no library) ─────────────
const Glyph = {
fuel: (s = 18, c = "#fff") => (
),
wrench: (s = 18, c = "#fff") => (
),
shield: (s = 18, c = "#fff") => (
),
alert: (s = 18, c = "#fff") => (
),
receipt: (s = 18, c = "#fff") => (
),
cap: (s = 18, c = "#fff") => (
),
transponder: (s = 18, c = "#fff") => (
),
road: (s = 18, c = "#fff") => (
),
swap: (s = 18, c = "#fff") => (
),
mic: (s = 18, c = "#fff") => (
),
send: (s = 18, c = "#fff") => (
),
arrowRight: (s = 14, c = "#fff") => (
),
close: (s = 16, c = "#fff") => (
),
back: (s = 18, c = "#fff") => (
),
check: (s = 14, c = "#fff") => (
),
more: (s = 18, c = "#fff") => (
),
pin: (s = 14, c = "#fff") => (
),
calendar: (s = 14, c = "#fff") => (
),
card: (s = 14, c = "#fff") => (
),
};
// ─────────── Car silhouette placeholder (no real Kia photo) ─────────────
function CarSilhouette({ width = 320, height = 140 }) {
return (
);
}
Object.assign(window, {
GOLD, GOLD_DIM, INK, SURFACE, SURFACE_2, HAIRLINE, HAIRLINE_GOLD, TEXT_DIM, TEXT_MUTED,
Spark, ConciergeMark, Card, Hairline, Mono, Serif, GoldButton, IconButton, Sparkline,
Glyph, CarSilhouette,
});