// Shared data + utilities
const SCENARIO = {
passenger: {
name: 'Sarah Mitchell',
first: 'Sarah',
email: 'sarah.mitchell@gmail.com',
initials: 'SM',
skywards: 'Silver',
member_since: 2019,
ltv: 'AED 47,200',
bookings: 23,
photo: 'assets/sarah.svg',
},
agent: { name: 'Hala', role: 'Emirates Virtual Assistant' },
rep: { name: 'Human Consultant', initials: 'HC', photo: 'assets/consultant.svg' },
pnr: 'MTCHL7',
};
const SCREENS = [
{ id: 1, name: 'Email', code: '01' },
{ id: 2, name: 'Manage Booking', code: '02' },
{ id: 3, name: 'WhatsApp', code: '03' },
{ id: 4, name: 'Tap to Call', code: '04' },
{ id: 5, name: 'Voice Call', code: '05' },
{ id: 6, name: 'CC Assistant', code: '06' },
{ id: 7, name: 'Closing', code: '07' },
];
const TALK_TRACKS = {
1: "Sarah is in Dubai, due to fly tonight to New York for a meeting tomorrow morning at 11. The cancellation email lands first, exactly as Emirates sends it today. Ticket still valid, no auto-rebooking forced on her. Right inside the email there is a clear next step, continue on WhatsApp with Hala. No phone number to dial, no queue to join, no information to repeat. The disruption journey starts on her terms, on the channel she already lives in.",
2: "Sarah opens the Emirates app. The disrupted booking is pinned at the top with an honest status, EK202 cancelled, and one clear primary action, Chat with Hala on WhatsApp. The same booking card carries the same conversation thread across every surface. One tap and she is back in the conversation, fully authenticated, with no security questions to answer.",
3: "Hala already knows the cancellation, the PNR, and Sarah's preferences from her profile. She presents two live options, sourced straight from your inventory and ranked for Sarah specifically, vegetarian meal carried over and time to her meeting protected. Sarah probes layover risk, lounge access, seat availability. Hala answers each one in plain language. Notice what Hala does not do, she does not push the change. When Sarah wants to hear it from a person, Hala offers voice and the entire chat history travels with her.",
4: "Back in the Emirates app, the same booking card now shows a Call Hala button right next to Chat. No IVR, no menu tree, no ten-minute wait. One tap, and the call routes to Hala with everything from the chat already loaded. The channel changes, the conversation does not.",
5: "Voice is a new channel so Hala does a brief security check on the booking reference and last name. Then she picks up exactly where the chat left off, no recap, no repeating. Sarah works through her real anxieties, the hotel, her vegetarian meal, lounge access at DXB, Skywards Miles. Hala answers each one but holds back from making the change. Sarah is the one who decides she wants to confirm with a person, and Hala routes her to a human consultant with the full transcript and the proposed plan already on screen.",
6: "This is what Amélie, the senior consultant, sees the moment the call lands. The full transcript on the left, the customer 360 with live sentiment in the middle, and on the right a Next Best Action panel with five actions ready to execute on a single approval. Amélie never asks for the booking reference. She never reads policy out loud. Watch the sentiment dial move from concerned to delighted as the call progresses, the AI listens, the recommendations evolve, the human owns the decision and the approval. One click, five actions, full audit trail.",
7: "Three channels, one passenger, one conversation. Sarah went from cancellation to confirmation in around ten minutes, never repeated herself, and ended with a thank you. Amélie spent one minute and forty-two seconds on the human moment that mattered, the approval. The AI compressed the friction. The human kept the decision. And every action is auditable, reversible, and bounded by the policies your team controls.",
};
// iOS Status Bar
function IOSStatusBar({ time = '09:14', dark = false }) {
return (
{time}
5G
);
}
function PhoneFrame({ children, dark = false, statusTime = '09:14' }) {
return (