// scenes.jsx — six scenes for the CPM Copilot demo video
// Each scene is its own component, mounted via <Sprite start end> in index.html

// Production HSL tokens from frontend/src/styles/new/index.css:67-74
// hsl(25 82% 54%) -> #E8872F  (brand)
// 0 0% 100%       -> #FFFFFF  (bg-primary)
// 0 0% 5%         -> #0D0D0D  (text-high)
const COLORS = {
  paper: '#FFFFFF',
  paperWarm: '#EFEAE0',
  ink: '#0D0D0D',
  inkSoft: '#4A433A',
  mute: '#8B8275',
  line: '#E2DCCF',
  lineSoft: '#EDE7DA',
  orange: '#E8872F',
  orangeSoft: '#FCEBD8',
  green: '#3F7D4E',
  greenSoft: '#E0EDDF',
  red: '#B5432B',
  redSoft: '#F4DDD3',
  amber: '#B58410',
  amberSoft: '#F4E6C2',
  blue: '#2F5D7A',
  blueSoft: '#DDE7EE',
};

const FONT_UI = "'Inter', system-ui, sans-serif";
const FONT_MONO = "'JetBrains Mono', ui-monospace, monospace";

// ── small utility components ────────────────────────────────────────────────

function Caption({ subLabel, headline, x = 60, y = 540, w = 760, color = COLORS.ink }) {
  const { progress, duration, localTime } = useSprite();
  const exitStart = Math.max(0, duration - 0.4);
  let opacity = 1, ty = 0;
  if (localTime < 0.5) {
    const t = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
    opacity = t; ty = (1 - t) * 12;
  } else if (localTime > exitStart) {
    const t = Easing.easeInCubic(clamp((localTime - exitStart) / 0.4, 0, 1));
    opacity = 1 - t;
  }
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width: w,
      opacity, transform: `translateY(${ty}px)`,
      fontFamily: FONT_UI,
    }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: COLORS.mute, marginBottom: 10,
        fontWeight: 500,
      }}>{subLabel}</div>
      <div style={{
        fontSize: 28, fontWeight: 500, color, lineHeight: 1.2,
        letterSpacing: '-0.015em',
      }}>{headline}</div>
    </div>
  );
}

function Cursor({ x, y, label, click = false }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-2px, -2px)',
      pointerEvents: 'none', zIndex: 1000,
      transition: 'left 600ms cubic-bezier(.4,.0,.2,1), top 600ms cubic-bezier(.4,.0,.2,1)',
    }}>
      {click && (
        <div style={{
          position: 'absolute', left: -16, top: -16, width: 36, height: 36,
          borderRadius: 18, border: `2px solid ${COLORS.orange}`,
          opacity: 0.6,
          animation: 'cursor-pulse 600ms ease-out',
        }} />
      )}
      <svg width="22" height="26" viewBox="0 0 22 26" style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))' }}>
        <path d="M2 2 L2 19 L7 15 L10 22 L13 21 L10 14 L17 14 Z"
          fill={COLORS.ink} stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" />
      </svg>
      {label && (
        <div style={{
          position: 'absolute', left: 22, top: 14,
          background: COLORS.ink, color: COLORS.paper,
          padding: '4px 10px', borderRadius: 4,
          fontFamily: FONT_UI, fontSize: 12, fontWeight: 500,
          whiteSpace: 'nowrap',
        }}>{label}</div>
      )}
    </div>
  );
}

function Spotlight({ x, y, w, h, padding = 12 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x - padding, top: y - padding,
      width: w + padding * 2, height: h + padding * 2,
      border: `2px solid ${COLORS.orange}`,
      borderRadius: 10,
      boxShadow: `0 0 0 9999px rgba(31, 27, 22, 0.32)`,
      pointerEvents: 'none', zIndex: 50,
      animation: 'spotlight-in 350ms ease-out',
    }} />
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — Intro
// ═══════════════════════════════════════════════════════════════════════════

