One number for the group, the voice agent reads the booking and routes the caller to the right front desk, or escalates to the human call-center team for groups, MICE and cancellations.
{stage === 0 && "Hotel front desk is ringing, caller is waiting."}
{stage === 1 && "Front desk didn't pick up. the voice agent steps back into the call."}
{stage === 2 && "\u201cI'll have your booking details emailed and our team will follow up.\u201d"}
{stage === 3 && "Email delivered with the booking link, vegan menu and spa availability."}
{stage === 4 && "Ticket #4823 opened for Olea Cliffside, assigned to GM, due in 2h."}
);
}
// ────────────────────────────────────────────────────────────
// Web call · widgets gallery
// ────────────────────────────────────────────────────────────
function WebWidgets() {
return (
}
/>
}
/>
}
/>
);
}
function WidgetCase({ title, subtitle, body }) {
return (
{title}
{subtitle}
{/* fake browser bg */}
') center/cover",
opacity: 0.6,
}} />
{body}
);
}
// ────────────────────────────────────────────────────────────
// Bubble button, auto-plays scenario: idle → click → expand → live transcript
// ────────────────────────────────────────────────────────────
const BUBBLE_TRANSCRIPT = [
{ who: "guest", t: 3.2, text: "Hi, I left my passport in the room, checked out this morning." },
{ who: "aria", t: 5.4, text: "I see your stay at Olea Cliffside ended at 11:00. Connecting you to the front desk now." },
{ who: "guest", t: 8.0, text: "Thanks, can they ship it to Madrid?" },
{ who: "aria", t: 9.6, text: "Yes, courier on us. You'll receive a tracking link by email." },
];
function BubbleMock() {
const [time, setTime] = useStateR(0);
useEffectR(() => {
let raf, last = performance.now();
const tick = (now) => {
setTime(t => (t + (now - last) / 1000) % 14);
last = now; raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
// 0–2.0 idle bubble · 2.0–2.6 click pulse · 2.6+ expanded panel
const stage = time < 2.0 ? "idle" : time < 2.6 ? "click" : "open";
const openT = Math.max(0, time - 2.6);
const visibleLines = BUBBLE_TRANSCRIPT.filter(l => time > l.t);
return (
<>
{/* the bubble */}
Reach your guests where they are.{" "}
Route every call to the right team.
A local number in every market, smart escalation across twelve themes,
seamless hand-off to the right hotel, and recovery built in for the calls
that don't get picked up.
{/* 1, Local numbers */}
{/* 2, Themes */}
{/* 3, Hotel fan-out */}
{/* 4, Recovery */}
{/* 5, Web */}
);
}
function SectionBlock({ eyebrow, title, italic, body, children }) {
return (