/* ========================================================= CarDealer.ai Home — Components Reuses sg-parts: Icon, Btn, Badge, AgentAvatar, Bubble, VoiceBars, TypingDots, AGENTS, AGENT_BY. ========================================================= */ const { useState, useEffect, useRef } = React; /* ---------- Reusable section header ---------- */ function SectionHead({ kicker, title, body, cta, align = "left", maxTitle = 820, dark }) { return (

{kicker ?

{kicker}

: null} {title ?

{title}

: null} {body ?

{body}

: null} {cta ?

{cta}

: null}

); } /* ========== Navigation ========== */ function HomeNav() { const [open, setOpen] = useState(false); // Close on outside click useEffect(() => { function handler(e) { if (!e.target.closest("[data-nav-menu]")) setOpen(false); } document.addEventListener("click", handler); return () => document.removeEventListener("click", handler); }, []); return (

{open ? setOpen(false)} /> : null} Pricing Customers

); } function MegaMenu({ onClose }) { const columns = [ { label: "Sales", items: [ { label: "Outbound Sales", agent: "summer", desc: "Reactivate dormant + trade-cycle.", href: "summer-ai-sales-agent.html" }, { label: "Inbound Sales", agent: "summer", desc: "Instant CRM lead response." }, ], }, { label: "Service", items: [ { label: "Outbound Service", agent: "april", desc: "Re-engage lapsed customers." }, { label: "Inbound Service", agent: "taylor", desc: "Book service 24/7." }, { label: "Recalls", agent: "riley", desc: "Turn recalls into appointments." }, ], }, { label: "Reception", items: [ { label: "Receptionist", agent: "avery", desc: "Never miss an inbound call." }, { label: "Bilingual Agent", agent: "lily", desc: "Spanish + multi-language." }, ], }, { label: "CRM", items: [ { label: "Speed2Lead", agent: "summer", desc: "First touch within seconds." }, ], }, ]; return (

e.stopPropagation()} style={{ position: "absolute", top: 70, left: 0, right: 0, background: "var(--bg)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", boxShadow: "var(--e-3)", padding: "32px 0", animation: "hRise 200ms ease both", }}>

{columns.map(col => (

{col.label}

{col.items.map(item => { const agent = AGENT_BY[item.agent]; return (

{item.label}

{item.desc}

); })}

))}

); } /* ========== Phone-capture CTA — replaces "See it in action" ========== */ function PhoneCaptureCTA({ dark = false }) { const [stage, setStage] = useState("idle"); // idle | input | submitted const [phone, setPhone] = useState(""); const [counter, setCounter] = useState(10); const [error, setError] = useState(""); const inputRef = useRef(null); useEffect(() => { if (stage === "input" && inputRef.current) inputRef.current.focus(); }, [stage]); useEffect(() => { if (stage !== "submitted") return; if (counter <= 0) return; const t = setTimeout(() => setCounter(c => c - 1), 1000); return () => clearTimeout(t); }, [stage, counter]); function formatPhone(input) { const digits = input.replace(/\D/g, "").slice(0, 10); if (digits.length === 0) return ""; if (digits.length < 4) return `(${digits}`; if (digits.length < 7) return `(${digits.slice(0,3)}) ${digits.slice(3)}`; return `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`; } const isValid = phone.replace(/\D/g, "").length === 10; function submit(e) { if (e) e.preventDefault(); if (!isValid) return; const digits = phone.replace(/\D/g, ""); setError(""); setStage("submitted"); setCounter(10); fetch("/api/test-call", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ phone: digits }), }) .then(res => res.json().catch(() => ({})).then(data => ({ ok: res.ok, data }))) .then(({ ok, data }) => { if (!ok || !data.ok) { setError((data && data.error) || "Something went wrong starting the call. Please try again."); } }) .catch(() => { setError("Couldn't reach the server. Please try again."); }); } function reset() { setStage("idle"); setPhone(""); setCounter(10); setError(""); } if (stage === "idle") { return ( ); } if (stage === "input") { return ( ); } // submitted return (

{error ? (

{error}

) : (

Jordan will call you at {phone}

)} {error ? null : (

{counter > 0 ? `Connecting in ${counter}s` : "Connecting now"} {counter > 0 ? : null}

)}

); } /* ========== Hero ========== */ function Hero() { return (

{/* Subtle radial accent */}

6 AI employees ready for work

AI Employees
For Car Dealerships

Get more leads and book more appointments. AI agents that handle the calls, messages, and follow-ups your team doesn't have time for.

Book a demo

); } function HeroIllustration() { return (

{/* Orb backdrop */}

{/* Call 1 — Summer outbound buyback */}

{/* Call 2 — Taylor inbound service */}

{/* Call 3 — Riley recall */}

); } /* Voice-call card — emphasises VOICE, not text */ function VoiceCallCard({ agent, direction, number, duration, transcript, intensity = 1 }) { return (

{/* Top row — live indicator + direction + duration */}

Live {direction} {duration}

{/* Caller info row */}

{agent.name}

{agent.role}

{direction === "Inbound" ? "Caller" : "To"}

{number}

{/* Big animated waveform */}

{/* Live transcript caption */}

Live transcript · {agent.name}

"{transcript}"

); } /* Full-width waveform — more bars + varied heights for a real voice look */ function FullWaveform({ color = "currentColor", count = 40, intensity = 1 }) { // Pseudorandom but stable heights const heights = []; for (let i = 0; i < count; i++) { const t = (i / count) * Math.PI * 4; const h = (0.4 + 0.6 * Math.abs(Math.sin(t) * Math.cos(t * 1.7))) * intensity; heights.push(Math.max(0.15, h)); } return (

{heights.map((h, i) => ( ))}

); } /* ========== Agent spotlight (Meet the Agents) ========== */ function AgentSpotlight({ agent, idx }) { const [hover, setHover] = useState(false); const [playing, setPlaying] = useState(false); const [progress, setProgress] = useState(0); // 0..1 const audioRef = useRef(null); const hasAudio = !!agent.audio; // Listen to audio events useEffect(() => { const a = audioRef.current; if (!a) return; const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); const onEnded = () => { setPlaying(false); setProgress(0); }; const onTime = () => { if (a.duration) setProgress(a.currentTime / a.duration); }; a.addEventListener("play", onPlay); a.addEventListener("pause", onPause); a.addEventListener("ended", onEnded); a.addEventListener("timeupdate", onTime); return () => { a.removeEventListener("play", onPlay); a.removeEventListener("pause", onPause); a.removeEventListener("ended", onEnded); a.removeEventListener("timeupdate", onTime); }; }, [agent.audio]); function toggle() { const a = audioRef.current; if (!a) return; if (a.paused) { // Pause every other agent audio playing on the page document.querySelectorAll('audio[data-agent-audio]').forEach(other => { if (other !== a && !other.paused) other.pause(); }); a.play().catch(() => {}); } else { a.pause(); } } return (

setHover(true)} onMouseLeave={() => setHover(false)} data-agent={agent.id} style={{ background: "var(--bg)", border: playing ? "1px solid var(--cobalt-300)" : "1px solid var(--line)", borderRadius: 24, overflow: "hidden", boxShadow: playing ? "0 0 0 4px rgba(31,93,255,0.10), var(--e-3)" : "var(--e-2)", display: "flex", flexDirection: "column", transition: "transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease", transform: hover ? "translateY(-4px)" : "translateY(0)", }} > {/* Looping video poster */}

