// Scene components for the B2B scroll page (For Owners).
// Each scene renders the phone screen state plus optional desktop overlay.
// Step copy is generated from the active service so every label references their trade.
function buildOwnerSteps(cfg) {
const trade = cfg.name;
const mode = cfg.measureMode || 'satellite';
const measureStep = (function() {
if (mode === 'records') {
return { id:'satellite', eyebrow:'02 · Pull records', title:<>Pulled before they call., body:`County records, MLS, prior permits — pre-loaded for every ${trade.toLowerCase()} lead. ${cfg.atlas.label}: ${cfg.atlas.value}. Your estimator opens with context, not questions.` };
}
if (mode === 'dispatch') {
return { id:'satellite', eyebrow:'02 · Closest crew', title:<>Live radar. Fastest route., body:`Emergency intake fires the dispatch board. Crews, trucks, and traffic on one screen. Closest qualified tech is routed before the homeowner hangs up.` };
}
if (mode === 'photos') {
return { id:'satellite', eyebrow:'02 · From their photos', title:<>Their phone. Your scope., body:`Customer texts photos before the truck rolls. The system tags every item on the list and produces a scope sheet your tech can quote without a site visit.` };
}
if (mode === 'claim') {
return { id:'satellite', eyebrow:'02 · Claim + weather', title:<>The claim cross-checked., body:`Carrier data, claim status, and the weather event that caused the loss — loaded automatically. You walk in knowing what they're entitled to and what the adjuster will fight.` };
}
return { id:'satellite', eyebrow:'02 · Measure', title:<>From space, in seconds., body:`The system pulls fresh satellite imagery and measures ${cfg.atlas.label.toLowerCase()} for ${trade} jobs. ${cfg.atlas.value} captured before your truck leaves the lot.` };
})();
return [
{ id:'configured', eyebrow:'01 · Configured', title:<>Engine set for {trade}., body:`Pricing rules, custom fields, AR tags, and lead qualifiers just repointed to ${trade}. Same engine — your shape.` },
measureStep,
{ id:'ar', eyebrow:'03 · Walk it', title:<>Or let the homeowner do it., body:`Send a link. They walk the property with their phone — AR snaps lines, tags ${trade.toLowerCase()} features, and the engine prices everything as they move.` },
{ id:'fields', eyebrow:'04 · Your form', title:<>Your fields. Your pricing., body:`These are the fields ${trade} estimators actually care about. Drag, drop, set rules. Margins stay yours.` },
{ id:'qualify', eyebrow:'05 · Sort leads', title:<>Leads come pre-qualified., body:`The chat runs the intake with questions that matter for ${trade.toLowerCase()}. Budget, timeline, decision maker, urgency. A live score climbs cold to ready-to-buy.` },
{ id:'estimate', eyebrow:'06 · Send it', title:<>Sixty seconds to signed., body:`Line items, materials, labor, tax, deposit — priced against live ${trade.toLowerCase()} data. A signature line and a Stripe button. Your competition is still driving to the property.` },
{ id:'stack', eyebrow:'07 · Plug in', title:<>Sits on top of your stack., body:`It doesn't replace your tools — it runs them. Each ${trade} quote flows into your CRM, the calendar books the install, dispatch hands it to a crew, payroll closes the loop.` },
];
}
/* ============== INDUSTRY SCENE ============== */
const OWNER_INDUSTRIES = [
{ id:'roofing', name:'Roofing' },
{ id:'hvac', name:'HVAC' },
{ id:'solar', name:'Solar' },
{ id:'plumbing', name:'Plumbing' },
{ id:'electrical', name:'Electrical' },
{ id:'pool', name:'Pool' },
{ id:'tree', name:'Tree' },
{ id:'paint', name:'Paint' },
{ id:'fence', name:'Fence' },
{ id:'concrete', name:'Concrete' },
{ id:'pest', name:'Pest' },
{ id:'landscape', name:'Landscape' },
];
function SceneConfigured({ progress, config, onSwitch }) {
// Show the configured trade as a confirmation tile + a list of related trades that share the engine.
// Pulses through the configuration steps (form, pricing, agents, AR map).
const cfg = config || { name:'No trade picked', catLabel:'Pick one', fields:[], arTags:[], qualifyChecks:[], atlas:{ label:'—' } };
const items = [
{ label:'Custom fields', value:`${(cfg.fields||[]).length} fields`, done: progress > 0.05 },
{ label:'Pricing rules', value: config ? 'Loaded' : 'Waiting', done: progress > 0.20 },
{ label:'AR feature map',value:`${(cfg.arTags||[]).length} tags`, done: progress > 0.40 },
{ label:'Qualifier chat',value:`${(cfg.qualifyChecks||[]).length} checks`, done: progress > 0.60 },
{ label:'Satellite target', value: cfg.atlas?.label || '—', done: progress > 0.80 },
];
return (