function SceneIntro() {
  const { localTime, duration } = useSprite();
  const fade = animate({ from: 0, to: 1, start: 0.2, end: 1.2, ease: Easing.easeOutCubic });
  const fade2 = animate({ from: 0, to: 1, start: 0.8, end: 1.6, ease: Easing.easeOutCubic });
  const fade3 = animate({ from: 0, to: 1, start: 1.6, end: 2.4, ease: Easing.easeOutCubic });
  const exitT = animate({ from: 0, to: 1, start: duration - 0.4, end: duration, ease: Easing.easeInCubic });
  const exitOp = 1 - exitT(localTime);

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: COLORS.paper,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
      opacity: exitOp,
      fontFamily: FONT_UI,
    }}>

      {/* logo mark — Bracket Eye: second set of eyes */}
      <div style={{
        opacity: fade(localTime),
        transform: `translateY(${(1 - fade(localTime)) * 12}px)`,
        display: 'flex', alignItems: 'center', gap: 18, marginBottom: 36,
      }}>
        <svg width="72" height="72" viewBox="0 0 96 96" fill="none">
          <path d="M28 22 L18 22 L18 74 L28 74" stroke={COLORS.ink} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M68 22 L78 22 L78 74 L68 74" stroke={COLORS.ink} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="48" cy="48" r="10" fill={COLORS.orange}/>
        </svg>
        <div style={{
          fontSize: 56, fontWeight: 600, color: COLORS.ink,
          letterSpacing: '-0.025em',
        }}>
          CPM Copilot
        </div>
      </div>

      <div style={{
        opacity: fade2(localTime),
        transform: `translateY(${(1 - fade2(localTime)) * 8}px)`,
        marginBottom: 60, textAlign: 'center',
      }}>
        <div style={{
          fontSize: 28, color: COLORS.ink, fontWeight: 500,
          letterSpacing: '-0.015em', lineHeight: 1.2,
        }}>
          Nothing falls through the cracks on your project.
        </div>
        <div style={{
          fontSize: 18, color: COLORS.inkSoft, fontWeight: 400,
          letterSpacing: '-0.005em', marginTop: 10,
        }}>
          You run the project. It watches your back.
        </div>
      </div>

      <div style={{
        opacity: fade3(localTime),
        display: 'flex', gap: 32,
        fontFamily: FONT_MONO, fontSize: 12, color: COLORS.mute,
        letterSpacing: '0.16em', textTransform: 'uppercase',
      }}>
        <span>Board</span>
        <span style={{ color: COLORS.line }}>·</span>
        <span>Email</span>
        <span style={{ color: COLORS.line }}>·</span>
        <span>Chat</span>
        <span style={{ color: COLORS.line }}>·</span>
        <span>Field</span>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — Morning brief on mobile
// ═══════════════════════════════════════════════════════════════════════════

function PhoneFrame({ children, scale = 1, x = 0, y = 0 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: 360 * scale, height: 740 * scale,
      transform: `scale(${1})`,
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: '#0a0a0a',
        borderRadius: 48 * scale,
        padding: 12 * scale,
        boxShadow: '0 40px 80px rgba(0,0,0,0.35), 0 12px 24px rgba(0,0,0,0.2)',
        position: 'relative',
      }}>
        <div style={{
          width: '100%', height: '100%',
          background: COLORS.paper,
          borderRadius: 36 * scale,
          overflow: 'hidden',
          position: 'relative',
        }}>
          {/* notch */}
          <div style={{
            position: 'absolute', left: '50%', top: 8 * scale, transform: 'translateX(-50%)',
            width: 110 * scale, height: 28 * scale,
            background: '#0a0a0a', borderRadius: 14 * scale,
            zIndex: 100,
          }} />
          {/* status bar */}
          <div style={{
            position: 'absolute', top: 14 * scale, left: 24 * scale, right: 24 * scale,
            display: 'flex', justifyContent: 'space-between',
            fontFamily: FONT_UI, fontSize: 13 * scale, fontWeight: 600, color: COLORS.ink,
            zIndex: 99,
          }}>
            <span>7:14</span>
            <span style={{ display: 'flex', gap: 4 * scale, alignItems: 'center' }}>
              <span style={{ fontSize: 11 * scale, fontFamily: FONT_MONO }}>5G</span>
              <span style={{ width: 18 * scale, height: 9 * scale, border: `1px solid ${COLORS.ink}`, borderRadius: 2, position: 'relative' }}>
                <span style={{ position: 'absolute', inset: 1, background: COLORS.ink, width: '70%' }} />
              </span>
            </span>
          </div>
          <div style={{ paddingTop: 50 * scale, height: '100%' }}>{children}</div>
        </div>
      </div>
    </div>
  );
}

function BriefingNarrative({ children }) {
  return (
    <div style={{
      background: '#FFFFFF',
      border: '1px solid rgba(0,0,0,0.08)',
      borderRadius: 10,
      padding: 12,
      fontSize: 12,
      lineHeight: 1.45,
      color: '#0D0D0D',
      fontStyle: 'italic',
    }}>
      {children}
    </div>
  );
}

