// Screens 1, 2, 4: Email · Emirates App Manage Booking · Emirates App Home (with Call Hala)

function EmailScreen({ onAdvance }) {
  return (
    <PhoneFrame>
      <div className="email-app">
        <div className="email-toolbar">
          <div className="back"><Icon.back size={18} /> Inbox</div>
          <div className="actions"><Icon.more size={18} /></div>
        </div>
        <div className="email-meta">
          <div className="subject">We're sorry, your flight has been cancelled</div>
          <div className="from-row">
            <div className="avatar">EK</div>
            <div className="from-info">
              <div className="from-name">Emirates</div>
              <div className="from-detail">To you</div>
            </div>
            <div className="timestamp">09:14</div>
          </div>
        </div>
        <div className="email-body">
          <div className="email-header-brand">
            <img src="assets/emirates-logo.png" alt="Emirates" />
          </div>
          <div className="email-content">
            <h2 className="email-headline">Your flight has been cancelled</h2>
            <div className="email-pnr-line">Emirates booking reference: <strong>MTCHL7</strong></div>

            <p className="email-greeting">Dear Customer,</p>
            <p>We're sorry, due to limited flight schedules we've had to cancel the following flight:</p>

            <div className="email-flight-table">
              <div className="ft-head">Flight details</div>
              <div className="ft-grid">
                <div className="ft-h">Flight number</div>
                <div className="ft-h">Origin</div>
                <div className="ft-h">Destination</div>
                <div className="ft-h">Departure</div>
                <div className="ft-h">Arrival</div>
                <div className="ft-h">Class</div>

                <div className="ft-c">EK202</div>
                <div className="ft-c">Dubai International Airport (DXB)</div>
                <div className="ft-c">John F. Kennedy Intl. Airport (JFK)</div>
                <div className="ft-c">Tue 28 Apr · 08:30</div>
                <div className="ft-c">Tue 28 Apr · 13:45</div>
                <div className="ft-c">Economy</div>
              </div>
            </div>

            <p className="email-soft">We understand how inconvenient this is for you. Your ticket is still valid.</p>

            <h3 className="email-h3">Your travel options</h3>
            <p className="email-bullet-head">Rebook your flight</p>
            <ul className="email-bullets">
              <li>To book an alternative flight, please <a href="#">contact us</a>.</li>
              <li>If you choose to rebook your flight, we will do our best to keep your previous seat selection, however this may not always be possible. If you purchased a seat and it's no longer available, you can <a href="#">request a refund</a>.</li>
              <li>Please review any personal preferences such as seat selection or dietary meals in <a href="#">Manage Your Booking</a>. You will also need to update any Chauffeur-drive booking details, if applicable.</li>
            </ul>

            <p className="email-bullet-head">Choose not to travel</p>
            <ul className="email-bullets">
              <li>If you decide not to travel, you can request a refund. This includes any paid services related to your flight, such as extra baggage allowance and paid seat selection.</li>
              <li>Please complete our <a href="#">refund form</a> if you booked with us directly.</li>
            </ul>

            <p className="email-soft">If you purchased travel insurance through us, please check your confirmation email and contact the insurance provider directly for further support.</p>
            <p className="email-soft">We're sorry for the inconvenience this may have caused.</p>
            <p className="email-soft" style={{marginTop: 18}}>Kind regards,<br/>The Emirates team</p>

            <div className="email-cta-block">
              <div className="cta-intro">
                <div className="cta-intro-title">Need help deciding? Chat with our virtual assistant.</div>
                <div className="cta-intro-sub">Get instant answers about rebooking, refunds and your options, 24/7 on WhatsApp.</div>
              </div>
              <button className="btn-wa" onClick={onAdvance}>
                <span className="btn-wa-tooltip">Tap to start the journey</span>
                <Icon.chat size={18} /> Chat with us on WhatsApp
              </button>
              <a className="btn-link" href="#">Or manage online at emirates.com/manage</a>
            </div>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

/* ---------- Manage Booking, new Emirates-app look ---------- */
function ManageBookingScreen({ onAdvance, transitioning }) {
  return (
    <PhoneFrame statusTime="09:15">
      <div className="ekapp">
        <div className="ekapp-head">
          <div>
            <div className="greet">Hello, <strong>Sarah</strong></div>
            <div style={{fontSize:11, color:'#888', marginTop:1}}>Skywards Silver · 24,580 Miles</div>
          </div>
          <div className="logo"><img src="assets/emirates-logo.png" alt="Emirates" /></div>
          <div className="icons"><Icon.search size={20} /><Icon.bell size={20} /></div>
        </div>

        <div className="ekapp-body">
          <div className="ekapp-hero">
            <div className="eyebrow">Disruption alert</div>
            <h1>Your trip to New York needs attention</h1>
            <p>EK202 on 28 April has been cancelled. Your ticket is still valid, let's sort out your next move.</p>
          </div>

          <div className="ekapp-section">
            <div className="title">Your booking</div>
            <div className="all">View all</div>
          </div>

          <div className="ekapp-booking">
            <div className="strip"><span className="dot"></span> Flight cancelled, action needed</div>
            <div className="body">
              <div className="pnr-row">
                <div>
                  <div className="label">Booking</div>
                  <div className="pnr">MTCHL7</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="label">Passenger</div>
                  <div style={{fontSize:13, fontWeight:600, marginTop:1}}>Sarah Mitchell</div>
                </div>
              </div>

              <div className="ribbon">
                <div className="col">
                  <div className="iata struck">DXB</div>
                  <div className="time">08:30</div>
                  <div className="date">Tue 28 Apr</div>
                </div>
                <div className="center">
                  <div className="line"></div>
                  <div className="plane"><Icon.plane size={16} /></div>
                  <div className="flight">EK202 · Cancelled</div>
                </div>
                <div className="col right">
                  <div className="iata struck">JFK</div>
                  <div className="time">13:45</div>
                  <div className="date">Tue 28 Apr</div>
                </div>
              </div>
            </div>

            <div className="help-row">
              <div className="help-text">
                <strong>Your ticket is still valid.</strong>
                Rebook on an alternative flight at no extra cost, or request a refund.
              </div>
              <div className="call-side" onClick={onAdvance}>
                <span className="pulse"></span>
                <div className="ic"><Icon.chat size={16} /></div>
                <div className="lbl">Chat</div>
                <div className="who">with Hala</div>
              </div>
            </div>

            <div className="actions-row">
              <button className="quick-btn" onClick={onAdvance}>
                <Icon.refresh size={14} />
                Rebook
              </button>
              <button className="quick-btn">
                <Icon.doc size={14} />
                Refund
              </button>
              <button className="quick-btn">
                <Icon.shield size={14} />
                Insurance
              </button>
            </div>
          </div>

          <div className="ekapp-section">
            <div className="title">Discover</div>
          </div>

          <div className="ekapp-discover">
            <div className="ekapp-tile gold">
              <div className="tag">Skywards</div>
              <div className="ttl">Earn 50% bonus Miles on long-haul</div>
            </div>
            <div className="ekapp-tile dark">
              <div className="tag">Lounge</div>
              <div className="ttl">Premium lounges in Dubai</div>
            </div>
            <div className="ekapp-tile red">
              <div className="tag">New routes</div>
              <div className="ttl">Now flying to Bogotá</div>
            </div>
            <div className="ekapp-tile">
              <div className="tag">Stays</div>
              <div className="ttl">5★ hotels in NYC from $290</div>
            </div>
          </div>
        </div>

        <div className="ekapp-tabbar">
          <div className="tab"><Icon.home size={20} /><span>Home</span></div>
          <div className="tab"><Icon.search size={20} /><span>Search</span></div>
          <div className="tab active"><Icon.star size={20} /><span>My trips</span></div>
          <div className="tab"><Icon.envelope size={20} /><span>Inbox</span></div>
          <div className="tab"><Icon.user size={20} /><span>Profile</span></div>
        </div>

        {transitioning && (
          <div className="loading-overlay"><div className="spinner"></div><div>Opening WhatsApp...</div></div>
        )}
      </div>
    </PhoneFrame>
  );
}

/* ---------- Tap-to-Call, same Emirates app, with Call Hala highlighted ---------- */
function TapToCallScreen({ onAdvance, calling }) {
  return (
    <PhoneFrame statusTime="09:20">
      <div className="ekapp">
        <div className="ekapp-head">
          <div>
            <div className="greet">Hello, <strong>Sarah</strong></div>
            <div style={{fontSize:11, color:'#888', marginTop:1}}>Skywards Silver · 24,580 Miles</div>
          </div>
          <div className="logo"><img src="assets/emirates-logo.png" alt="Emirates" /></div>
          <div className="icons"><Icon.search size={20} /><Icon.bell size={20} /></div>
        </div>

        <div className="ekapp-body">
          <div className="ekapp-hero">
            <div className="eyebrow">Active conversation</div>
            <h1>Continue your chat with Hala</h1>
            <p>You and Hala were discussing two rebook options. Pick up where you left off, on chat or by voice.</p>
          </div>

          <div className="ekapp-section">
            <div className="title">Active support</div>
          </div>

          <div className="ekapp-booking" style={{borderColor:'rgba(7,94,84,0.2)'}}>
            <div className="strip" style={{background:'rgba(7,94,84,0.08)', borderColor:'rgba(7,94,84,0.2)', color:'#075E54'}}>
              <span className="dot" style={{background:'#075E54'}}></span> Conversation in progress · 4 min ago
            </div>
            <div className="body">
              <div className="pnr-row">
                <div>
                  <div className="label">With</div>
                  <div className="pnr" style={{fontFamily:'inherit', fontSize:14, fontWeight:700}}>Hala · Emirates AI</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="label">Booking</div>
                  <div style={{fontSize:13, fontWeight:600, marginTop:1, fontFamily:'SF Mono, Menlo, monospace'}}>MTCHL7</div>
                </div>
              </div>

              <div style={{fontSize:12.5, color:'#444', lineHeight:1.5, marginBottom:14, padding:'10px 12px', background:'#F5F1EA', borderRadius:8, borderLeft:'3px solid #075E54'}}>
                <div style={{fontSize:10, color:'#888', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:700, marginBottom:4}}>Last message</div>
                "Tap 'Call Hala' on your Emirates app, I'll have everything we've discussed already loaded, so no need to repeat anything."
              </div>
            </div>

            <div className="help-row">
              <div className="help-text">
                <strong>Same agent. Same memory.</strong>
                No queue, no IVR. Hala picks up with full context.
              </div>
              <div className="call-side" onClick={onAdvance} style={{background:'linear-gradient(180deg, #128C7E, #075E54)', minWidth:96}}>
                <span className="pulse"></span>
                <div className="ic" style={{width:36, height:36, background:'rgba(255,255,255,0.25)'}}><Icon.phone size={18} /></div>
                <div className="lbl">Call Hala</div>
                <div className="who">No wait time</div>
              </div>
            </div>

            <div className="actions-row">
              <button className="quick-btn">
                <Icon.chat size={14} />
                Keep chatting
              </button>
              <button className="quick-btn">
                <Icon.doc size={14} />
                View summary
              </button>
              <button className="quick-btn">
                <Icon.user size={14} />
                Talk to human
              </button>
            </div>
          </div>

          <div style={{padding:'14px 20px', textAlign:'center', fontSize:11.5, color:'#888', lineHeight:1.5}}>
            Hala has the last 12 messages from your chat.<br/>
            She'll briefly verify your booking on the call before continuing.
          </div>
        </div>

        <div className="ekapp-tabbar">
          <div className="tab"><Icon.home size={20} /><span>Home</span></div>
          <div className="tab"><Icon.search size={20} /><span>Search</span></div>
          <div className="tab active"><Icon.star size={20} /><span>My trips</span></div>
          <div className="tab"><Icon.envelope size={20} /><span>Inbox</span></div>
          <div className="tab"><Icon.user size={20} /><span>Profile</span></div>
        </div>

        {calling && (
          <div className="calling-overlay">
            <div className="pulse-circle"><img src="assets/emirates-logo.png" alt="Emirates" /></div>
            <div className="label">Calling Hala...</div>
            <div className="sub">Emirates Virtual Assistant</div>
          </div>
        )}
      </div>
    </PhoneFrame>
  );
}

window.EmailScreen = EmailScreen;
window.ManageBookingScreen = ManageBookingScreen;
window.TapToCallScreen = TapToCallScreen;