/* ========================================================================
   screen-email.jsx, phone showing the cancellation email
   Recreates the authentic Emirates corporate email format (light version).
   ======================================================================== */

function ScreenEmail({ active }) {
  const ek = window.DEMO_SCRIPT.original_flight;
  const re = window.DEMO_SCRIPT.auto_rebooked;
  const lukas = window.DEMO_SCRIPT.passenger;

  // Authentic Emirates corporate email layout from real cancellation email
  return (
    <div className="canvas canvas-paper">
      <PhaseTag label="Channel · Email · 09:14"/>

      <div className="email-stage">
        <div className="phone fade-in">
          <div className="phone-screen">
            <div className="status-bar">
              <div className="left">9:14</div>
              <div className="right">
                <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 7h2v3H1zM5 5h2v5H5zM9 3h2v7H9zM13 1h2v9h-2z"/></svg>
                <svg width="15" height="11" viewBox="0 0 15 11" fill="none" stroke="currentColor" strokeWidth="1"><path d="M1 4 Q7.5 -1 14 4M3 6 Q7.5 2 12 6M5.5 8 Q7.5 6.5 9.5 8"/><circle cx="7.5" cy="9.5" r="0.7" fill="currentColor"/></svg>
                <svg width="24" height="11" viewBox="0 0 24 11" fill="none">
                  <rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="currentColor"/>
                  <rect x="2" y="2" width="16" height="7" rx="1" fill="currentColor"/>
                  <rect x="21.5" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/>
                </svg>
              </div>
            </div>

            {/* Gmail-style toolbar */}
            <div className="gm-toolbar">
              <span className="gm-back">←</span>
              <div className="gm-acts">
                <span className="gm-act" aria-label="Snooze">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2M8 3l-4 3M16 3l4 3"/></svg>
                </span>
                <span className="gm-act" aria-label="Archive">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M5 6l1 13a2 2 0 002 2h8a2 2 0 002-2l1-13M9 11h6"/></svg>
                </span>
                <span className="gm-act" aria-label="Delete">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
                </span>
                <span className="gm-act" aria-label="Mark unread">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7l9 6 9-6M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7l2-2h14l2 2"/></svg>
                </span>
                <span className="gm-act gm-more">⋮</span>
              </div>
            </div>

            {/* Gmail message metadata */}
            <div className="gm-meta">
              <div className="gm-meta-line"><span className="gm-meta-k">From:</span> <strong>Emirates</strong> &lt;do-not-reply@emirates.email&gt;</div>
              <div className="gm-meta-line"><span className="gm-meta-k">Date:</span> {window.DEMO_DATES.TODAY_LONG} at 09:12</div>
              <div className="gm-meta-line"><span className="gm-meta-k">Subject:</span> We're sorry, your flight has been cancelled</div>
              <div className="gm-meta-line"><span className="gm-meta-k">To:</span> &lt;<a className="gm-mail-link">{lukas.email}</a>&gt;</div>
            </div>

            {/* Email content (light authentic) */}
            <div className="ek-email-body">

              {/* Sender bar with logo */}
              <div className="ek-sender-bar">
                <div className="ek-logo-tile">
                  <img src="assets/emirates-logo.png" alt="Emirates" className="ek-logo-img" />
                </div>
                <div className="ek-safe-senders">Add Emirates to your safe senders list</div>
              </div>

              <div className="ek-doc">
                <h1 className="ek-headline">Your flight has been cancelled</h1>

                <div className="ek-booking-ref">
                  Emirates booking reference: <strong>{lukas.pnr}</strong>
                </div>

                <p className="ek-greet">Dear Mr. Weber,</p>

                <p className="ek-para">We're sorry, for operational reasons we've cancelled the following flight(s):</p>

                {/* Authentic flight-details table */}
                <div className="ek-table-wrap">
                  <div className="ek-table-caption">Flight details:</div>
                  <table className="ek-flight-table">
                    <thead>
                      <tr>
                        <th>Flight number</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Class</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><strong>{ek.code}</strong></td>
                        <td>Dubai International Airport (DXB)</td>
                        <td>John F. Kennedy Intl Airport (JFK)</td>
                        <td>{window.DEMO_DATES.TODAY} · {ek.depart}</td>
                        <td>{window.DEMO_DATES.TODAY} · {ek.arrive}</td>
                        <td>Economy</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <p className="ek-para ek-para-sm">
                  We understand how inconvenient this is for you. Your ticket is still valid, and you can contact us to book another flight.
                </p>
                <p className="ek-para ek-para-sm">
                  You will need to reorder any meals or rebook other services for your new flight in <a className="ek-link">Manage Your Booking</a>.
                </p>
                <p className="ek-para ek-para-sm">
                  If you purchased travel insurance through us, please check your confirmation email and contact the insurance provider directly for further support.
                </p>
                <p className="ek-para ek-para-sm">
                  We're sorry for any inconvenience this may have caused.
                </p>

                <p className="ek-signoff">Kind regards,</p>
                <p className="ek-signoff">The Emirates team</p>

                <div className="ek-last-updated">
                  Last Updated (GST): {window.DEMO_DATES.TODAY_LONG}, 09:12
                </div>
              </div>
            </div>

            {/* Gmail bottom action bar */}
            <div className="gm-bottom">
              <button className="gm-bottom-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 17l-5-5 5-5M4 12h11a5 5 0 015 5v2"/></svg>
                Reply
              </button>
              <button className="gm-bottom-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 17l5-5-5-5M20 12H9a5 5 0 00-5 5v2"/></svg>
                Forward
              </button>
            </div>
          </div>
        </div>

        <div className="intent-card fade-in" style={{animationDelay: "0.15s"}}>
          <div className="eyebrow">Channel · Email</div>
          <h2>09:14, Lukas's morning just changed.</h2>
          <p>
            EK202 to JFK has been cancelled for operational reasons. The email confirms the cancellation and points him to <em>Manage Your Booking</em>. The auto-rebook is sitting in the booking record, but he won't see what it actually is until he opens it.
          </p>
          <p style={{color: "var(--ink-3)"}}>
            Lukas reads the email but still has questions. He goes to the Emirates website to manage his booking, where the virtual assistant is available to help.
          </p>
          <div className="stat-row">
            <div className="stat">
              <div className="num">Dozens</div>
              <div className="lbl">Flights affected</div>
            </div>
            <div className="stat">
              <div className="num">22 min</div>
              <div className="lbl">Avg. hold time</div>
            </div>
          </div>
          <div style={{
            marginTop: 12,
            padding: "14px 16px",
            background: "white", border: "1px solid var(--line)", borderRadius: 10,
            display: "flex", alignItems: "center", gap: 12,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 6,
              background: "var(--surface-2)", display: "grid", placeItems: "center",
              fontSize: 13, fontWeight: 600, color: "var(--ink-2)",
              overflow: "hidden",
            }}>
              <img src={lukas.photo} alt={lukas.name} style={{width: "100%", height: "100%", objectFit: "cover"}}/>
            </div>
            <div>
              <div style={{fontSize: 13, fontWeight: 600, color: "var(--ink)"}}>{lukas.name}</div>
              <div style={{fontSize: 11, color: "var(--ink-3)"}}>Skywards {lukas.skywards} · Member since {lukas.member_since}</div>
            </div>
            <div className="pill pill--info" style={{marginLeft: "auto"}}>{lukas.bookings_recent} bookings · 12mo</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenEmail = ScreenEmail;