);
};
// ── HOW IT WORKS — pinned scrolly. 5 steps reveal in sequence as you scroll, like the phone scene.
const HowItWorks = () => {
const sectionRef = React.useRef(null);
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
if (!sectionRef.current) return;
const r = sectionRef.current.getBoundingClientRect();
const total = r.height - window.innerHeight;
const scrolled = -r.top;
setProgress(Math.max(0, Math.min(1, scrolled / total)));
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const steps = [
['01', 'Lead arrives', 'Call or website form. Any hour.', 'A new inbound — voice or web — hits Azlani in real time. No queue, no voicemail, no missed window.'],
['02', 'Azlani answers', 'Instant. No queue.', 'Picks up on the first ring with a warm, on-brand greeting. Identifies the caller and the reason for the call.'],
['03', 'Qualifies', 'The questions an estimator would ask.', 'Property type, role, address, urgency, scope. Roofing-specific intake — flat vs. pitched, TPO/EPDM, active leak vs. inspection.'],
['04', 'Photos & booking', 'SMS for photos. Books the inspection.', 'Texts the caller for photos and videos of the issue, then books a slot on your calendar that fits the urgency.'],
['05', 'Clean handoff', 'Structured brief to your team.', 'Your estimator gets a one-page brief — contact, building, scope, photos, urgency, slot — before they leave the truck.'],
];
// Lead-in (0..0.08) → 5 step slots evenly distributed → tail (0.92..1.0)
// Each step gets ~0.168 of the bar.
const leadIn = 0.08;
const tail = 0.08;
const usable = 1 - leadIn - tail;
const stepWidth = usable / steps.length;
const rawIdx = (progress - leadIn) / stepWidth;
const activeStep = Math.max(0, Math.min(steps.length - 1, Math.floor(rawIdx)));
// local progress within current step (0..1) — for slide/fade timings
const localP = Math.max(0, Math.min(1, rawIdx - activeStep));
return (
{/* Header */}
How it works
Five steps.
{/* Stage: left = step rail (vertical list), right = active step detail */}
{/* LEFT — step rail */}
{steps.map(([n, title], i) => {
const isActive = i === activeStep;
const isPast = i < activeStep;
return (
{/* active indicator bar */}
{n}
{title}
);
})}
{/* RIGHT — active step detail (slides between steps) */}