function SceneMobileBrief() {
  const { localTime } = useSprite();
  const narr = animate({ from: 0, to: 1, start: 0.4, end: 1.1, ease: Easing.easeOutCubic });
  const item1 = animate({ from: 0, to: 1, start: 0.9, end: 1.6, ease: Easing.easeOutCubic });
  const item2 = animate({ from: 0, to: 1, start: 1.3, end: 2.0, ease: Easing.easeOutCubic });
  const item3 = animate({ from: 0, to: 1, start: 1.7, end: 2.4, ease: Easing.easeOutCubic });
  const item4 = animate({ from: 0, to: 1, start: 2.1, end: 2.8, ease: Easing.easeOutCubic });

  const cursorX = interpolate(
    [0, 4.5, 5.5, 7],
    [620, 620, 460, 360],
    Easing.easeInOutCubic
  )(localTime);
  const cursorY = interpolate(
    [0, 4.5, 5.5, 7],
    [340, 340, 320, 320],
    Easing.easeInOutCubic
  )(localTime);

  const cards = [
    { anim: item1, label: 'Open items',          value: '18',           tone: 'brand' },
    { anim: item2, label: 'Completed yesterday', value: '1',            tone: 'default' },
    { anim: item3, label: 'Risks — silent follow-ups',  value: '4',            tone: 'warn',    sublabel: '5+ days no reply' },
    { anim: item4, label: "Today's deadline",    value: 'MTA approval', tone: 'default', sublabel: 'EOD Friday' },
  ];

  const toneStyle = (tone) => {
    if (tone === 'brand') return { valueColor: COLORS.orange, bg: COLORS.orangeSoft, border: COLORS.orange };
    if (tone === 'warn')  return { valueColor: COLORS.amber,  bg: COLORS.amberSoft,  border: COLORS.amber };
    return { valueColor: COLORS.ink, bg: '#fff', border: COLORS.line };
  };

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${COLORS.paper} 0%, ${COLORS.paperWarm} 100%)`,
      fontFamily: FONT_UI,
    }}>
      <PhoneFrame x={460} y={20} scale={0.92}>
        <div style={{ padding: '8px 20px 0', height: '100%', overflow: 'hidden' }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
            <div>
              <div style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Tuesday · Apr 28</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.02em', marginTop: 2 }}>Good morning, Marcus</div>
            </div>
            <div style={{
              width: 36, height: 36, borderRadius: 18,
              background: COLORS.orangeSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONT_MONO, fontWeight: 600, color: COLORS.orange, fontSize: 13,
            }}>MR</div>
          </div>

          {/* Briefing narrative — mirrors real BriefingPopup shape */}
          <div style={{
            marginTop: 16,
            opacity: narr(localTime),
            transform: `translateY(${(1 - narr(localTime)) * 12}px)`,
          }}>
            <div style={{ fontSize: 10, fontFamily: FONT_MONO, letterSpacing: '0.16em', textTransform: 'uppercase', color: COLORS.orange, fontWeight: 600, marginBottom: 6 }}>
              ◆ Overnight digest
            </div>
            <BriefingNarrative>
              Good morning team. 18 open items with 1 completed yesterday — today must be highly
              productive. Push the Electrical &amp; Fire Alarm RFP bid tracking across all 9 contractors
              and secure transit authority approval on demo drawings before end of week.
            </BriefingNarrative>
          </div>

          {/* Stat cards */}
          <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {cards.map((c, i) => {
              const a = c.anim(localTime);
              const ts = toneStyle(c.tone);
              return (
                <div key={i} style={{
                  opacity: a, transform: `translateY(${(1 - a) * 16}px)`,
                  background: ts.bg,
                  border: `1px solid ${ts.border}`,
                  borderRadius: 8, padding: '10px 12px',
                  minHeight: 64,
                }}>
                  <div style={{
                    fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.12em',
                    textTransform: 'uppercase', color: COLORS.mute, fontWeight: 600, marginBottom: 4,
                  }}>{c.label}</div>
                  <div style={{
                    fontSize: 18, fontWeight: 600, color: ts.valueColor,
                    lineHeight: 1.15, letterSpacing: '-0.015em',
                  }}>{c.value}</div>
                  {c.sublabel && (
                    <div style={{ fontSize: 10, color: COLORS.inkSoft, marginTop: 3, lineHeight: 1.3 }}>
                      {c.sublabel}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </PhoneFrame>

      {/* Cursor highlighting RFI card around 5s */}
      {localTime > 4.4 && localTime < 6.4 && (
        <Cursor x={cursorX} y={cursorY} click={localTime > 5.4 && localTime < 5.7} />
      )}

      <Caption
        subLabel="MOBILE · MORNING BRIEF"
        headline={
          localTime < 4.5
            ? 'Commitments due. Risks emerging.'
            : 'Three risks. One tap to act.'
        }
        x={60} y={300} w={400}
      />

      <div style={{
        position: 'absolute', left: 60, top: 80,
        fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em',
        color: COLORS.mute, textTransform: 'uppercase',
      }}>
        Scene 02 / 06
      </div>
      <div style={{
        position: 'absolute', left: 60, top: 110,
        fontSize: 52, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.025em',
        lineHeight: 1, maxWidth: 380,
      }}>
        What needs<br />your attention<br />today.
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — Inbox triage
// ═══════════════════════════════════════════════════════════════════════════

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

  const aiPanel = animate({ from: 0, to: 1, start: 1.5, end: 2.4, ease: Easing.easeOutCubic });
  const action1 = animate({ from: 0, to: 1, start: 2.4, end: 3.0, ease: Easing.easeOutCubic });
  const action2 = animate({ from: 0, to: 1, start: 2.8, end: 3.4, ease: Easing.easeOutCubic });
  const action3 = animate({ from: 0, to: 1, start: 3.2, end: 3.8, ease: Easing.easeOutCubic });
  const linkPulse = animate({ from: 0, to: 1, start: 6.5, end: 7.2, ease: Easing.easeOutCubic });
  const linkConfirm = animate({ from: 0, to: 1, start: 7.5, end: 8.3, ease: Easing.easeOutBack });

  // cursor: rest → AI panel → approve button
  const cursorX = interpolate([0, 1, 5, 6.5, 7.4, 8], [900, 900, 980, 980, 980, 980], Easing.easeInOutCubic)(localTime);
  const cursorY = interpolate([0, 1, 5, 6.5, 7.4, 8], [380, 380, 380, 510, 510, 510], Easing.easeInOutCubic)(localTime);
  const showCursor = localTime > 0.8;
  const click = localTime > 7.2 && localTime < 7.5;

  const emails = [
    { from: 'Diana Ortiz', co: 'Mechanical Sub',     sub: '[MTH-CRR] [RFP] Electrical and Fire Alarm', preview: 'Submitting our bid package for the Electrical and Fire Alarm scope…', time: '7:02 AM', unread: true, selected: true, urgent: true },
    { from: 'Rafael Chen', co: 'Demo Contractor',    sub: '[RFP] [Demolition] [MTH] Coffee Bar, Pizza Counter & Kiosks', preview: 'Pricing attached for demolition of the three retail areas…', time: '6:48 AM', unread: true },
    { from: 'Owner — Midtown Transit Hub', co: 'Architect of Record', sub: 'RE: Submittal 50 — Interior Office Buildout', preview: 'Reviewed and returned with comments. Please coordinate…', time: '6:22 AM', unread: false },
    { from: 'Tomás Vega', co: 'Plumbing Sub',        sub: '[MTH-CRR] [RFP] Plumbing and Sprinkler', preview: 'Bid package attached. Includes sprinkler design-build option…', time: 'Yesterday', unread: true },
    { from: 'Erin Walsh', co: 'MEP Engineer',        sub: 'Coordination clash — ductwork vs structural', preview: 'Clash detection found 3 conflicts on Level 3…', time: 'Yesterday', unread: false },
    { from: 'PCO Inspector', co: 'City',             sub: 'Inspection scheduled — fire stopping', preview: 'Confirmed for Thursday 9 AM. Please ensure…', time: 'Yesterday', unread: false },
  ];

  return (
    <div className="new-design" style={{
      position: 'absolute', inset: 0,
      background: COLORS.paper,
      fontFamily: FONT_UI,
    }}>
      {/* Window */}
      <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 — Inbox · Midtown Transit Hub — Concourse Retail Refresh
          </div>
        </div>

        {/* layout: nav | list | reading pane */}
        <div style={{ flex: 1, display: 'flex' }}>
          {/* Sidebar */}
          <div style={{ width: 200, borderRight: `1px solid ${COLORS.line}`, padding: '16px 12px', background: COLORS.paperWarm }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.mute, marginBottom: 12, paddingLeft: 8 }}>
              Inbox
            </div>
            {[
              { l: 'Triage', n: 12, active: true },
              { l: 'RFIs', n: 7 },
              { l: 'Submittals', n: 4 },
              { l: 'Change orders', n: 2 },
              { l: 'Daily logs', n: 0 },
              { l: 'Done', n: '' },
            ].map((it, i) => (
              <div key={i} style={{
                padding: '7px 10px', borderRadius: 6,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13, color: it.active ? COLORS.ink : COLORS.inkSoft,
                background: it.active ? '#fff' : 'transparent',
                fontWeight: it.active ? 600 : 400,
                marginBottom: 2,
                border: it.active ? `1px solid ${COLORS.line}` : '1px solid transparent',
              }}>
                <span>{it.l}</span>
                {it.n !== '' && <span style={{
                  fontFamily: FONT_MONO, fontSize: 11,
                  color: it.active ? COLORS.orange : COLORS.mute,
                  fontWeight: 500,
                }}>{it.n}</span>}
              </div>
            ))}

            <div style={{ marginTop: 24, fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.mute, marginBottom: 12, paddingLeft: 8 }}>
              Projects
            </div>
            {['Midtown Transit Hub', 'Cedar Lofts', 'Crescent Office'].map((p, i) => (
              <div key={i} style={{
                padding: '6px 10px', fontSize: 12, color: i === 0 ? COLORS.ink : COLORS.inkSoft,
                fontWeight: i === 0 ? 600 : 400,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: i === 0 ? COLORS.orange : COLORS.line }} />
                {p}
              </div>
            ))}
          </div>

          {/* Email list */}
          <div style={{ width: 380, borderRight: `1px solid ${COLORS.line}`, overflow: 'hidden' }}>
            <div style={{ padding: '14px 16px', borderBottom: `1px solid ${COLORS.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: COLORS.ink }}>Triage <span style={{ color: COLORS.mute, fontWeight: 400 }}>· 12 unread</span></div>
              <div style={{ fontSize: 11, fontFamily: FONT_MONO, color: COLORS.mute }}>SORT: URGENCY</div>
            </div>
            {emails.map((e, i) => (
              <div key={i} style={{
                padding: '12px 16px',
                borderBottom: `1px solid ${COLORS.lineSoft}`,
                background: e.selected ? COLORS.orangeSoft : 'transparent',
                borderLeft: e.selected ? `3px solid ${COLORS.orange}` : '3px solid transparent',
                position: 'relative',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span style={{ fontSize: 13, fontWeight: e.unread ? 600 : 400, color: COLORS.ink }}>
                    {e.from}
                    {e.co && <span style={{ color: COLORS.mute, fontWeight: 400 }}> · {e.co}</span>}
                  </span>
                  <span style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO }}>{e.time}</span>
                </div>
                <div style={{ fontSize: 12, color: COLORS.ink, fontWeight: e.unread ? 600 : 400, marginBottom: 2, letterSpacing: '-0.005em' }}>
                  {e.urgent && <span style={{
                    display: 'inline-block', fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.14em',
                    color: COLORS.red, background: COLORS.redSoft, padding: '1px 5px', borderRadius: 3,
                    marginRight: 6, fontWeight: 600, verticalAlign: 'middle',
                  }}>RFP</span>}
                  {e.sub}
                </div>
                <div style={{ fontSize: 11, color: COLORS.mute, lineHeight: 1.4 }}>{e.preview}</div>
              </div>
            ))}
          </div>

          {/* Reading pane */}
          <div style={{ flex: 1, padding: '20px 28px', overflow: 'hidden', position: 'relative' }}>
            <div style={{ fontSize: 18, fontWeight: 600, color: COLORS.ink, letterSpacing: '-0.015em', marginBottom: 6 }}>
              [MTH-CRR] [RFP] Electrical and Fire Alarm
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <div style={{ width: 32, height: 32, borderRadius: 16, background: COLORS.blueSoft, color: COLORS.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>DO</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: COLORS.ink }}>Diana Ortiz <span style={{ fontWeight: 400, color: COLORS.mute }}>· Mechanical Sub</span></div>
                <div style={{ fontSize: 11, color: COLORS.mute, fontFamily: FONT_MONO }}>diana.ortiz@mechsub.com · 7:02 AM</div>
              </div>
            </div>
            <div style={{ fontSize: 13, color: COLORS.inkSoft, lineHeight: 1.6, maxWidth: 540 }}>
              Marcus —<br /><br />
              Submitting our bid package for the Electrical and Fire Alarm scope on the Concourse Retail Refresh. Lump sum is broken out per the bid leveling form you sent last week. Note our pricing assumes the unit price format you confirmed <span style={{ color: COLORS.ink, fontWeight: 500 }}>Wednesday</span>; please confirm same format with the other 8 subs <span style={{ color: COLORS.ink, fontWeight: 500 }}>by Friday</span> so we can level apples-to-apples.<br /><br />
              Please advise.
            </div>

            {/* AI Panel */}
            {aiPanel(localTime) > 0 && (
              <div style={{
                position: 'absolute', right: 24, top: 70,
                width: 270,
                opacity: aiPanel(localTime),
                transform: `translateY(${(1 - aiPanel(localTime)) * 12}px)`,
                background: '#fff',
                border: `1px solid ${COLORS.line}`,
                borderTop: `3px solid ${COLORS.orange}`,
                borderRadius: 8,
                padding: '14px 14px',
                boxShadow: '0 12px 28px rgba(31,27,22,0.10)',
              }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: COLORS.orange, fontWeight: 600, marginBottom: 10 }}>
                  ◆ Caught in this thread
                </div>
                <div className="receipt-strip" style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
                  background: COLORS.paperWarm,
                  border: `1px solid ${COLORS.lineSoft}`,
                  borderRadius: 4,
                  padding: '5px 8px',
                  marginBottom: 10,
                  fontSize: 11, color: COLORS.inkSoft, fontFamily: FONT_MONO,
                  letterSpacing: '-0.005em',
                }}>
                  <span>Diana Ortiz · 2:14 PM · linked to ITEM-0142</span>
                  <span className="paper-trail-pill" style={{
                    fontSize: 9, fontWeight: 600, letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                    color: COLORS.orange, background: COLORS.orangeSoft,
                    padding: '2px 6px', borderRadius: 3,
                    whiteSpace: 'nowrap',
                  }}>paper trail</span>
                </div>
                {[
                  { a: action1, label: 'Action', v: 'Confirm bid leveling format with all 9 subs', due: 'Due Fri' },
                  { a: action2, label: 'Action', v: 'Compare unit pricing across mechanical bids', due: 'Due Wed' },
                  { a: action3, label: 'Link', v: 'Link to ITEM-0142', due: 'Electrical & Fire Alarm RFP' },
                ].map((it, i) => (
                  <div key={i} style={{
                    opacity: it.a(localTime),
                    transform: `translateX(${(1 - it.a(localTime)) * 8}px)`,
                    padding: '8px 0',
                    borderBottom: i < 2 ? `1px solid ${COLORS.lineSoft}` : 'none',
                  }}>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: COLORS.mute, fontWeight: 600, marginBottom: 3 }}>{it.label}</div>
                    <div style={{ fontSize: 12, color: COLORS.ink, fontWeight: 500, lineHeight: 1.35, letterSpacing: '-0.005em' }}>{it.v}</div>
                    <div style={{ fontSize: 10, color: COLORS.mute, marginTop: 2, fontFamily: FONT_MONO }}>{it.due}</div>
                  </div>
                ))}

                {/* Approve button */}
                <div style={{
                  marginTop: 12, padding: '9px 12px',
                  background: linkConfirm(localTime) > 0.05 ? COLORS.green : COLORS.ink,
                  color: '#fff',
                  borderRadius: 6,
                  fontSize: 12, fontWeight: 600,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                  transition: 'background 300ms',
                  transform: `scale(${1 + linkPulse(localTime) * 0.02})`,
                }}>
                  {linkConfirm(localTime) > 0.05 ? '✓ Linked to ITEM-0142' : 'Approve & link to board'}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

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

      <Caption
        subLabel="DESKTOP · INBOX TRIAGE"
        headline={
          localTime < 5
            ? 'Copilot reads the email. Pulls the actions out.'
            : 'One click links it to the right board item.'
        }
        x={60} y={640}
      />
    </div>
  );
}

Object.assign(window, {
  COLORS, FONT_UI, FONT_MONO,
  Caption, Cursor, Spotlight, PhoneFrame, BriefingNarrative,
  SceneIntro, SceneMobileBrief, SceneInbox,
});