// scenes2.jsx — scenes 4, 5, 6 (and final)

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — Kanban board with column spotlight + card move
// ═══════════════════════════════════════════════════════════════════════════

function ActionCardMock({ title, body, approveLabel = 'Approve', rejectLabel = 'Reject' }) {
  return (
    <div style={{
      background: '#FFFFFF',
      border: '1px solid rgba(0,0,0,0.1)',
      borderRadius: 8,
      padding: 12,
      width: 280,
    }}>
      <div style={{
        fontSize: 10,
        fontFamily: 'ui-monospace, monospace',
        textTransform: 'uppercase',
        letterSpacing: 0.6,
        color: '#E8872F',
        marginBottom: 8,
      }}>
        {title}
      </div>
      <div style={{ fontSize: 13, color: '#0D0D0D', lineHeight: 1.4, marginBottom: 12 }}>
        {body}
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button style={{
          background: '#E8872F',
          color: '#FFFFFF',
          border: 'none',
          borderRadius: 6,
          padding: '6px 12px',
          fontSize: 12,
          cursor: 'pointer',
        }}>{approveLabel}</button>
        <button style={{
          background: 'transparent',
          color: '#0D0D0D',
          border: 'none',
          padding: '6px 12px',
          fontSize: 12,
          cursor: 'pointer',
        }}>{rejectLabel}</button>
      </div>
    </div>
  );
}

function DestructiveActionCard({ banner, recipient, subject, confirmText = 'SEND' }) {
  return (
    <div style={{
      background: '#FFFFFF',
      border: '1px solid rgba(0,0,0,0.1)',
      borderRadius: 8,
      width: 320,
      overflow: 'hidden',
    }}>
      <div style={{
        background: '#FEE2E2',
        color: '#991B1B',
        padding: '8px 12px',
        fontSize: 11,
        fontWeight: 600,
        letterSpacing: 0.3,
      }}>{banner}</div>
      <div style={{ padding: 12 }}>
        <div style={{ fontSize: 11, color: '#6B7280', marginBottom: 4 }}>To: {recipient}</div>
        <div style={{ fontSize: 13, color: '#0D0D0D', marginBottom: 12, fontWeight: 500 }}>{subject}</div>
        <div style={{
          background: '#F3F4F6',
          borderRadius: 6,
          padding: '8px 10px',
          fontSize: 12,
          color: '#9CA3AF',
          marginBottom: 10,
          fontFamily: 'ui-monospace, monospace',
        }}>{`Type ${confirmText} to confirm`}</div>
        {/* Renders as: "Type SEND to confirm" — destructive-tier UX pattern */}
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            background: '#9CA3AF',
            color: '#FFFFFF',
            border: 'none',
            borderRadius: 6,
            padding: '6px 14px',
            fontSize: 12,
            cursor: 'not-allowed',
            opacity: 0.6,
          }}>Send (final)</button>
          <button style={{
            background: 'transparent',
            color: '#0D0D0D',
            border: 'none',
            padding: '6px 12px',
            fontSize: 12,
            cursor: 'pointer',
          }}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

function SafeActionInline({ label, href }) {
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      background: '#ECFDF5',
      border: '1px solid #A7F3D0',
      borderRadius: 6,
      padding: '6px 10px',
      fontSize: 12,
      color: '#065F46',
    }}>
      <span style={{ color: '#10B981', fontWeight: 700 }}>v</span>
      <a href={href} style={{ color: '#065F46', textDecoration: 'none' }}>{label}</a>
    </div>
  );
}

