/* ========================================================================
   screen-assistant.jsx, Wonderful Assistant rep console (DARK)
   New model: Marcus is NOT on the call. Hala handles conversations
   autonomously and only escalates discrete actions for human approval.
   This screen is an APPROVAL QUEUE, not a live transcript.
   ======================================================================== */

const HOLD_INITIAL_SEC = 14 * 60 + 42;

function fmtMmSs(totalSec) {
  const s = Math.max(0, Math.floor(totalSec || 0));
  const mm = String(Math.floor(s / 60)).padStart(2, "0");
  const ss = String(s % 60).padStart(2, "0");
  return `${mm}:${ss}`;
}

function ScreenAssistant({ active }) {
  const turns = window.DEMO_SCRIPT.assistant;
  const lukas = window.DEMO_SCRIPT.passenger;
  const rep   = window.DEMO_SCRIPT.rep;
  const ek    = window.DEMO_SCRIPT.original_flight;
  const opt   = window.DEMO_SCRIPT.options[0]; // EK203

  const { shown, typing } = window.useChatPlayback(turns, {
    sceneActive: active,
    paused: false,
    speed: 1.0,
  });

  // Approval is HUMAN-DRIVEN. The script delivers the card; the click drives the rest.
  const seen = new Set(shown.map(t => t.who));
  const cardArrived = seen.has("approval-card-arrive");

  const [approved, setApproved] = useState(false);
  const [completed, setCompleted] = useState(false);
  const [holdRemainingSec, setHoldRemainingSec] = useState(HOLD_INITIAL_SEC);

  // Reset on scene change so re-entering the scene shows the unapproved card.
  useEffect(() => {
    if (!active) {
      setApproved(false);
      setCompleted(false);
      setHoldRemainingSec(HOLD_INITIAL_SEC);
    }
  }, [active]);

  // Seat hold countdown: starts when the approval card is on-screen; stops on Approve or at 00:00.
  useEffect(() => {
    if (!active || !cardArrived || approved) return;
    const id = setInterval(() => {
      setHoldRemainingSec((prev) => (prev <= 1 ? 0 : prev - 1));
    }, 1000);
    return () => clearInterval(id);
  }, [active, cardArrived, approved]);

  // After approve click, run the downstream actions tick.
  useEffect(() => {
    if (!approved) return;
    const t = setTimeout(() => setCompleted(true), 1400);
    return () => clearTimeout(t);
  }, [approved]);

  const decided = approved;
  const approvedFire = approved;
  const holdExpired = !approved && holdRemainingSec <= 0;

  const badgeIsNeutral =
    (!holdExpired && !approved) || approved || completed;
  const badgeLabel = completed
    ? "Seat locked · committed"
    : approved
      ? "Committing rebook…"
      : holdExpired
        ? "Hold expired"
        : "Seat held · awaiting commit";

  return (
    <div className="assistant-canvas">
      <div className="app-topbar">
        <div className="brand">
          <EKMark size={28}/>
          <div>
            <div className="name">Emirates · Disruption Desk</div>
            <div className="sub">Powered by Wonderful</div>
          </div>
        </div>
        <div className="nav">
          <div className="nav-item">Cases</div>
          <div className="nav-item active">Approvals</div>
          <div className="nav-item">Knowledge</div>
          <div className="nav-item">Reports</div>
        </div>
        <div className="case-id">
          <span className="pill-queue">
            <span className="pill-queue-dot"/>
            Queue · 3 pending
          </span>
          <span style={{fontFamily: "var(--font-mono)"}}>Case #EK-DSPT-89412</span>
          <div className="rep-chip">
            <div className="av"><img src="assets/marcus-photo.png" alt=""/></div>
            <span className="name">{rep.name}</span>
          </div>
        </div>
      </div>

      <div className="assistant-grid">
        {/* ============== LEFT COLUMN, CUSTOMER DNA ============== */}
        <div className="col-pane">
          <div className="sec-head">
            <span>Customer</span>
            <span className="badge">Skywards Silver</span>
          </div>

          <div className="dna-card">
            <div className="dna-head">
              <div className="av"><img src={lukas.photo} alt={lukas.name}/></div>
              <div className="who">
                <div className="name">{lukas.name}</div>
                <div className="meta">
                  <span className="silver">Skywards Silver · since {lukas.member_since}</span>
                </div>
              </div>
            </div>

            <div className="dna-stats">
              <div className="dna-stat">
                <div className="num">{lukas.bookings}</div>
                <div className="lbl">Bookings</div>
              </div>
              <div className="dna-stat">
                <div className="num">{lukas.ltv}</div>
                <div className="lbl">Lifetime value</div>
              </div>
              <div className="dna-stat">
                <div className="num">9<span className="num-sub">/10</span></div>
                <div className="lbl">NPS · Mar</div>
              </div>
            </div>

            <div className="dna-route">
              <span className="dna-iata">DXB</span>
              <span className="dna-route-line">
                <svg width="60" height="10" viewBox="0 0 60 10" fill="none" aria-hidden="true">
                  <path d="M0 5 H56" stroke="currentColor" strokeWidth="1" strokeDasharray="2 2" opacity="0.5"/>
                  <path d="M52 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                </svg>
              </span>
              <span className="dna-iata">JFK</span>
              <span className="dna-trips">6 trips · top route</span>
            </div>

            <div className="dna-section">
              <div className="dna-section-head">Identity</div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.2"/><path d="M2.5 4.5 L8 9 L13.5 4.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                </span>
                <span className="k">Email</span>
                <span className="v">{lukas.email}</span>
              </div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 L8 3.5 H13.5 V9 L8.5 14 z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" fill="none"/><circle cx="11" cy="6" r="1" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
                </span>
                <span className="k">PNR</span>
                <span className="v mono">{lukas.pnr}</span>
              </div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" strokeWidth="1.2"/><path d="M2.5 8 H13.5 M8 2.5 C5.5 5 5.5 11 8 13.5 M8 2.5 C10.5 5 10.5 11 8 13.5" stroke="currentColor" strokeWidth="1.2" fill="none"/></svg>
                </span>
                <span className="k">Languages</span>
                <span className="v">{lukas.languages}</span>
              </div>
            </div>

            <div className="dna-section">
              <div className="dna-section-head">Travel profile</div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2" y="3.5" width="12" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.2"/><path d="M2 7 H14 M5.5 2 V5 M10.5 2 V5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>
                </span>
                <span className="k">Last 12mo</span>
                <span className="v">{lukas.bookings_recent} bookings · DXB-JFK heavy</span>
              </div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M5 2 V8 C5 8 4 8.5 4 10 V14 M5 8 H7 M3 2 V8 M7 2 V8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none"/><path d="M11.5 2 V14 M11.5 2 C13 2 13 4 13 5.5 C13 7 12.5 7.5 11.5 7.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none"/></svg>
                </span>
                <span className="k">Meal</span>
                <span className="v">Vegetarian · long-haul</span>
              </div>
              <div className="dna-row">
                <span className="dna-ico">
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3.5 2.5 V8 H10.5 V2.5 z M3 8 L3 13 H4 L4.5 10 H10 L10.5 13 H11.5 L11 8 M12 5 V11" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round" fill="none"/></svg>
                </span>
                <span className="k">Seat</span>
                <span className="v">23A · window · forward cabin</span>
              </div>
            </div>
          </div>

          <div className="sec-head">
            <span>Booking · Today</span>
          </div>

          <div className="booking-card v2">
            <div className="bk-row was">
              <div className="bk-status">
                <span className="bk-dot"><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg></span>
                <span className="bk-label">Cancelled</span>
                <span className="bk-when">{window.DEMO_DATES.TODAY}</span>
              </div>
              <div className="bk-strip">
                <div className="bk-end">
                  <div className="bk-time">{ek.depart}</div>
                  <div className="bk-iata">{ek.from}</div>
                </div>
                <div className="bk-line">
                  <div className="bk-flight">{ek.code}</div>
                  <div className="bk-track"><span className="bk-track-x"/></div>
                  <div className="bk-duration">cancelled</div>
                </div>
                <div className="bk-end r">
                  <div className="bk-time">{ek.arrive || "19:55"}</div>
                  <div className="bk-iata">{ek.to}</div>
                </div>
              </div>
            </div>

            <div className="bk-row now">
              <div className="bk-status">
                <span className="bk-dot ok"><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <span className="bk-label">Rebooking</span>
                <span className="bk-when">confirming now</span>
              </div>
              <div className="bk-strip">
                <div className="bk-end">
                  <div className="bk-time">{opt.depart_time}</div>
                  <div className="bk-iata">{opt.from}</div>
                </div>
                <div className="bk-line">
                  <div className="bk-flight">{opt.id}</div>
                  <div className="bk-track"><span className="bk-track-plane">✈</span></div>
                  <div className="bk-duration">14h 15m · direct</div>
                </div>
                <div className="bk-end r">
                  <div className="bk-time">{opt.arrive_time}<sup className="bk-sup">+1</sup></div>
                  <div className="bk-iata">{opt.to}</div>
                </div>
              </div>
              <div className="bk-tags">
                <span className="bk-tag">
                  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M4 4h8v3l-3 1v4l-2 2v-6l-3-1z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/></svg>
                  Seat 23A · window
                </span>
                <span className="bk-tag">
                  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M3 6h10v6a1 1 0 01-1 1H4a1 1 0 01-1-1V6zM3 6V4a1 1 0 011-1h8a1 1 0 011 1v2M6 9h4" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" strokeLinecap="round"/></svg>
                  VGML meal
                </span>
                <span className="bk-tag">
                  <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" strokeWidth="1.2"/><path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>
                  Arrives {opt.arrive_date} {opt.arrive_time}
                </span>
              </div>
            </div>
          </div>

          <div className="sec-head">
            <span>From the chat</span>
            <span className="badge">14 turns</span>
          </div>
          <div className="brief-card">
            <div className="brief-quote">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" className="brief-quote-mark"><path d="M3 7c0-2 1.5-3 3-3M9 7c0-2 1.5-3 3-3M3 7v3h3V7H3zM9 7v3h3V7H9z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>
              <span>What Lukas told Hala</span>
            </div>
            <ul className="brief-list">
              <li>
                <span className="brief-k">Why this trip</span>
                <span className="brief-v"><strong>Sister's wedding · Brooklyn · 11:00 tomorrow.</strong> Lukas is giving the speech, needs rest before.</span>
              </li>
              <li>
                <span className="brief-k">Preference</span>
                <span className="brief-v">Keep <strong>seat 23A</strong>, direct flight, vegetarian meal.</span>
              </li>
              <li>
                <span className="brief-k">How it closed</span>
                <span className="brief-v">Calm and sorted on the call. Expects confirmation across all three channels.</span>
              </li>
            </ul>
          </div>
        </div>

        {/* ============== MIDDLE, APPROVAL QUEUE ============== */}
        <div className="col-pane">
          <div className="aq-header">
            <div className="aq-header-l">
              <div className="aq-h-eyebrow">Approvals queue</div>
              <div className="aq-h-title">Rebook commit · Lukas Weber</div>
              <div className="aq-h-meta">
                <span className="aq-h-tag">Voice agent · Hala</span>
                <span className="aq-sep">·</span>
                <span>Rebook request · review &amp; commit</span>
                <span className="aq-sep">·</span>
                <span className="aq-h-sla">SLA 60s · {decided ? "closed in 9s" : "awaiting review"}</span>
              </div>
            </div>
            <div className="aq-header-r">
              <div className="aq-mini">
                <div className="aq-mini-row">
                  <span className="aq-mini-dot live"/>
                  <span className="aq-mini-l">Now</span>
                  <span className="aq-mini-c">Lukas Weber · commit rebook</span>
                </div>
                <div className="aq-mini-row">
                  <span className="aq-mini-dot"/>
                  <span className="aq-mini-l">+12s</span>
                  <span className="aq-mini-c">A. Bah · partner-airline reroute</span>
                </div>
                <div className="aq-mini-row">
                  <span className="aq-mini-dot"/>
                  <span className="aq-mini-l">+34s</span>
                  <span className="aq-mini-c">M. Khan · refund &gt; AED 8k</span>
                </div>
              </div>
            </div>
          </div>

          <div className={`aq-card ${cardArrived ? "is-in" : "is-pre"} ${completed ? "is-done" : ""}`}>
            <div className="aq-card-head">
              <div className="aq-from">
                <div className="aq-from-av"><img src="assets/hala.svg" alt=""/></div>
                <div>
                  <div className="aq-from-name">Hala · voice agent</div>
                  <div className="aq-from-sub">Submitted for review · case EK-DSPT-89412</div>
                </div>
              </div>
              <div className={`aq-priority${badgeIsNeutral ? " neutral" : ""}`}>
                <span className={`aq-prio-dot${badgeIsNeutral ? " ok" : ""}`}/>
                {badgeLabel}
              </div>
            </div>

            <div className="aq-section">
              <div className="aq-sec-h">Conversation summary</div>
              <p className="aq-summary">
Lukas Weber (Skywards Silver, PNR <strong className="mono">{lukas.pnr}</strong>) was on EK202 to JFK, cancelled this morning due to a thunderstorm. He's flying to <strong>his sister's wedding in Brooklyn at 11:00</strong> tomorrow, he's giving the speech. Hala walked him through options on chat then voice, answered his policy questions on entitlements and disruption coverage, and Lukas confirmed <strong>EK203 direct tonight at 22:40</strong>. Seat 23A is on a 15-minute hold. He's expecting your sign-off.
              </p>
            </div>

            <div className="aq-section">
              <div className="aq-sec-h">What Hala did on the call</div>
              <div className="aq-action auto">
                <span className="aq-act-ico ok">
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
                <div className="aq-act-body">
                  <div className="aq-act-ttl">Verified identity · answered policy questions · held seat 23A</div>
                  <div className="aq-act-sub">Quoted cancellation policy (free same-cabin rebook) and disruption coverage (hotel/meal vouchers if EK203 also cancels). Seat 23A on a 15-minute soft hold in ResConnect.</div>
                </div>
                <div className="aq-act-tag">Hala-only actions</div>
              </div>
            </div>

            <div className="aq-section">
              <div className="aq-sec-h">What needs your approval</div>
              <div className="aq-action ask">
                <span className="aq-act-ico ask">
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
                <div className="aq-act-body">
                  <div className="aq-act-ttl">Commit rebook EK202 → EK203 &amp; confirm to Lukas across channels</div>
                  <div className="aq-act-sub">One click: writes the booking change in ResConnect, locks seat 23A + VGML meal, sends email + SMS + WhatsApp confirmations to Lukas, closes the case in Genesys.</div>
                </div>
                <div className="aq-act-tag warn">Hala cannot commit · needs human sign-off</div>
              </div>
              <div className="aq-checks">
                <div className="aq-check">
                  <span className="aq-chk-k">Hold expires</span>
                  <span className="aq-chk-v">
                    {!approved ? (
                      <>
                        <strong className="mono">{fmtMmSs(holdRemainingSec)}</strong>
                        {holdRemainingSec > 0 ? " remaining on seat 23A" : " · hold expired on seat 23A"}
                      </>
                    ) : completed ? (
                      <>Seat 23A locked in ResConnect</>
                    ) : (
                      <>Hold cleared · committing seat 23A…</>
                    )}
                  </span>
                </div>
                <div className="aq-check">
                  <span className="aq-chk-k">Customer expects</span>
                  <span className="aq-chk-v">Push notification &laquo;under a minute&raquo;</span>
                </div>
                <div className="aq-check">
                  <span className="aq-chk-k">Fare delta</span>
                  <span className="aq-chk-v">AED 0 · within disruption policy §4.2</span>
                </div>
              </div>
            </div>

            <div className={`aq-actions ${decided ? "is-decided" : ""}`}>
              {!decided && (
                <>
                  <button className="aq-btn primary" onClick={() => setApproved(true)}>
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    Approve &amp; commit rebook
                    <span className="aq-kbd">A</span>
                  </button>
                  <button className="aq-btn ghost">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    Modify
                    <span className="aq-kbd">M</span>
                  </button>
                  <button className="aq-btn danger">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                    Reject
                    <span className="aq-kbd">R</span>
                  </button>
                  <span className="aq-actions-spacer"/>
                  <button className="aq-btn link">Open full transcript ↗</button>
                </>
              )}
              {decided && (
                <div className={`aq-decided ${approvedFire ? "is-firing" : ""}`}>
                  <span className="aq-decided-ico">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  <div>
                    <div className="aq-decided-ttl">Approved by {rep.name}</div>
                    <div className="aq-decided-sub">{completed ? "Rebook committed · push sent to Lukas · case closed" : "Committing rebook · sending push…"}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* ============== RIGHT, DECISION CONTEXT ============== */}
        <div className="col-pane copilot-pane">
          <div className="copilot-status">
            <div className="head">
              <div className="ico">
                <svg width="14" height="14" 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 className="ttl">Decision context</div>
                <div className="sub">Wonderful · grounded in policy + history</div>
              </div>
            </div>
            <div className="listening-row">
              <span className="aq-mini-dot live"/>
              Everything below is sourced. Nothing here is a guess.
            </div>
          </div>

          <div className="copilot-scroll">
            {/* COMPLIANCE CHECKLIST */}
            <div className="cp-card is-new">
              <div className="head">
                <span className="typ context">Compliance check</span>
                <span className="src">EK disruption · §4.2</span>
              </div>
              <div className="ttl">Pre-flight checks before you commit</div>
              <ul className="hist-list" style={{marginTop: 4}}>
                <li>
                  <span className="hist-d">Identity</span>
                  <span className="hist-c">PNR + email verified on call</span>
                  <span className="hist-g" style={{color: "#6EE2A8"}}>✓</span>
                </li>
                <li>
                  <span className="hist-d">Eligibility</span>
                  <span className="hist-c">Cancelled by EK · free same-cabin rebook</span>
                  <span className="hist-g" style={{color: "#6EE2A8"}}>✓</span>
                </li>
                <li>
                  <span className="hist-d">Seat 23A</span>
                  <span className="hist-c">
                    {!approved
                      ? (holdRemainingSec > 0
                          ? <>On hold · expires in {fmtMmSs(holdRemainingSec)}</>
                          : <>Hold expired · seat not guaranteed without commit</>)
                      : completed
                        ? <>Locked · seat 23A confirmed</>
                        : <>Committing lock on seat 23A…</>}
                  </span>
                  <span
                    className="hist-g"
                    style={{
                      color:
                        !approved && holdRemainingSec <= 0 ? "#FF8A80" : "#6EE2A8",
                    }}
                  >
                    {!approved && holdRemainingSec <= 0 ? "!" : "✓"}
                  </span>
                </li>
                <li>
                  <span className="hist-d">Fare delta</span>
                  <span className="hist-c">AED 0 · no out-of-policy charge</span>
                  <span className="hist-g" style={{color: "#6EE2A8"}}>✓</span>
                </li>
                <li>
                  <span className="hist-d">Customer consent</span>
                  <span className="hist-c">"Go ahead and lock it in" · 01:08</span>
                  <span className="hist-g" style={{color: "#6EE2A8"}}>✓</span>
                </li>
              </ul>
            </div>

            {/* POLICY Q&A, what Hala answered on the call, grounded */}
            <div className="cp-card is-new">
              <div className="head">
                <span className="typ context">Policy answers</span>
                <span className="src">Knowledge base · cited live</span>
              </div>
              <div className="ttl">Lukas's two questions, Hala's grounded answers</div>
              <div className="qa-block">
                <div className="qa-q">"Will I lose my fare, miles, or seat?"</div>
                <div className="qa-a">No. Free same-cabin rebook · miles preserved · seat &amp; meal carry across.</div>
                <div className="qa-src">Source · EK disruption policy §4.2 · involuntary rerouting</div>
              </div>
              <div className="qa-block">
                <div className="qa-q">"If EK203 also cancels, am I covered?"</div>
                <div className="qa-a">Yes. Hotel + meal vouchers if cancelled &gt;4h from departure · auto-reaccommodate next service.</div>
                <div className="qa-src">Source · EK disruption policy §6.1 · duty of care</div>
              </div>
            </div>

            {/* CUSTOMER HISTORY */}
            <div className="cp-card">
              <div className="head">
                <span className="typ context">Customer</span>
                <span className="src">Skywards · DXB-JFK</span>
              </div>
              <div className="ttl">Lukas Weber · in good standing</div>
              <div className="body" style={{fontSize: 12.5, lineHeight: 1.55}}>
                Skywards Silver since {lukas.member_since}, {lukas.bookings_recent} segments in the last 12mo, NPS 9/10 in March. Lifetime value {lukas.ltv}. No open complaints, no fraud flags.
              </div>
            </div>

            {/* IF APPROVED */}
            <div className={`cp-card ${approvedFire ? "genesys is-new" : ""}`}>
              <div className="head" style={{alignItems: "center"}}>
                {approvedFire && (
                  <img src="assets/genesys-logo.png" alt="Genesys" style={{height: 32, width: "auto", display: "block", marginRight: 8}}/>
                )}
                <span className={`typ ${approvedFire ? "action" : "context"}`} style={approvedFire ? {background: "rgba(255,107,0,0.18)", color: "#B85100"} : {}}>
                  {approvedFire ? "executing" : "on approval"}
                </span>
                <span className="src" style={approvedFire ? {color: "#B85100"} : {}}>
                  {approvedFire ? "committed by " + rep.name : "fires the moment you approve"}
                </span>
              </div>
              <div className="ttl">Downstream actions</div>
              <div style={{marginTop: 6}}>
                <div className="gen-row">
                  <div className="ix">1</div>
                  <div className="body">
                    <div className="l1">ResConnect · commit rebook EK202 → EK203</div>
                    <div className="l2">Locks seat 23A · VGML meal · Skywards miles preserved</div>
                  </div>
                  <div className="ok">{approvedFire ? "✓" : "·"}</div>
                </div>
                <div className="gen-row">
                  <div className="ix">2</div>
                  <div className="body">
                    <div className="l1">Confirmation across email · SMS · WhatsApp</div>
                    <div className="l2">EK203 · 22:40 DXB → 04:55 JFK · seat 23A · sent the moment you commit</div>
                  </div>
                  <div className="ok">{approvedFire ? "✓" : "·"}</div>
                </div>
                <div className="gen-row">
                  <div className="ix">3</div>
                  <div className="body">
                    <div className="l1">Genesys · case marked resolved</div>
                    <div className="l2">Outcome: rebooked, no compensation, audit log written</div>
                  </div>
                  <div className="ok">{approvedFire ? "✓" : "·"}</div>
                </div>
              </div>
              <div className="src-pills">
                <span className="src-pill">Genesys flow #DSPT-rebook-v3</span>
                <span className="src-pill">audit log</span>
              </div>
            </div>

            {/* GUARDRAIL */}
            <div className="cp-card guardrail">
              <div className="head">
                <span className="typ guard">🛡 Guardrail</span>
                <span className="src">policy · live</span>
              </div>
              <div className="ttl">Why this came to you</div>
              <div className="body" style={{fontSize: 12}}>
                Hala can verify identity, answer policy questions, hold seats, set meals, and apologise on her own. She <strong>cannot commit rebooks, send confirmations, or close cases</strong> without a human sign-off. <strong>You drive every booking write.</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenAssistant = ScreenAssistant;