);
}
function Hero({ tone }) {
const copy = tone === 'direct'
? {
eyebrow: 'Virtual Estimate · ~90 Seconds',
title: 'Know What a Clean Will Cost — Before You Book.',
lede: 'Type your address, share a couple of photos if you like, and we\'ll match the right service to your home. Backed by the Neighborly Done Right Promise®.',
bullets: [
'Pricing in under 2 minutes — no signup, no spam.',
'Every clean follows our 44-point checklist.',
'If it\'s not done right, we\'ll make it right.',
],
}
: {
eyebrow: 'Virtual Estimate · No Signup Required',
title: 'Every Home Deserves a Friend Like Molly.',
lede: 'Get a personalized cleaning estimate in about 90 seconds. Tell us where you live, share a few photos if you\'d like, and we\'ll match the right service to your home — backed by our Neighborly Done Right Promise®.',
bullets: [
['Trusted by over ', 1.5 million customers, ' since 1984.'],
['Every clean follows our ', 44-point checklist, '.'],
[Cleaned right, or we\'ll clean again, ' — guaranteed.'],
],
};
return (
{copy.eyebrow}
{copy.title}
{copy.lede}
{copy.bullets.map((b, i) => (
{b}
))}
4.8 / 5 avg. customer rating1.7M+ cleans per year40+ years of clean
);
}
function SiteFooter() {
return (
);
}
// ── Tweaks panel content ───────────────────────────────────────────────────
function VirtualEstimateTweaks({ t, setTweak }) {
return (
setTweak('tierLayout', v)}
/>
setTweak('priceDisplay', v)}
/>
setTweak('density', v)}
/>
setTweak('ctaColor', v)}
/>
setTweak('showPopular', v)}
/>
setTweak('showScore', v)}
/>
setTweak('tone', v)}
/>
window.dispatchEvent(new CustomEvent('demo:results'))}
/>
window.dispatchEvent(new CustomEvent('demo:reset'))}
/>
);
}
// ── App ────────────────────────────────────────────────────────────────────────
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [step, setStep] = useState(1);
const [address, setAddress] = useState('');
const [property, setProperty] = useState(null);
const [images, setImages] = useState([]);
const [analysis, setAnalysis] = useState(null);
const [estimates, setEstimates] = useState(null);
const [selectedService, setSelectedService] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// ── Step 1: address lookup ───────────────────────────────────────────────
async function lookupAddress(value) {
const trimmed = value.trim();
if (!trimmed) return;
setLoading(true);
setError(null);
try {
const data = await window.MollyAPI.getProperty(trimmed);
setProperty(data);
setStep(2);
} catch (err) {
setError((err && err.message)
|| 'We couldn\'t find that address. Please check the spelling and try again.');
} finally {
setLoading(false);
}
}
function handleAddressSubmit(e) {
e.preventDefault();
lookupAddress(address);
}
function handleSuggestionSelect(description) {
setAddress(description);
lookupAddress(description);
}
// ── Step 2: image upload + analysis ─────────────────────────────────────
async function handleImagesSubmit(files) {
setLoading(true);
setError(null);
try {
let score = 50;
let analysisData = null;
if (files && files.length > 0) {
analysisData = await window.MollyAPI.analyzeImages(files);
score = analysisData.score;
setAnalysis(analysisData);
}
setStep(3);
const result = await window.MollyAPI.getEstimate({
...property,
cleanlinessScore: score,
});
setEstimates(result.services);
setStep(4);
} catch (err) {
setError((err && err.message)
|| 'Something went wrong while analyzing your photos. Please try again.');
setStep(2);
} finally {
setLoading(false);
}
}
function handleSkipPhotos() {
handleImagesSubmit([]);
}
function handleReset() {
setStep(1);
setAddress('');
setProperty(null);
setImages([]);
setAnalysis(null);
setEstimates(null);
setSelectedService(null);
setError(null);
}
function handleEditAddress() {
setStep(1);
setProperty(null);
setImages([]);
setAnalysis(null);
setEstimates(null);
setError(null);
}
// Clicking a completed pill in the step indicator goes back to that step
// without clearing collected state — the user is editing, not restarting.
// We block forward jumps and any movement while a request is in flight.
function handleStepJump(targetStep) {
if (loading) return;
if (targetStep >= step) return;
setError(null);
setStep(targetStep);
}
// Choosing a tier from the Results screen → contact-info step.
// We stash the service so the booking page can echo plan + price back
// and tailor its "Book" vs. "Join" copy.
function handleChooseTier(service) {
setSelectedService(service);
setStep(5);
}
// Demo shortcuts driven by the Tweaks panel — useful for reviewing the
// results screen without re-running address + photo steps.
useEffect(() => {
async function jumpToResults() {
const sampleAddress = '142 Maple Ridge Ln, Ann Arbor, MI 48104';
const prop = await window.MollyAPI.getProperty(sampleAddress);
const sampleFiles = [
{ name: 'kitchen.jpg', size: 120000 },
{ name: 'bath.jpg', size: 98000 },
{ name: 'living.jpg', size: 145000 },
];
const analysisData = await window.MollyAPI.analyzeImages(sampleFiles);
const result = await window.MollyAPI.getEstimate({
...prop,
cleanlinessScore: analysisData.score,
});
setAddress(sampleAddress);
setProperty(prop);
setAnalysis(analysisData);
setEstimates(result.services);
setStep(4);
}
window.addEventListener('demo:results', jumpToResults);
window.addEventListener('demo:reset', handleReset);
return () => {
window.removeEventListener('demo:results', jumpToResults);
window.removeEventListener('demo:reset', handleReset);
};
}, []);
return (