/* =========================================================
CarDealer.ai Style Guide — building blocks
All primitives, components, motion demos, agent + bubble UI
Exported to window for cross-file use.
========================================================= */
/* ---------- Section / Layout primitives ---------- */
function SGSection({ id, kicker, title, lead, alt, children }) {
return (
{kicker ?
{kicker}
: null}
{title ?
{title}
: null}
{lead ?
{lead}
: null}
{children}
{children}
);
}
function SGCard({ children, padding = 24, bg, border = true, shadow, radius = 16, style }) {
return (
{children}
);
}
function SGRule({ label }) {
return (
);
}
/* ---------- Color chip ---------- */
function ColorChip({ name, hex, swatchStyle, contrast = "dark" }) {
return (
);
}
/* ---------- Icons (filled / solid system — Material-inspired) ---------- */
// Single source of truth for the icon set.
const SG_ICONS = {
dashboard: (
),
chat: (
),
bolt: (
),
calendar: (
),
megaphone: (
),
user: (
),
phone: (
),
settings: (
),
check: (
),
spark: (
),
trending: (
),
search: (
),
envelope: (
),
arrowRight: (
),
close: (
),
inbox: (
),
};
function Icon({ name, size = 24, color = "currentColor", background, padding = 0, radius = 8 }) {
const svg = SG_ICONS[name];
if (!svg) return null;
const inner = (
{React.cloneElement(svg, { width: size, height: size })}
);
if (!background) return inner;
return (
{inner}
);
}
/* ---------- Buttons ---------- */
const DEMO_URL = "https://calendly.com/charles-cardealer/30min";
function Btn({ variant = "primary", size = "md", children, icon, fullWidth, style, href, target, onClick }) {
const sizes = {
sm: { pad: "8px 14px", fs: 13, h: 32, r: 8 },
md: { pad: "10px 18px", fs: 14, h: 40, r: 10 },
lg: { pad: "14px 24px", fs: 15, h: 48, r: 12 },
};
const s = sizes[size];
const variants = {
primary: { bg: "var(--cobalt-500)", color: "#fff", border: "none", shadow: "0 1px 0 rgba(11,27,43,0.08), 0 2px 4px rgba(31,93,255,0.18)" },
secondary: { bg: "var(--bg)", color: "var(--ink)", border: "1px solid var(--line)", shadow: "none" },
tonal: { bg: "var(--cobalt-50)", color: "var(--cobalt-600)", border: "none", shadow: "none" },
ghost: { bg: "transparent", color: "var(--cobalt-600)", border: "none", shadow: "none" },
danger: { bg: "var(--bg)", color: "#B91C1C", border: "1px solid #FECACA", shadow: "none" },
};
const v = variants[variant];
const sharedStyle = {
display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
padding: s.pad, fontSize: s.fs, fontWeight: 600, height: s.h, borderRadius: s.r,
background: v.bg, color: v.color, border: v.border, boxShadow: v.shadow,
cursor: "pointer", fontFamily: "var(--font-body)", letterSpacing: "0.005em",
whiteSpace: "nowrap", textDecoration: "none", boxSizing: "border-box",
transition: "transform 120ms ease, box-shadow 120ms ease, background 120ms ease",
width: fullWidth ? "100%" : undefined, ...(style || {}),
};
const content = (
{icon ? : null}
{children}
);
if (href) {
const rel = target === "_blank" ? "noopener noreferrer" : undefined;
return (
{content}
);
}
return (
);
}
/* ---------- Input ---------- */
function Input({ label, placeholder, defaultValue, icon, helper }) {
return (
);
}
/* ---------- Badges / Tags / Sentiment chips ---------- */
function Badge({ tone = "default", children, dot, size = "md" }) {
const palettes = {
default: { bg: "var(--neutral-bg)", fg: "#374151" },
info: { bg: "var(--cobalt-50)", fg: "var(--cobalt-700)" },
positive: { bg: "var(--positive-bg)", fg: "var(--positive)" },
warning: { bg: "var(--warning-bg)", fg: "var(--warning)" },
mixed: { bg: "var(--mixed-bg)", fg: "var(--mixed)" },
ink: { bg: "var(--ink)", fg: "#fff" },
};
const p = palettes[tone];
const sizing = size === "sm"
? { pad: "3px 8px", fs: 11, gap: 5 }
: { pad: "5px 10px", fs: 12, gap: 6 };
return (
{dot ? : null}
{children}
);
}
/* ---------- Agent profile picture treatment ---------- */
function AgentAvatar({ src, name, size = 96, status, ring = true, animate = false }) {
const statusColor = status === "live" ? "#10B26C" : status === "idle" ? "#9CA3AF" : status === "busy" ? "#F59E0B" : null;
const dot = size * 0.20;
return (
{animate && status === "live" ? (
) : null}
{statusColor ? (
) : null}
);
}
function AgentCard({ src, name, role, status = "live", live = false }) {
return (
{live ? (
On a call
) : status === "idle" ? (
Standing by
) : null}
);
}
/* ---------- Conversation bubbles (iMessage-style pills) ---------- */
function Bubble({ side = "in", text, voice, src }) {
const isIn = side === "in";
return (
{isIn && src ?
: null}
{voice ? : text}
{[0, 0.5, 1.0].map((d, i) => (
))}
);
}
/* Motion demo: float */
function MotionFloat() {
return (
);
}
/* Motion demo: routing path (dashed line traveling) */
function MotionPath() {
return (
);
}
/* Motion demo: voice waveform */
function MotionWave() {
return (
);
}
/* ---------- Illustration tiles (the three approved styles) ---------- */
function IllRouting() {
// Path metaphor with floating nodes
return (
);
}
function IllGeometric() {
// Line/geometric — overlapping circles + line
return (
);
}
function IllOrb() {
// 3D-ish gradient sphere with breathing motion
return (
);
}
/* ---------- Mini metric tile (used in dashboard preview AND component lib) ---------- */
function StatTile({ icon, label, value, delta, tone = "info" }) {
return (
);
}
/* ---------- Agent registry (shared between guide + dashboard) ---------- */
const AGENTS = [
{ id: "summer", name: "Summer", role: "AI Sales Agent", src: "assets/agents/summer.jpg", video: "assets/agents/summer.mp4", audio: "assets/agents/summer.mp3", status: "live",
descriptor: "Drives more sales appointments.",
description: "Makes outbound calls to dormant and trade-cycle customers, engages hot internet leads the moment they arrive, and schedules sales appointments directly into your CRM." },
{ id: "april", name: "April", role: "AI Service Reactivation Agent", src: "assets/agents/april.jpg", video: "assets/agents/april.mp4", audio: "assets/agents/april.mp3", status: "live",
descriptor: "Brings back lost service customers.",
description: "Reaches out to overdue and lapsed customers, handles objections, and schedules service appointments. She helps dealerships unlock revenue they already paid for." },
{ id: "taylor", name: "Taylor", role: "AI Inbound Service Scheduler", src: "assets/agents/taylor.jpg", video: "assets/agents/taylor.mp4", audio: "assets/agents/taylor.mp3", status: "live",
descriptor: "Answers calls and books service.",
description: "Answers every service call 24/7 and books real appointments. She accesses history and transfers calls when needed." },
{ id: "avery", name: "Avery", role: "AI Receptionist", src: "assets/agents/avery.jpg", video: "assets/agents/avery.mp4", audio: "assets/agents/avery.wav", status: "live",
descriptor: "Greets, routes calls, and connects instantly.",
description: "Answers inbound calls, routes customers, and schedules sales appointments. Delivers a consistent first impression day, night, weekends, and holidays." },
{ id: "riley", name: "Riley", role: "AI Recall Agent", src: "assets/agents/riley.jpg", video: "assets/agents/riley.mp4", audio: "assets/agents/riley.mp3", status: "live",
descriptor: "Converts recalls into service visits.",
description: "Proactively contacts customers with open recalls, explains the free repair, and schedules appointments. Improves compliance, safety, and fixed-ops revenue." },
{ id: "lily", name: "Lily", role: "AI Service-to-Sales Agent", src: "assets/agents/lily.jpg", video: "assets/agents/lily.mp4", audio: "assets/agents/lily.wav", status: "live",
descriptor: "Turns service visits into sales conversations.",
description: "Identifies positive-equity customers sitting in the service drive, opens the trade-in conversation, and hands warm prospects to the sales team with a booked appointment." },
];
/* ---------- Expose to other scripts ---------- */
const AGENT_BY = AGENTS.reduce((acc, a) => { acc[a.id] = a; return acc; }, {});
Object.assign(window, {
SGSection, SGGrid, SGCard, SGRule, ColorChip, Icon, SG_ICONS,
Btn, Input, Badge, DEMO_URL,
AgentAvatar, AgentCard, AGENTS, AGENT_BY,
Bubble, VoiceBars, TypingDots,
MotionTile, MotionPulse, MotionFloat, MotionPath, MotionWave,
IllRouting, IllGeometric, IllOrb,
StatTile,
});