// 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 (
    <div className={`ios-status ${dark ? 'dark' : ''}`}>
      <div className="left">{time}</div>
      <div className="right">
        <span style={{fontSize: 11, letterSpacing: 0.5}}>5G</span>
        <span style={{display:'inline-block', width:24, height:11, border:`1.5px solid ${dark?'white':'#1a1a1a'}`, borderRadius:3, position:'relative'}}>
          <span style={{position:'absolute', inset:1, background: dark?'white':'#1a1a1a', width: '85%', borderRadius: 1}}></span>
        </span>
      </div>
    </div>
  );
}

function PhoneFrame({ children, dark = false, statusTime = '09:14' }) {
  return (
    <div className="phone-frame">
      <div className="phone-screen">
        <div className="phone-notch"></div>
        <IOSStatusBar dark={dark} time={statusTime} />
        {children}
        <div className="phone-home-indicator"></div>
      </div>
    </div>
  );
}

// Flat icons (SVG, single-color, line style)
const Icon = {
  chat:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>,
  phone:   (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  plane:   (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||18} height={p.size||18}><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg>,
  check:   (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><polyline points="20 6 9 17 4 12"/></svg>,
  arrow:   (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||16} height={p.size||16}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  back:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><path d="M15 18l-6-6 6-6"/></svg>,
  more:    (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||18} height={p.size||18}><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>,
  search:  (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>,
  home:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"/></svg>,
  star:    (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||18} height={p.size||18}><polygon points="12 2 15 9 22 9.3 17 14 18.5 21 12 17.3 5.5 21 7 14 2 9.3 9 9"/></svg>,
  envelope:(p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>,
  mic:     (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>,
  speaker: (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19"/><path d="M19 12a4 4 0 0 0-2-3.5M19 12a4 4 0 0 1-2 3.5"/></svg>,
  mute:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/></svg>,
  endcall: (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||22} height={p.size||22}><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.965.965 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.1-.7-.28a11.27 11.27 0 0 0-2.67-1.85.99.99 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg>,
  keypad:  (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||18} height={p.size||18}><circle cx="6" cy="6" r="1.5"/><circle cx="12" cy="6" r="1.5"/><circle cx="18" cy="6" r="1.5"/><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/><circle cx="6" cy="18" r="1.5"/><circle cx="12" cy="18" r="1.5"/><circle cx="18" cy="18" r="1.5"/></svg>,
  bell:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||16} height={p.size||16}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>,
  bolt:    (p={}) => <svg viewBox="0 0 24 24" fill="currentColor" width={p.size||18} height={p.size||18}><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>,
  doc:     (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>,
  user:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
  globe:   (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>,
  shield:  (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||18} height={p.size||18}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  refresh: (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||16} height={p.size||16}><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>,
  lock:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width={p.size||14} height={p.size||14}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>,
  send:    (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>,
  paperclip:(p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>,
  smile:   (p={}) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width={p.size||20} height={p.size||20}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9" y2="9"/><line x1="15" y1="9" x2="15" y2="9"/></svg>,
  doubleTick: (p={}) => <svg viewBox="0 0 18 12" width={p.size||14} height={(p.size||14)*0.667} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="1 7 4.5 10.5 11 2"/><polyline points="7 7 10.5 10.5 17 2"/></svg>,
};

window.SCENARIO = SCENARIO;
window.SCREENS = SCREENS;
window.TALK_TRACKS = TALK_TRACKS;
window.IOSStatusBar = IOSStatusBar;
window.PhoneFrame = PhoneFrame;
window.Icon = Icon;
