const custStyles = {
page:{maxWidth:560, margin:"0 auto", padding:"0 20px calc(96px + env(safe-area-inset-bottom))", minHeight:"100vh"},
header:{display:"flex", alignItems:"center", gap:10, padding:"18px 0 6px"},
footer:{position:"fixed", left:0, right:0, bottom:0, background:"var(--bg-1)", borderTop:"1px solid var(--border)", padding:"12px 20px calc(12px + env(safe-area-inset-bottom))", zIndex:5},
footerInner:{maxWidth:560, margin:"0 auto", display:"flex", gap:"var(--s-3)", alignItems:"center"},
label:{fontSize:13, fontWeight:500, color:"var(--fg-1)", marginBottom:8, display:"block"},
hint:{fontSize:12, color:"var(--fg-3)", marginTop:6},
};
const WIZ_STEPS = [
{id:"issue", label:"Problem"},
{id:"category", label:"Type"},
{id:"property", label:"Property"},
{id:"timing", label:"Timing"},
{id:"contact", label:"Contact"},
];
function WizardNav({nav}){
return
{WIZ_STEPS.map((s,i)=>{
const done = i < nav.idx, cur = i === nav.idx;
return
{i>0 && done && nav.onJump(i)} disabled={!done} aria-label={s.label+(done?" (done)":cur?" (current)":"")} style={{display:"flex", alignItems:"center", gap:5, border:"none", background:"none", padding:0, cursor:done?"pointer":"default"}}>
{done?
{s.label}
;
})}
{(nav.pending>0 || nav.loading) &&
{nav.loading ? "Reading your description and photos…" : nav.pending+" quick question"+(nav.pending>1?"s":"")+" below — answers sharpen your quote"}
}
;
}
function CustHeader({onBack, nav}){
return
{onBack ? {BRAND}
{nav && nav.show &&
}
{nav && !nav.show && nav.idx>=0 && nav.idx<5 &&
}
;
}
function StickyCTA({label, onClick, disabled, secondary}){
return ;
}
function Field({label, hint, children}){
return
{label}
{children}
{hint &&
{hint}
}
;
}
function emptyDraft(){
return {category:null, categories:[], categoryOther:"", description:"", photos:[], property:{type:"", age:"", access:"", address:"", coords:null}, urgency:null, customer:{name:"", phone:"", email:"", pref:""}};
}
function CustomerApp({tweaks}){
const t = tweaks || {};
const inlineMode = t.questionsMode !== "End chat";
const maxQ = Math.round(t.maxQuestions || 4);
const [screen, setScreen] = useState("welcome");
const [draft, setDraft] = useState(emptyDraft);
const [qa, setQa] = useState([]);
const [transcript, setTranscript] = useState([]);
const [summary, setSummary] = useState(null);
const [ref, setRef] = useState("");
const [aiQ, setAiQ] = useState({loading:false, observation:"", list:[]});
const genOnce = useRef(false);
const summarizedCount = useRef(-1);
const up = (patch)=>setDraft(d=>({...d, ...patch}));
const answered = aiQ.list.filter(x=>x.answer!=null && x.answer!=="__skip");
const pending = aiQ.list.filter(x=>x.answer==null);
const genQuestions = ()=>{
if(genOnce.current || !inlineMode) return;
genOnce.current = true;
setAiQ(s=>({...s, loading:true}));
batchQuestions(draft, maxQ).then(res=>{
setAiQ({loading:false, observation:res.observation||"", list:(res.questions||[]).slice(0, maxQ).map(x=>({id:uid(), q:x.question, quickReplies:(x.quickReplies||[]).slice(0,4), source:x.source==="photos"?"photos":"description", answer:null}))});
}).catch(()=>{
setAiQ({loading:false, observation:"", list:FALLBACK_QS.slice(0, Math.min(3, maxQ)).map(f=>({id:uid(), q:f.question, quickReplies:f.quickReplies||[], source:"description", answer:null}))});
});
};
const answerQ = (id, text)=>setAiQ(s=>({...s, list:s.list.map(x=>x.id===id?{...x, answer:text}:x)}));
const skipQ = (id)=>setAiQ(s=>({...s, list:s.list.map(x=>x.id===id?{...x, answer:"__skip"}:x)}));
const inlineQa = ()=>answered.map(x=>({q:x.q, a:x.answer}));
const openQs = ()=>aiQ.list.filter(x=>x.answer==null || x.answer==="__skip").map(x=>x.q);
const inlineTranscript = ()=>{
const msgs = [];
if(aiQ.observation) msgs.push({role:"ai", text:aiQ.observation});
aiQ.list.forEach(x=>{ if(x.answer!=null && x.answer!=="__skip"){ msgs.push({role:"ai", text:x.q}); msgs.push({role:"user", text:x.answer}); } });
return msgs;
};
const buildAndReview = async (qaList, unanswered)=>{
setScreen("building");
let s; try{ s = await buildSummary(draft, qaList, unanswered); }catch(e){ s = fallbackSummary(draft, qaList); }
summarizedCount.current = qaList.length;
setSummary(s); setScreen("review");
};
const submit = async ()=>{
let s = summary;
const qaList = inlineMode ? inlineQa() : qa;
if(inlineMode && qaList.length !== summarizedCount.current){
setScreen("building");
try{ s = await buildSummary(draft, qaList, openQs()); }catch(e){}
}
const reqRef = "QR-" + (2400 + Math.floor(Math.random()*500));
const req = {id:uid(), ref:reqRef, createdAt:Date.now(), status:"new", category:draft.categories[0]||"handyman", categories:draft.categories, categoryOther:draft.categoryOther, urgency:draft.urgency,
customer:draft.customer, property:draft.property, description:draft.description, photos:draft.photos,
transcript:inlineMode ? inlineTranscript() : transcript, ai:s, quote:null};
saveRequests([req, ...loadRequests()]);
setRef(reqRef); setScreen("done");
};
const idx = screen==="welcome" ? -1 : ["review","building","done"].includes(screen) ? 5 : WIZ_STEPS.findIndex(s=>s.id===screen);
const nav = {show:t.sectionNav!==false, idx, onJump:(i)=>setScreen(WIZ_STEPS[i].id), pending:inlineMode?pending.length:0, loading:inlineMode&&aiQ.loading};
const screens = {
welcome: setScreen("issue")}> ,
issue: setScreen("welcome")} onNext={()=>setScreen("category")}> ,
category: setScreen("issue")} onNext={()=>{genQuestions(); setScreen("property");}}> ,
property: setScreen("category")} onNext={()=>setScreen("timing")}> ,
timing: setScreen("property")} onNext={()=>setScreen("contact")}> ,
contact: setScreen("timing")} onNext={()=>{ inlineMode ? buildAndReview(inlineQa(), openQs()) : setScreen("chat"); }}> ,
chat: buildAndReview(finalQa, [])}> ,
building: setScreen("contact")}> ,
done: {setDraft(emptyDraft()); setQa([]); setTranscript([]); setSummary(null); setAiQ({loading:false, observation:"", list:[]}); genOnce.current=false; summarizedCount.current=-1; setScreen("welcome");}}> ,
};
const showInline = inlineMode && ["property","timing","contact","review"].includes(screen);
return
{screens[screen]}
{showInline &&
;
}
function Welcome({onStart}){
return
Repair quotes
Get a quote without the phone tag.
Tell us what's broken. Our assistant asks the few questions we'd ask on a site visit, so your quote is accurate the first time.
{[["clipboard-list","Describe the problem","2 minutes, photos help"],["message-circle","Answer a few smart questions","Asked as you go — only what affects the price"],["file-text","Get your quote","We reply within 1 business day"]].map((s,i)=>
{s[1]} {s[2]}
)}
No account needed. Your details go to {BRAND} only.
;
}
function StepIssue({draft, up, nav, onBack, onNext}){
const fileRef = useRef();
const [busy, setBusy] = useState(false);
const valid = draft.description.trim().length >= 10;
const addPhotos = async (files)=>{
setBusy(true);
const list = [...draft.photos];
for(const f of Array.from(files).slice(0, 6-list.length)){
try{ list.push(await resizePhoto(f)); }catch(e){}
}
up({photos:list}); setBusy(false);
};
return
What needs fixing?
{draft.photos.map((p,i)=>
up({photos:draft.photos.filter((_,j)=>j!==i)})} style={{position:"absolute", top:-6, right:-6, width:22, height:22, borderRadius:"50%", border:"none", background:"var(--ink-900)", color:"#fff", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", padding:0}}>
)}
{draft.photos.length<6 &&
fileRef.current.click()} disabled={busy}>
}
;
}
function StepCategory({draft, up, nav, onBack, onNext}){
const [guessing, setGuessing] = useState(!draft.categories.length);
const [showOther, setShowOther] = useState(!!draft.categoryOther);
const guessed = useRef(false);
useEffect(()=>{
if(draft.categories.length || guessed.current) return;
guessed.current = true;
classifyCategory(draft.description).then(cats=>{ up({categories:cats}); setGuessing(false); });
}, []);
const toggle = (id)=>up({categories: draft.categories.includes(id) ? draft.categories.filter(c=>c!==id) : [...draft.categories, id]});
const valid = draft.categories.length>0 || draft.categoryOther.trim();
return
Type of work
{guessing ? "Reading your description…" : "Based on your description — tap to adjust, pick as many as apply."}
{guessing ?
:
{CATEGORIES.map(c=>toggle(c.id)}> )}
{ if(showOther) up({categoryOther:""}); setShowOther(!showOther); }}>
{showOther &&
up({categoryOther:e.target.value})}>}
}
;
}
async function reverseGeocode(lat, lng){
const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`, {headers:{Accept:"application/json"}});
const j = await res.json();
const a = j.address || {};
const line = [ [a.house_number, a.road].filter(Boolean).join(" "), a.suburb || a.neighbourhood, a.city || a.town || a.village ].filter(Boolean).join(", ");
return line || j.display_name || "";
}
function LocateMap({coords, onMove}){
const mapRef = useRef(null);
const objRef = useRef(null);
useEffect(()=>{
if(!coords || !window.L || !mapRef.current) return;
if(!objRef.current){
const map = L.map(mapRef.current).setView([coords.lat, coords.lng], 16);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution:"© OpenStreetMap contributors"}).addTo(map);
const marker = L.marker([coords.lat, coords.lng], {draggable:true}).addTo(map);
marker.on("dragend", ()=>{ const p = marker.getLatLng(); onMove({lat:p.lat, lng:p.lng}); });
objRef.current = {map, marker};
setTimeout(()=>map.invalidateSize(), 50);
} else {
objRef.current.marker.setLatLng([coords.lat, coords.lng]);
objRef.current.map.setView([coords.lat, coords.lng]);
}
}, [coords]);
useEffect(()=>()=>{ if(objRef.current){ objRef.current.map.remove(); objRef.current = null; } }, []);
if(!coords) return null;
return
Drag the pin if it's slightly off.
;
}
function StepProperty({draft, up, nav, onBack, onNext}){
const p = draft.property;
const upP = (patch)=>up({property:{...draft.property, ...patch}});
const [locating, setLocating] = useState(false);
const [locErr, setLocErr] = useState("");
const applyCoords = async (coords, fillAddress)=>{
upP({coords});
try{
const line = await reverseGeocode(coords.lat, coords.lng);
if(line && fillAddress) up({property:{...draft.property, coords, address:line}});
}catch(e){}
};
const locate = ()=>{
setLocErr("");
if(!navigator.geolocation){ setLocErr("Location isn't available on this device."); return; }
setLocating(true);
navigator.geolocation.getCurrentPosition(
pos=>{ setLocating(false); applyCoords({lat:pos.coords.latitude, lng:pos.coords.longitude}, !p.address.trim()); },
()=>{ setLocating(false); setLocErr("Couldn't get your location — you can type the address instead."); },
{enableHighAccuracy:true, timeout:10000}
);
};
return ;
}
function StepTiming({draft, up, nav, onBack, onNext}){
return
How urgent is it?
{URGENCIES.map(u=>up({urgency:u.id})} className="card" style={{display:"flex", alignItems:"center", gap:14, padding:"var(--s-4)", cursor:"pointer", textAlign:"left", borderColor:draft.urgency===u.id?"var(--blue-500)":"var(--border)", boxShadow:draft.urgency===u.id?"0 0 0 3px var(--blue-100)":"none", transition:"all var(--dur-fast) var(--ease-standard)", background:"var(--bg-1)"}}>
{u.label} {u.sub} )}
{draft.urgency==="emergency" &&
For a same-day emergency, calling is faster: (415) 555-0100 . You can still finish this form.
}
;
}
function StepContact({draft, up, nav, onBack, onNext}){
const c = draft.customer;
const upC = (patch)=>up({customer:{...c, ...patch}});
const valid = c.name.trim() && (c.phone.trim() || c.email.trim());
return ;
}
function InlineQuestion({aiQ, onAnswer, onSkip}){
const q = aiQ.list.find(x=>x.answer==null);
const [val, setVal] = useState("");
useEffect(()=>{ setVal(""); }, [q && q.id]);
if(aiQ.loading) return
Checking your photos and description for anything that affects the price…
;
if(!q) return null;
const num = aiQ.list.filter(x=>x.answer!=null).length + 1;
return
{num} of {aiQ.list.length}
{aiQ.observation && num===1 &&
{aiQ.observation}
}
{q.q}
{q.quickReplies.length>0 &&
{q.quickReplies.map((r,i)=>onAnswer(q.id, r)}>{r} )}
}
onAnswer(q.id, val.trim())} style={{padding:"0 14px"}}>
onSkip(q.id)}>I don't know this one
;
}
function ChatScreen({draft, qa, setQa, transcript, setTranscript, maxQ, onDone}){
const [input, setInput] = useState("");
const [pending, setPending] = useState(null);
const [thinking, setThinking] = useState(false);
const [fallbackIdx, setFallbackIdx] = useState(0);
const started = useRef(false);
const transcriptRef = useRef(transcript);
const scroll = ()=>{ const el = document.getElementById("chat-scroll"); if(el) el.scrollTop = el.scrollHeight; };
useEffect(scroll, [transcript, thinking, pending]);
const pushMsg = (m)=>{ transcriptRef.current = [...transcriptRef.current, m]; setTranscript(transcriptRef.current); };
const ask = async (curQa)=>{
if(curQa.length >= maxQ){ onDone(curQa); return; }
setThinking(true);
let res;
try{ res = await nextQuestion(draft, curQa, maxQ); }
catch(e){
const fq = FALLBACK_QS[fallbackIdx];
res = fq && curQa.length < 3 ? {done:false, ...fq} : {done:true};
setFallbackIdx(i=>i+1);
}
setThinking(false);
if(res.done || !res.question){ onDone(curQa); return; }
if(res.note) pushMsg({role:"ai", text:res.note});
setPending({question:res.question, quickReplies:res.quickReplies||[]});
pushMsg({role:"ai", text:res.question});
};
useEffect(()=>{
if(started.current) return; started.current = true;
transcriptRef.current = [];
setTranscript([]);
const first = draft.customer.name.split(" ")[0];
pushMsg({role:"ai", text:`Thanks ${first}. ${draft.photos.length?"We're looking at your photos and description":"Based on your description"} — just a few questions so ${BRAND} can price this accurately.`});
ask([]);
}, []);
const answer = (text)=>{
if(!text.trim() || !pending) return;
pushMsg({role:"user", text:text.trim()});
const newQa = [...qa, {q:pending.question, a:text.trim()}];
setQa(newQa); setPending(null); setInput("");
ask(newQa);
};
const skip = ()=>{
if(!pending) return;
pushMsg({role:"user", text:"Not sure"});
const newQa = [...qa, {q:pending.question, a:"Customer doesn't know"}];
setQa(newQa); setPending(null);
ask(newQa);
};
return
{draft.photos.length>0 &&
{draft.photos.slice(0,3).map((p,i)=> }
{catsLabel(draft)} · {draft.description}
{Math.min(qa.length+1, maxQ)} of {maxQ} max
{pending && pending.quickReplies.length>0 &&
{pending.quickReplies.map((r,i)=>answer(r)}>{r} )}
}
answer(input)} style={{padding:"0 18px"}}>
{pending &&
I don't know this one }
;
}
function BuildingScreen(){
return
Putting your request together.
We're writing up what you told us so the quote is right the first time.
;
}
function ReviewScreen({draft, summary, nav, pendingCount, onSend, onBack}){
return
Here's what we'll send.
Check it reads right — then it goes straight to {BRAND}.
{catsLabel(draft)} · {urgOf(draft.urgency).label}
{summary.title}
{summary.summary}
{draft.photos.length>0 &&
{draft.photos.map((p,i)=>
)}
}
{pendingCount>0 &&
{pendingCount} question{pendingCount>1?"s":""} left below — answering now makes the quote sharper, or send as is.
}
;
}
function DoneScreen({refCode, urgency, onNew}){
return
Request sent.
{BRAND} has everything they need. You'll get a quote {urgency==="emergency"?"as soon as possible today":"within 1 business day"} — no site visit needed for most jobs.
Start another request
;
}
Object.assign(window, {CustomerApp});
)}
{draft.photos.length<6 && }