function SceneKanban() {
  const { localTime } = useSprite();

  // Columns: Open → Pending → In Progress → Blocked → Resolved (5-status enum)
  const columns = [
    { key: 'OPEN',        label: 'Open',        count:  8, color: COLORS.mute,  soft: COLORS.lineSoft },
    { key: 'PENDING',     label: 'Pending',     count:  5, color: COLORS.amber, soft: COLORS.amberSoft },
    { key: 'IN_PROGRESS', label: 'In Progress', count: 14, color: COLORS.amber, soft: COLORS.amberSoft },
    { key: 'BLOCKED',     label: 'Blocked',     count:  3, color: COLORS.red,   soft: COLORS.redSoft },
    { key: 'RESOLVED',    label: 'Resolved',    count: 22, color: COLORS.green, soft: COLORS.greenSoft },
  ];

  // Spotlight column index, walking 0→4 (5 columns at 1.6s each = 8s total sweep)
  const spotIdx = Math.min(4, Math.max(0, Math.floor((localTime - 0.4) / 1.6)));
  const spotProg = clamp((localTime - 0.4) / 1.6 - spotIdx, 0, 1);

  // Card move: starts ~6.0s, In Progress (col 2) → Blocked (col 3)
  const moveT = animate({ from: 0, to: 1, start: 6.0, end: 7.4, ease: Easing.easeInOutCubic })(localTime);
  const actionCard = animate({ from: 0, to: 1, start: 7.5, end: 8.3, ease: Easing.easeOutBack })(localTime);

  // The moving card — column x positions for 5 columns
  const colXs = [40, 280, 520, 760, 1000];
  const fromX = colXs[2] + 12, toX = colXs[3] + 12;
  const fromY = 240, toY = 220;
  const cardX = fromX + (toX - fromX) * moveT;
  const cardY = fromY + (toY - fromY) * moveT;
  const cardLifted = moveT > 0.03 && moveT < 0.97;

  // Cursor
  const cursorX = interpolate([0, 5.5, 6.0, 7.0, 7.4], [700, 700, fromX + 60, toX + 60, toX + 60], Easing.easeInOutCubic)(localTime);
  const cursorY = interpolate([0, 5.5, 6.0, 7.0, 7.4], [380, 380, fromY + 30, toY + 30, toY + 30], Easing.easeInOutCubic)(localTime);
  const showCursor = localTime > 5.4;

  // Sanitized MTA card data
  const cards = [
    { id: 'ITEM-0142', title: 'Bid Leveling — Per-Unit Itemization Required',       status: 'OPEN',         priority: 'HIGH' },
    { id: 'ITEM-0138', title: 'RU-04 Ceiling Height vs. Beam Coordination',         status: 'OPEN',         priority: 'HIGH' },
    { id: 'ITEM-0135', title: 'Fire Alarm Integration with Sprinkler Heads',        status: 'IN_PROGRESS',  priority: 'CRITICAL' },
    { id: 'ITEM-0131', title: 'Concourse Access Pass Application — Trades',        status: 'IN_PROGRESS',  priority: 'MEDIUM' },
    { id: 'ITEM-0124', title: 'Kiosk 3-5 Connector Wall Detail Missing',            status: 'PENDING',      priority: 'MEDIUM' },
    { id: 'ITEM-0119', title: 'Load Letters — Water Heater + Rooftop Unit',        status: 'BLOCKED',      priority: 'MEDIUM' },
    { id: 'ITEM-0114', title: 'RU-07 Sanitary Drain Routing Solution',              status: 'RESOLVED',     priority: 'HIGH' },
    { id: 'ITEM-0108', title: 'Vendor AC Pre-Purchase Submittal Approval',          status: 'RESOLVED',     priority: 'MEDIUM' },
  ];

  // Group by status for column rendering
  const cardsByCol = {
    OPEN: cards.filter(c => c.status === 'OPEN'),
    PENDING: cards.filter(c => c.status === 'PENDING'),
    IN_PROGRESS: cards.filter(c => c.status === 'IN_PROGRESS'),
    BLOCKED: cards.filter(c => c.status === 'BLOCKED'),
    RESOLVED: cards.filter(c => c.status === 'RESOLVED'),
  };

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: COLORS.paper,
      fontFamily: FONT_UI,
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: COLORS.paper,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* title bar */}
        <div style={{
          height: 38, borderBottom: `1px solid ${COLORS.line}`,
          display: 'flex', alignItems: 'center', padding: '0 16px',
          background: COLORS.paperWarm, gap: 8,
        }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#E8634F' }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#E8B53F' }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#5BA85E' }} />
          </div>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 12, color: COLORS.mute, fontFamily: FONT_MONO, letterSpacing: '0.06em' }}>
            CPM Copilot — Board · Midtown Transit Hub — Concourse Retail Refresh
          </div>
        </div>

        {/* sub-header */}
        <div style={{
          padding: '14px 24px', borderBottom: `1px solid ${COLORS.line}`,
          display: 'flex', alignItems: 'center', gap: 16,
        }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.015em' }}>All items</div>
          <div style={{ fontSize: 12, color: COLORS.mute, fontFamily: FONT_MONO }}>47 active · 3 blocked</div>
          <div style={{ flex: 1 }} />
          <div style={{
            padding: '5px 10px', background: COLORS.paperWarm, border: `1px solid ${COLORS.line}`, borderRadius: 5,
            fontSize: 12, color: COLORS.inkSoft,
          }}>Filter: Phase = Rough-in</div>
        </div>

        {/* Columns */}
        <div style={{ flex: 1, position: 'relative', padding: '16px 12px', display: 'flex', gap: 10 }}>
          {columns.map((col, ci) => {
            const isSpot = ci === spotIdx && localTime < 5.6;
            return (
              <div key={col.key} style={{
                flex: 1, position: 'relative',
                background: isSpot ? '#fff' : COLORS.paperWarm,
                borderRadius: 8,
                padding: 10,
                border: isSpot ? `2px solid ${COLORS.orange}` : `1px solid ${COLORS.line}`,
                transition: 'border 250ms, background 250ms',
                boxShadow: isSpot ? '0 6px 20px rgba(232,122,42,0.18)' : 'none',
                zIndex: isSpot ? 5 : 1,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, padding: '0 4px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 4, background: col.color }} />
                    <span style={{ fontSize: 12, fontWeight: 600, color: COLORS.ink, fontFamily: FONT_MONO, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{col.label}</span>
                  </div>
                  <span style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO }}>{col.count}</span>
                </div>

                {/* drop indicator on Blocked column when card is mid-flight */}
                {col.key === 'BLOCKED' && cardLifted && (
                  <div style={{
                    height: 78, borderRadius: 6,
                    border: `2px dashed ${COLORS.orange}`,
                    background: COLORS.orangeSoft,
                    marginBottom: 8,
                    opacity: 0.6,
                  }} />
                )}

                {cardsByCol[col.key].map((c, i) => {
                  // skip the first IN_PROGRESS card while it's flying to Blocked
                  if (col.key === 'IN_PROGRESS' && i === 0 && cardLifted) return null;
                  const priColor = c.priority === 'CRITICAL' || c.priority === 'HIGH' ? COLORS.red
                    : c.priority === 'MEDIUM' ? COLORS.amber : COLORS.mute;
                  const priBg = c.priority === 'CRITICAL' || c.priority === 'HIGH' ? COLORS.redSoft
                    : c.priority === 'MEDIUM' ? COLORS.amberSoft : COLORS.lineSoft;
                  return (
                    <div key={c.id} style={{
                      background: '#fff',
                      border: `1px solid ${COLORS.line}`,
                      borderRadius: 6, padding: '10px 10px',
                      marginBottom: 6,
                    }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                        <span style={{ fontFamily: FONT_MONO, fontSize: 9, color: COLORS.mute, letterSpacing: '0.06em' }}>{c.id}</span>
                        {c.status !== 'RESOLVED' && (
                          <span style={{
                            fontFamily: FONT_MONO, fontSize: 8, letterSpacing: '0.14em', fontWeight: 600,
                            color: priColor,
                            padding: '1px 5px', borderRadius: 3,
                            background: priBg,
                          }}>{c.priority}</span>
                        )}
                        {c.status === 'RESOLVED' && (
                          <span style={{ color: COLORS.green, fontSize: 11 }}>✓</span>
                        )}
                      </div>
                      <div style={{ fontSize: 12, fontWeight: 500, color: COLORS.ink, lineHeight: 1.35, letterSpacing: '-0.005em', marginBottom: 4 }}>{c.title}</div>
                    </div>
                  );
                })}
              </div>
            );
          })}

          {/* Moving card — render at top level so it floats over columns */}
          {cardLifted && (
            <div style={{
              position: 'absolute', left: cardX, top: cardY,
              width: 220,
              background: '#fff',
              border: `1px solid ${COLORS.orange}`,
              borderRadius: 6, padding: '10px 10px',
              boxShadow: '0 12px 28px rgba(31,27,22,0.20)',
              transform: `rotate(${moveT < 0.5 ? -2 : 2}deg) scale(1.02)`,
              zIndex: 30,
              transition: 'transform 200ms',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontFamily: FONT_MONO, fontSize: 9, color: COLORS.mute, letterSpacing: '0.06em' }}>ITEM-0135</span>
                <span style={{ fontFamily: FONT_MONO, fontSize: 8, letterSpacing: '0.14em', fontWeight: 600, color: COLORS.red, padding: '1px 5px', borderRadius: 3, background: COLORS.redSoft }}>CRITICAL</span>
              </div>
              <div style={{ fontSize: 12, fontWeight: 500, color: COLORS.ink, lineHeight: 1.35, letterSpacing: '-0.005em', marginBottom: 4 }}>Fire Alarm Integration with Sprinkler Heads</div>
            </div>
          )}

          {/* Card landed in Blocked */}
          {moveT >= 0.97 && (
            <div style={{
              position: 'absolute', left: colXs[3] + 12, top: 220,
              width: 220,
              background: '#fff',
              border: `1px solid ${COLORS.line}`,
              borderRadius: 6, padding: '10px 10px',
              zIndex: 6,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontFamily: FONT_MONO, fontSize: 9, color: COLORS.mute, letterSpacing: '0.06em' }}>ITEM-0135</span>
                <span style={{ fontFamily: FONT_MONO, fontSize: 8, letterSpacing: '0.14em', fontWeight: 600, color: COLORS.red, padding: '1px 5px', borderRadius: 3, background: COLORS.redSoft }}>CRITICAL</span>
              </div>
              <div style={{ fontSize: 12, fontWeight: 500, color: COLORS.ink, lineHeight: 1.35, letterSpacing: '-0.005em', marginBottom: 4 }}>Fire Alarm Integration with Sprinkler Heads</div>
            </div>
          )}

          {/* ActionCardMock — Copilot suggested action floats next to the landed card */}
          {actionCard > 0 && (
            <div style={{
              position: 'absolute', left: colXs[3] + 12, top: 320,
              opacity: actionCard,
              transform: `scale(${0.9 + 0.1 * actionCard})`,
              transformOrigin: 'left top',
              zIndex: 7,
            }}>
              <ActionCardMock
                title="Suggested action"
                body="Move ITEM-0119 to BLOCKED — Awaiting RFI reply on water heater load letter"
                approveLabel="Approve"
                rejectLabel="Reject"
              />
            </div>
          )}
        </div>
      </div>

      {showCursor && <Cursor x={cursorX} y={cursorY} click={false} />}

      <Caption
        subLabel="DESKTOP · KANBAN BOARD"
        headline={
          localTime < 5.5
            ? 'Every item, every status, one place.'
            : 'Move it to Blocked — Copilot tags the reason.'
        }
        x={60} y={640}
      />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — Copilot chat: surfaces overdue follow-ups, drafts chase, destructive-tier confirm
// ═══════════════════════════════════════════════════════════════════════════

function SceneChat() {
  const { localTime } = useSprite();

  const messages = [
    { role: 'user', text: 'What follow-ups am I overdue on this week?' },
    { role: 'ai',   text: 'You have 4 emails sent 5+ days ago without reply: bid clarification to Mechanical sub (Apr 18), submittal-50 redline to architect (Apr 19), MTA demo-drawing approval ping (Apr 20), and RU-04 ceiling RFI to GC (Apr 21).' },
    { role: 'user', text: 'Draft the MTA chase, polite but firm.' },
    { role: 'ai',   text: 'Drafted. Subject: "Demo Drawing Approval — Status Check." Body references the Apr 14 submission, flags downstream impact on demolition kickoff, asks for ETA by Friday COB. Ready to send?' },
  ];

  // staggered fade-in per turn
  const turnAnims = [
    animate({ from: 0, to: 1, start: 0.4, end: 1.0, ease: Easing.easeOutCubic })(localTime),
    animate({ from: 0, to: 1, start: 1.6, end: 2.4, ease: Easing.easeOutCubic })(localTime),
    animate({ from: 0, to: 1, start: 3.0, end: 3.6, ease: Easing.easeOutCubic })(localTime),
    animate({ from: 0, to: 1, start: 4.2, end: 5.0, ease: Easing.easeOutCubic })(localTime),
  ];
  const destructive = animate({ from: 0, to: 1, start: 5.4, end: 6.2, ease: Easing.easeOutCubic })(localTime);
  const safeInline  = animate({ from: 0, to: 1, start: 6.4, end: 7.0, ease: Easing.easeOutCubic })(localTime);

  // cursor hovers over destructive card (no click — destructive requires typed SEND)
  const cursorX = interpolate([0, 6.5, 7.4, 8], [700, 700, 1080, 1080], Easing.easeInOutCubic)(localTime);
  const cursorY = interpolate([0, 6.5, 7.4, 8], [400, 400, 540, 540], Easing.easeInOutCubic)(localTime);
  const showCursor = localTime > 6.4;
  const click = false;

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: COLORS.paper,
      fontFamily: FONT_UI,
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: COLORS.paper,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* title bar */}
        <div style={{
          height: 38, borderBottom: `1px solid ${COLORS.line}`,
          display: 'flex', alignItems: 'center', padding: '0 16px',
          background: COLORS.paperWarm, gap: 8,
        }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#E8634F' }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#E8B53F' }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#5BA85E' }} />
          </div>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 12, color: COLORS.mute, fontFamily: FONT_MONO, letterSpacing: '0.06em' }}>
            CPM Copilot — Chat · Midtown Transit Hub — Concourse Retail Refresh
          </div>
        </div>

        <div style={{ flex: 1, display: 'flex' }}>
          {/* Conversations sidebar */}
          <div style={{ width: 220, borderRight: `1px solid ${COLORS.line}`, padding: '14px 10px', background: COLORS.paperWarm }}>
            <div style={{
              padding: '8px 12px', background: COLORS.orange, color: '#fff',
              fontSize: 12, fontWeight: 600, borderRadius: 6,
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12,
            }}>+ New conversation</div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.mute, marginBottom: 8, paddingLeft: 8 }}>Today</div>
            {[
              { l: 'Overdue follow-ups — this week', a: true },
              { l: 'Weather risk — Tuesday', a: false },
              { l: 'OAC week 14 prep', a: false },
            ].map((c, i) => (
              <div key={i} style={{
                padding: '7px 10px', borderRadius: 5, fontSize: 12,
                color: c.a ? COLORS.ink : COLORS.inkSoft,
                background: c.a ? '#fff' : 'transparent',
                fontWeight: c.a ? 500 : 400, marginBottom: 2,
                border: c.a ? `1px solid ${COLORS.line}` : '1px solid transparent',
              }}>{c.l}</div>
            ))}
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.mute, margin: '16px 0 8px', paddingLeft: 8 }}>Yesterday</div>
            {['Punch list — Lvl 2', 'Submittals review', 'Owner change order #7'].map((l, i) => (
              <div key={i} style={{ padding: '6px 10px', fontSize: 12, color: COLORS.inkSoft }}>{l}</div>
            ))}
          </div>

          {/* Chat thread */}
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative' }}>
            <div style={{
              padding: '14px 28px', borderBottom: `1px solid ${COLORS.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.01em' }}>Overdue follow-ups — this week</div>
                <div style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO, marginTop: 2 }}>CONTEXT · 4 emails · 5+ days no reply</div>
              </div>
              <div style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO }}>Claude Sonnet 4.5</div>
            </div>

            <div style={{ flex: 1, padding: '20px 28px', overflow: 'hidden' }}>
              {messages.map((m, i) => {
                const t = turnAnims[i];
                if (t <= 0) return null;
                if (m.role === 'user') {
                  return (
                    <div key={i} style={{
                      opacity: t, transform: `translateY(${(1 - t) * 8}px)`,
                      marginLeft: 'auto', maxWidth: 480, marginBottom: 14,
                    }}>
                      <div style={{
                        background: COLORS.ink, color: COLORS.paper,
                        padding: '10px 14px', borderRadius: '14px 14px 4px 14px',
                        fontSize: 13, lineHeight: 1.45,
                      }}>{m.text}</div>
                    </div>
                  );
                }
                return (
                  <div key={i} style={{
                    opacity: t, transform: `translateY(${(1 - t) * 8}px)`,
                    marginBottom: 14,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <div style={{ width: 24, height: 24, borderRadius: 12, background: COLORS.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: '#fff', fontWeight: 700 }}>◆</div>
                      <div style={{ fontSize: 12, fontWeight: 600, color: COLORS.ink }}>Copilot</div>
                    </div>
                    <div style={{ fontSize: 13, color: COLORS.inkSoft, lineHeight: 1.5, paddingLeft: 32, maxWidth: 620 }}>
                      {m.text}
                    </div>
                  </div>
                );
              })}

              {/* Real destructive-tier approval card (typed-SEND confirm) */}
              {destructive > 0 && (
                <div style={{
                  opacity: destructive, transform: `translateY(${(1 - destructive) * 12}px)`,
                  marginLeft: 32, marginBottom: 12,
                }}>
                  <DestructiveActionCard
                    banner="Email send — confirm to proceed"
                    recipient="mta-coordination@..."
                    subject='Demo Drawing Approval — Status Check'
                    confirmText="SEND"
                  />
                </div>
              )}

              {/* Real safe-tier inline confirmation (auto-executed, no approval needed) */}
              {safeInline > 0 && (
                <div style={{
                  opacity: safeInline, transform: `translateY(${(1 - safeInline) * 8}px)`,
                  marginLeft: 32, marginTop: 6,
                }}>
                  <SafeActionInline
                    label="Created ITEM-0148 — Follow up on MTA approval"
                    href="#"
                  />
                </div>
              )}
            </div>

            {/* composer */}
            <div style={{
              padding: '14px 28px', borderTop: `1px solid ${COLORS.line}`,
              background: COLORS.paperWarm,
            }}>
              <div style={{
                background: '#fff', border: `1px solid ${COLORS.line}`, borderRadius: 8,
                padding: '10px 14px', fontSize: 12, color: COLORS.mute,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span>Ask anything about Midtown Transit Hub…</span>
                <span style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.06em' }}>↵</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {showCursor && <Cursor x={cursorX} y={cursorY} click={click} />}

      <Caption
        subLabel={localTime < 3 ? "DESKTOP · COPILOT CHAT" : "DESKTOP · DRAFT & CONFIRM"}
        headline={
          localTime < 3
            ? 'Find my overdue follow-ups.'
            : 'Copilot drafts the chase. You confirm before send.'
        }
        x={60} y={640}
      />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 6 — Two surfaces side-by-side
// ═══════════════════════════════════════════════════════════════════════════

function SceneTwoSurfaces() {
  const { localTime } = useSprite();

  const desk = animate({ from: 0, to: 1, start: 0.2, end: 1.4, ease: Easing.easeOutCubic })(localTime);
  const phone = animate({ from: 0, to: 1, start: 0.7, end: 1.9, ease: Easing.easeOutCubic })(localTime);
  const sync1 = animate({ from: 0, to: 1, start: 2.4, end: 3.2, ease: Easing.easeOutCubic })(localTime);
  const sync2 = animate({ from: 0, to: 1, start: 3.8, end: 4.6, ease: Easing.easeOutCubic })(localTime);
  const close = animate({ from: 0, to: 1, start: 5.2, end: 6.2, ease: Easing.easeOutCubic })(localTime);

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${COLORS.paper} 0%, ${COLORS.paperWarm} 100%)`,
      fontFamily: FONT_UI,
    }}>

      {/* sub-label */}
      <div style={{
        position: 'absolute', top: 40, left: 60,
        fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em',
        color: COLORS.mute, textTransform: 'uppercase',
      }}>Scene 06 / 06 · Two surfaces, one project</div>

      {/* Desktop window */}
      <div style={{
        position: 'absolute', left: 80, top: 90,
        width: 720, height: 460,
        opacity: desk, transform: `translateY(${(1 - desk) * 16}px)`,
      }}>
        <div style={{
          width: '100%', height: '100%',
          background: COLORS.paper, borderRadius: 10,
          border: `1px solid ${COLORS.line}`,
          boxShadow: '0 30px 60px rgba(31,27,22,0.18)',
          overflow: 'hidden',
        }}>
          <div style={{ height: 32, borderBottom: `1px solid ${COLORS.line}`, display: 'flex', alignItems: 'center', padding: '0 12px', background: COLORS.paperWarm, gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#E8634F' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#E8B53F' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#5BA85E' }} />
            <div style={{ flex: 1, textAlign: 'center', fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO }}>Midtown Transit Hub · Board</div>
          </div>
          <div style={{ padding: 16, display: 'flex', gap: 8 }}>
            {[
              { label: 'Open', color: COLORS.mute, n: 8 },
              { label: 'In Progress', color: COLORS.amber, n: 14 },
              { label: 'Blocked', color: COLORS.red, n: 3, highlight: true },
              { label: 'Resolved', color: COLORS.green, n: 22 },
            ].map((c, i) => (
              <div key={i} style={{
                flex: 1, background: c.highlight ? '#fff' : COLORS.paperWarm,
                border: c.highlight ? `2px solid ${COLORS.orange}` : `1px solid ${COLORS.line}`,
                borderRadius: 6, padding: 10, minHeight: 320,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 3, background: c.color }} />
                  <span style={{ fontSize: 10, fontWeight: 600, color: COLORS.ink, fontFamily: FONT_MONO, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.label}</span>
                  <span style={{ fontSize: 10, color: COLORS.mute, fontFamily: FONT_MONO, marginLeft: 'auto' }}>{c.n}</span>
                </div>
                {c.highlight && (
                  <div style={{ background: '#fff', border: `1px solid ${COLORS.orange}`, borderRadius: 4, padding: '8px 8px', marginBottom: 6, position: 'relative' }}>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 8, color: COLORS.mute, marginBottom: 2 }}>ITEM-0135</div>
                    <div style={{ fontSize: 11, fontWeight: 500, color: COLORS.ink, lineHeight: 1.3 }}>Fire Alarm Integration with Sprinkler Heads</div>
                    <div style={{ marginTop: 4, padding: '2px 5px', background: COLORS.redSoft, color: COLORS.red, fontSize: 8, fontFamily: FONT_MONO, letterSpacing: '0.06em', borderRadius: 2, fontWeight: 600, display: 'inline-block' }}>⚠ Awaiting MEP coordination</div>
                    {/* sync pulse */}
                    {sync1 > 0 && sync1 < 1 && (
                      <div style={{
                        position: 'absolute', inset: -2, border: `2px solid ${COLORS.orange}`,
                        borderRadius: 6, opacity: 1 - sync1, transform: `scale(${1 + sync1 * 0.1})`,
                        pointerEvents: 'none',
                      }} />
                    )}
                  </div>
                )}
                {!c.highlight && [0, 1, 2].map(k => (
                  <div key={k} style={{
                    background: '#fff', border: `1px solid ${COLORS.line}`,
                    borderRadius: 4, padding: '6px 8px', marginBottom: 5,
                    height: 36,
                  }}>
                    <div style={{ height: 4, background: COLORS.line, borderRadius: 2, marginBottom: 4, width: '70%' }} />
                    <div style={{ height: 3, background: COLORS.lineSoft, borderRadius: 2, width: '50%' }} />
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Phone */}
      <div style={{
        position: 'absolute', left: 870, top: 90,
        opacity: phone, transform: `translateY(${(1 - phone) * 16}px)`,
      }}>
        <div style={{
          width: 280, height: 560,
          background: '#0a0a0a', borderRadius: 36, padding: 9,
          boxShadow: '0 30px 60px rgba(31,27,22,0.25)',
        }}>
          <div style={{ width: '100%', height: '100%', background: COLORS.paper, borderRadius: 28, overflow: 'hidden', position: 'relative' }}>
            <div style={{ position: 'absolute', left: '50%', top: 6, transform: 'translateX(-50%)', width: 80, height: 22, background: '#0a0a0a', borderRadius: 11, zIndex: 10 }} />
            <div style={{ paddingTop: 36, padding: '36px 14px 14px' }}>
              <div style={{ fontSize: 9, color: COLORS.mute, fontFamily: FONT_MONO, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Midtown Transit Hub · Live</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.02em', marginTop: 2, marginBottom: 12 }}>Blocked · 3</div>
              <div style={{
                background: '#fff', border: `1px solid ${COLORS.line}`,
                borderLeft: `3px solid ${COLORS.red}`,
                borderRadius: 6, padding: '10px 10px', marginBottom: 8,
                position: 'relative',
              }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 8, color: COLORS.mute, marginBottom: 3 }}>ITEM-0135 · BLOCKED</div>
                <div style={{ fontSize: 11, fontWeight: 600, color: COLORS.ink, lineHeight: 1.3, marginBottom: 4 }}>Fire Alarm Integration with Sprinkler Heads</div>
                <div style={{ display: 'inline-block', padding: '2px 5px', background: COLORS.redSoft, color: COLORS.red, fontSize: 8, fontFamily: FONT_MONO, letterSpacing: '0.06em', borderRadius: 2, fontWeight: 600 }}>⚠ Awaiting MEP coordination</div>
                {sync2 > 0 && sync2 < 1 && (
                  <div style={{
                    position: 'absolute', inset: -2, border: `2px solid ${COLORS.orange}`,
                    borderRadius: 8, opacity: 1 - sync2, transform: `scale(${1 + sync2 * 0.1})`,
                  }} />
                )}
              </div>
              {[
                { id: 'ITEM-0190', t: 'MEP rough-in Lvl 3 — duct clash' },
                { id: 'ITEM-0177', t: 'Owner change order #7 sign-off' },
              ].map((c, i) => (
                <div key={i} style={{ background: '#fff', border: `1px solid ${COLORS.line}`, borderRadius: 6, padding: '8px 10px', marginBottom: 6 }}>
                  <div style={{ fontFamily: FONT_MONO, fontSize: 8, color: COLORS.mute, marginBottom: 3 }}>{c.id}</div>
                  <div style={{ fontSize: 11, fontWeight: 500, color: COLORS.ink, lineHeight: 1.3 }}>{c.t}</div>
                </div>
              ))}

              {/* Field button */}
              <div style={{
                marginTop: 12, padding: '10px 12px',
                background: COLORS.orange, color: '#fff',
                borderRadius: 6, fontSize: 11, fontWeight: 600, textAlign: 'center',
              }}>+ Log a daily note</div>
            </div>
          </div>
        </div>
      </div>

      {/* sync indicator between */}
      {(sync1 > 0 || sync2 > 0) && (
        <div style={{
          position: 'absolute', left: 802, top: 280, width: 70, textAlign: 'center',
          opacity: Math.max(sync1, sync2),
        }}>
          <svg width="70" height="20" viewBox="0 0 70 20">
            <line x1="0" y1="10" x2="70" y2="10" stroke={COLORS.orange} strokeWidth="2" strokeDasharray="3 3" />
            <circle cx="35" cy="10" r="4" fill={COLORS.orange} />
          </svg>
          <div style={{ fontFamily: FONT_MONO, fontSize: 9, color: COLORS.orange, letterSpacing: '0.14em', marginTop: 4, fontWeight: 600 }}>SYNCED</div>
        </div>
      )}

      {/* Closing caption — matches Scene 3/4/5 caption position (x=60, y=640) */}
      <div style={{
        opacity: close, transform: `translateY(${(1 - close) * 12}px)`,
      }}>
        <Caption
          subLabel="BUILT FOR THE OFFICE · BUILT FOR THE FIELD"
          headline={<>Nothing falls through the cracks. <span style={{ color: COLORS.orange }}>CPM Copilot.</span></>}
          x={60} y={640}
        />
        <div style={{
          position: 'absolute', left: 60, top: 700,
          fontFamily: FONT_MONO, fontSize: 13, color: COLORS.mute,
          letterSpacing: '0.04em', opacity: 0.7,
        }}>
          cpmcopilot.com
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SceneKanban, SceneChat, SceneTwoSurfaces,
});