/* ========================================================================
   screen-closing.jsx, what changed for Lukas / Marcus / Emirates
   ======================================================================== */

function ScreenClosing({ active }) {
  const lukas = window.DEMO_SCRIPT.passenger;
  const rep = window.DEMO_SCRIPT.rep;

  return (
    <div className="canvas canvas-paper" style={{display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "44px 50px 36px", overflowY: "auto"}}>
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(800px 400px at 80% 20%, rgba(74,111,227,0.05), transparent 70%)," +
          "radial-gradient(900px 500px at 10% 90%, rgba(215,25,33,0.04), transparent 70%)",
        pointerEvents: "none",
      }}/>

      <div style={{position: "relative", width: 1580, display: "flex", flexDirection: "column", gap: 28}}>
        <div className="fade-in" style={{display: "flex", alignItems: "center", gap: 14}}>
          <EKMark size={28}/>
          <span style={{fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)"}}>The outcome</span>
          <div style={{flex: 1, height: 1, background: "var(--line)"}}/>
        </div>

        <h1 className="fade-in" style={{margin: 0, fontSize: 60, fontWeight: 300, lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--ink)", animationDelay: "0.05s"}}>
          One disruption. <span style={{color: "var(--ink-3)"}}>Handled by Hala. Committed by Marcus.</span>
        </h1>

        <div className="fade-in" style={{animationDelay: "0.15s", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22, marginTop: 8}}>
          {/* LUKAS */}
          <div style={{background: "white", border: "1px solid var(--line)", borderRadius: 16, padding: 28, display: "flex", flexDirection: "column", gap: 16}}>
            <div style={{display: "flex", alignItems: "center", gap: 14}}>
              <Avatar src={lukas.photo} name={lukas.name} size={52} ring="var(--ek-red)"/>
              <div>
                <div style={{fontSize: 11, fontWeight: 700, color: "var(--ek-red)", letterSpacing: "0.12em", textTransform: "uppercase"}}>For Lukas</div>
                <div style={{fontSize: 18, fontWeight: 600, color: "var(--ink)", marginTop: 2}}>The passenger</div>
              </div>
            </div>
            <p style={{margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)"}}>
He'll make the wedding. <strong style={{color: "var(--ink)"}}>One conversation</strong>, across email, chat and voice. <strong style={{color: "var(--ink)"}}>No transfer, no hold, no repeating himself.</strong> Hala held his seat, queued the rebook to the specialist desk, and confirmation hit his phone in three channels seconds after sign-off.
            </p>
            <div style={{display: "flex", flexDirection: "column", marginTop: 4}}>
              {[
                ["Time on chat + call", "8 min", "vs. 22 min on hold"],
                ["Channels, one persona", "3", "email → chat → voice"],
                ["Times he repeated himself", "0", "context carried"],
                ["Outcome", "Makes the wedding", "lands 04:55 · ceremony 11:00"],
              ].map(([k, v, sub], i) => (
                <div key={i} style={{display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 16, height: 76, borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none"}}>
                  <div style={{fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, lineHeight: 1.35}}>{k}</div>
                  <div style={{textAlign: "right"}}>
                    <div style={{fontSize: 15, fontWeight: 600, color: "var(--ink)", lineHeight: 1.2}}>{v}</div>
                    <div style={{fontSize: 11, color: "var(--good)", fontWeight: 600, marginTop: 2, minHeight: 14}}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* MARCUS */}
          <div style={{background: "white", border: "1px solid var(--line)", borderRadius: 16, padding: 28, display: "flex", flexDirection: "column", gap: 16}}>
            <div style={{display: "flex", alignItems: "center", gap: 14}}>
              <Avatar src={rep.photo} name={rep.name} size={52} ring="var(--w-blue)"/>
              <div>
                <div style={{fontSize: 11, fontWeight: 700, color: "var(--w-blue)", letterSpacing: "0.12em", textTransform: "uppercase"}}>For Marcus</div>
                <div style={{fontSize: 18, fontWeight: 600, color: "var(--ink)", marginTop: 2}}>The senior consultant</div>
              </div>
            </div>
            <p style={{margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-2)"}}>
He never picked up the phone. He <strong style={{color: "var(--ink)"}}>reviewed Hala's case in 9 seconds</strong> and committed the rebook with one click. Hala ran the conversation; Marcus stays in <strong style={{color: "var(--ink)"}}>oversight, not in the queue</strong>, and every booking write still goes through a human.
            </p>
            <div style={{display: "flex", flexDirection: "column", marginTop: 4}}>
              {[
                ["Time on this case", "0:09", "↓ from ~9:00"],
                ["Booking writes still human", "100%", "every commit signed off"],
                ["Cases committed / shift", "~180", "↑ from ~50"],
                ["Role shift", "oversight", "not first responder"],
              ].map(([k, v, sub], i) => (
                <div key={i} style={{display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 16, height: 76, borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none"}}>
                  <div style={{fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, lineHeight: 1.35}}>{k}</div>
                  <div style={{textAlign: "right"}}>
                    <div style={{fontSize: 15, fontWeight: 600, color: "var(--ink)", lineHeight: 1.2}}>{v}</div>
                    <div style={{fontSize: 11, color: "var(--good)", fontWeight: 600, marginTop: 2, minHeight: 14}}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* OPERATION */}
          <div style={{background: "linear-gradient(160deg, #14171F, #1F232C)", borderRadius: 16, padding: 28, display: "flex", flexDirection: "column", gap: 16, color: "white"}}>
            <div style={{display: "flex", alignItems: "center", gap: 14}}>
              <div style={{width: 52, height: 52, borderRadius: 999, background: "linear-gradient(135deg, var(--w-blue), var(--w-purple))", display: "grid", placeItems: "center"}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M3 8l4 9 5-9 5 9 4-9" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div>
                <div style={{fontSize: 11, fontWeight: 700, color: "#B6C5F5", letterSpacing: "0.12em", textTransform: "uppercase"}}>For Emirates</div>
                <div style={{fontSize: 18, fontWeight: 600, color: "white", marginTop: 2}}>The operation</div>
              </div>
            </div>
            <p style={{margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.85)"}}>
On the day a thunderstorm grounded EK202 and dozens of other flights out of DXB, the contact centre <strong style={{color: "white"}}>didn't need a human on every call</strong>. Hala ran disruption conversations end-to-end, in the customer's language; humans committed every booking write and stepped in when judgement was needed.
            </p>
            <div style={{display: "flex", flexDirection: "column", marginTop: 4}}>
              {[
                ["Disruption convos by Hala", "86%", "+1-click human commit"],
                ["Avg. hold time during event", "0 min", "↓ from 22"],
                ["Languages covered, day one", "15+", "incl. AR, DE, HI, ZH"],
                ["CSAT during the disruption", "4.6 / 5", "↑ from 3.8"],
              ].map(([k, v, sub], i) => (
                <div key={i} style={{display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 16, height: 76, borderBottom: i < 3 ? "1px solid rgba(255,255,255,0.08)" : "none"}}>
                  <div style={{fontSize: 11, color: "rgba(255,255,255,0.5)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, lineHeight: 1.35}}>{k}</div>
                  <div style={{textAlign: "right"}}>
                    <div style={{fontSize: 15, fontWeight: 600, color: "white", lineHeight: 1.2}}>{v}</div>
                    <div style={{fontSize: 11, color: "#6EE2A8", fontWeight: 600, marginTop: 2, minHeight: 14}}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="fade-in" style={{animationDelay: "0.3s", display: "flex", alignItems: "center", gap: 22, padding: "20px 28px", background: "white", border: "1px solid var(--line)", borderRadius: 14}}>
          <WonderMark size={42}/>
          <div style={{flex: 1}}>
            <div style={{fontSize: 18, color: "var(--ink)", fontWeight: 500, letterSpacing: "-0.005em"}}>
              One agent across email, web, and voice. Runs the conversation end-to-end, in the customer's language. Loops a human in for oversight only, never as a bottleneck.
            </div>
          </div>
          <div style={{display: "flex", gap: 12}}>
            <div style={{textAlign: "center", padding: "10px 18px", background: "var(--surface-2)", borderRadius: 10}}>
              <div style={{fontSize: 22, fontWeight: 300, color: "var(--ink)"}}>3</div>
              <div style={{fontSize: 10, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em"}}>channels</div>
            </div>
            <div style={{textAlign: "center", padding: "10px 18px", background: "var(--surface-2)", borderRadius: 10}}>
              <div style={{fontSize: 22, fontWeight: 300, color: "var(--ink)"}}>1</div>
              <div style={{fontSize: 10, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em"}}>persona</div>
            </div>
            <div style={{textAlign: "center", padding: "10px 18px", background: "var(--surface-2)", borderRadius: 10}}>
              <div style={{fontSize: 22, fontWeight: 300, color: "var(--ink)"}}>0</div>
              <div style={{fontSize: 10, fontWeight: 600, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em"}}>repetition</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

window.ScreenClosing = ScreenClosing;
