const { useState: useStateHow, useEffect: useEffectHow } = React;
const STEPS = [
{
n: '01',
title: 'We train the agent on your business',
detail: "We feed the AI everything — your menu, services, pricing, policies, FAQs, booking rules. The agent speaks with your brand's voice and only says what's true about your business.",
visual: 'training',
},
{
n: '02',
title: 'Your calls go to the AI',
detail: 'Plug in your existing number or get a dedicated one. Every inbound call goes straight to the agent — no ringing, no hold music, instant answer.',
visual: 'routing',
},
{
n: '03',
title: 'AI handles the full conversation',
detail: 'The agent greets, understands, and resolves — orders, bookings, FAQs, complaints — in a natural conversational tone. Urdu and English both supported.',
visual: 'conversation',
},
{
n: '04',
title: 'Complex calls transfer to a human',
detail: "If the AI hits something it can't resolve, it smoothly transfers to your team — live, in real time. No awkward handoffs, no frustrated customers.",
visual: 'handoff',
},
{
n: '05',
title: 'Everything logs to your dashboard',
detail: 'Every call recorded and transcribed. You see who called, what was discussed, what action was taken, and what needs follow-up. Full visibility, always.',
visual: 'dashboard',
},
];
function How() {
const [active, setActive] = useStateHow(0);
// Auto-advance
useEffectHow(() => {
const t = setInterval(() => setActive((a) => (a + 1) % STEPS.length), 4500);
return () => clearInterval(t);
}, []);
return (