// Question screens for ClearCoat onboarding // ─── Inline icons (simple stroke style, no external assets) ───── const Icon = { RefreshArrow: ( ), Sprout: ( ), Van: ( ), Building: ( ), BuildingSmall: ( ), BuildingMed: ( ), BuildingLarge: ( ), Person: ( ), Fleet: ( ), Target: ( ), Trend: ( ), Coin: ( ), Tool: ( ), Check: ( ), Plus: ( ), }; // ─── Step header (kicker + question + helper) ─────────────────── const StepHeader = ({ kicker, title, helper }) => (
{kicker}

{title}

{helper ? (

{helper}

) : null}
); // ─── Q1 — Replacement or fresh ────────────────────────────────── const QStartingPoint = ({ value, onChange }) => (
onChange('replace')} /> onChange('fresh')} />
); // ─── Q2 — Mobile vs B&M ───────────────────────────────────────── const QOperationType = ({ value, onChange }) => (
onChange('mobile')} /> onChange('shop')} />
); // ─── Q3a — Shop size ──────────────────────────────────────────── const QShopSize = ({ value, onChange }) => (
Up to
4 employees
} selected={value === 'small'} onClick={()=>onChange('small')} /> Up to
20 employees
} selected={value === 'medium'} onClick={()=>onChange('medium')} /> 20+
employees} selected={value === 'large'} onClick={()=>onChange('large')} /> ); // ─── Q3b — Mobile size ────────────────────────────────────────── const QMobileSize = ({ value, onChange }) => (
onChange('solo')} /> onChange('fleet')} />
); // ─── Q4 — Customers per week (slider with snap presets) ──────── const QVolume = ({ value, onChange }) => { const max = 200; const pct = Math.min(100, (value / max) * 100); const presets = [10, 25, 50, 100, 200]; const label = value < 10 ? 'Just getting going' : value < 25 ? 'A steady week' : value < 50 ? 'Busy week' : value < 100 ? 'High volume' : value < 200 ? 'Multi-bay machine' : '200+ per week'; return (
Per week
{value} {value >= max ? + : null}
cars / wk
{label}
onChange(Number(e.target.value))} className="cc-range" style={{'--pct': pct + '%'}} />
{presets.map(p => ( ))}
); }; // ─── Q5 — Primary goal ────────────────────────────────────────── const QGoal = ({ value, onChange }) => (
onChange('better')} /> onChange('scale')} /> onChange('cheaper')} /> onChange('starting')} />
); // ─── Q6 — Square account ──────────────────────────────────────── const QSquare = ({ value, onChange }) => (
} kicker="Connect" title="Yes — I have a Square account" description="We'll link it on the next step. Takes about 30 seconds." selected={value === 'has'} onClick={()=>onChange('has')} /> onChange('need')} /> onChange('later')} />
); Object.assign(window, { Icon, StepHeader, QStartingPoint, QOperationType, QShopSize, QMobileSize, QVolume, QGoal, QSquare, });