{agent.video ? (

{/* Body */}

{agent.descriptor}

{agent.description}

{hasAudio ? (

{/* Waveform — only animates when playing */}

{/* Progress bar */}

Hire me ) : ( Demo coming soon

Hire me )}

); } /* Playback-driven waveform — bars are static when paused, animated when on */ function PlaybackWave({ on, count = 24, color = "currentColor" }) { const heights = []; for (let i = 0; i < count; i++) { const t = (i / count) * Math.PI * 4; const h = 0.4 + 0.6 * Math.abs(Math.sin(t) * Math.cos(t * 1.7)); heights.push(Math.max(0.2, h)); } return (

{heights.map((h, i) => ( ))}

); } /* ========== Feature hub (radial composition) ========== */ function FeatureHub() { // Layout: 6 agent avatars cluster at center of a 720x720 stage, // 7 feature labels orbit at the rim, each connected by a curved electric line. const W = 760, H = 640, cx = W / 2, cy = H / 2; // Agent cluster positions (small inner ring) const innerR = 78; const agentLayout = AGENTS.map((a, i) => { const angle = (i / AGENTS.length) * Math.PI * 2 - Math.PI / 2; return { ...a, x: cx + Math.cos(angle) * innerR, y: cy + Math.sin(angle) * innerR, }; }); // Feature label positions (outer arc) const features = [ { id: "unsold", label: "Reactivate Unsold Leads", agent: "summer", angle: -110 }, { id: "past", label: "Reactivate Past Customers", agent: "summer", angle: -55 }, { id: "service", label: "Reactivate Service Customers", agent: "april", angle: 0 }, { id: "voicemail",label: "Don't Let Calls Go To Voicemail",agent: "taylor", angle: 55 }, { id: "crm", label: "Answer Every CRM Lead", agent: "summer", angle: 110 }, { id: "recall", label: "Turn Recalls Into Bookings", agent: "riley", angle: 165 }, { id: "missed", label: "Never Miss A Call Again", agent: "avery", angle: -160 }, ]; const outerR = 280; const featureLayout = features.map((f, i) => { const angle = (f.angle * Math.PI) / 180; return { ...f, x: cx + Math.cos(angle) * outerR, y: cy + Math.sin(angle) * outerR, }; }); // Connecting lines const lines = featureLayout.map(f => { const a = agentLayout.find(x => x.id === f.agent); return { from: { x: a.x, y: a.y }, to: { x: f.x, y: f.y }, key: f.id }; }); return (

{/* Agent cluster (HTML positioned over SVG) */} {agentLayout.map((a, i) => (

))} {/* Feature chips */} {featureLayout.map((f, i) => { // Anchor chip on outside of orbit, centered on radial line const anchorLeft = f.x < cx; return (

{f.label}

); })}

); } /* ========== Feature card ========== */ function FeatureCard({ kicker, title, agent, bullets, tools, accent }) { return (

{/* Header — agent + kicker */}

{kicker}

{agent.name} · {agent.role}

{/* Title */}

{title}

{/* Bullets */}

{/* Tools footer */}

{tools.map(t => ( {t === "Voice" ? : null} {t === "SMS" ? : null} {t} ))}

Learn more →

); } /* ========== Marquee (floating feature words) ========== */ function Marquee({ items, direction = "left", speed = 50 }) { const doubled = [...items, ...items]; return (

{doubled.map((item, i) => ( {item} ))}

); } /* ========== Integration tile ========== */ function IntegrationTile({ name, desc, icon }) { return (

{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--e-3)"; }} onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }} >

{name}

{desc}

Don't see yours? Just ask →

); } /* ========== Team Sells Cars hero illustration ========== */ function TeamSellsHero() { // Use the supplied ready-made composite (woman with headset + waveform + agent chips). // Add a couple of live-floating elements around it for extra polish. return (

A dealer team member working with AI employees handling calls

{/* Floating bubble chip — Riley */}

{/* Floating bubble chip — Taylor */}

{/* Live call counter pinned bottom right */}

14 active calls

); } function BubbleChip({ agent, text }) { return (

{text}

); } /* ========== Before / After ========== */ function BeforeAfter({ rows }) { return (

{/* Header row */}

Before AI

Leaky funnel.

After AI

Every lead, captured.

{/* Comparison rows */} {rows.map((r, i) => (

{r.before}

{r.after}

))}

); } /* ========== Closer / Growth illustration ========== */ function GrowthIllo() { // Animated bar chart with agent face at top const bars = [38, 54, 49, 70, 64, 88, 96]; return (

{/* Agent floating at top right */}

{/* Bubble from agent */}

{/* Bars */}

); } /* ========== Footer ========== */ function HomeFooter() { return ( ); } function FooterCol({ label, links }) { return (

{label}

); } function SocialGlyph({ name }) { const paths = { instagram: "M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z", facebook: "M13 22v-9h3l.5-4H13V7c0-1 .5-2 2-2h2V1.5A22 22 0 0 0 14 1c-3 0-5 2-5 5v3H6v4h3v9h4z", linkedin: "M4 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM3 9h2v13H3V9zm6 0h2v2c.5-1 2-2 4-2 3 0 5 2 5 6v7h-2v-7c0-2-1-3-3-3s-3 1-3 3v7H9V9z", youtube: "M2 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7zm8 3v6l6-3-6-3z", }; return ( ); } /* ========== Conversation side-panel — for portal demo ========== */ function ConversationPanel({ row, onClose }) { // Looping demo script: caller (customer) ↔ AI agent on a voice call. // Lines reveal sequentially, then reset. const script = [ { who: "caller", text: "Hey, I'm calling about service for my CR-V." }, { who: "agent", text: "Of course. What kind of service do you need?" }, { who: "caller", text: "Just an oil change and tire rotation." }, { who: "agent", text: "I can get you in this Thursday at 10 a.m. Does that work?" }, { who: "caller", text: "Yeah, that works." }, { who: "agent", text: "Booked. I'll text you a confirmation right now." }, ]; const [step, setStep] = useState(0); // Advance through messages, looping useEffect(() => { const stepDelay = step === script.length - 1 ? 2400 : 1400; const t = setTimeout(() => { setStep(s => s >= script.length - 1 ? 0 : s + 1); }, stepDelay); return () => clearTimeout(t); }, [step]); const visible = script.slice(0, step + 1); const totalDuration = "2:14"; const channelLabel = row?.channel === "email" ? "Email" : row?.channel === "sms" ? "SMS" : row?.channel === "chat" ? "Chat" : "Voice call"; return (

{/* Backdrop scrim */}

{/* Panel */}

{/* Header */}

{row.agent.name}

{row.agent.role}

{/* Call meta strip */}

{/* Transcript */}

Live transcript

{visible.map((m, i) => ( ))} {step < script.length - 1 ? (

) : null}

{/* Footer player */}

00:{String(Math.min(step * 22, 134)).padStart(2, "0")} {totalDuration}

); } function Meta({ label, value, mono }) { return (

{label}

{value}

); } function TranscriptLine({ who, text, agentSrc }) { const isAgent = who === "agent"; return (

{isAgent ? : null}

{text}

); } /* ---------- Export ---------- */ Object.assign(window, { SectionHead, HomeNav, Hero, VoiceCallCard, FullWaveform, PhoneCaptureCTA, AgentSpotlight, FeatureHub, FeatureCard, Marquee, IntegrationTile, TeamSellsHero, BeforeAfter, GrowthIllo, HomeFooter, BubbleChip, ConversationPanel, });

{title}

AI EmployeesFor Car Dealerships

AI Employees
For Car Dealerships