// Act 3 — Chat · schedule · references (0:30 – 0:55)

// ── Scene 07: Chat opens in-app (30-40s, 10s — paced, not hanging)
function Scene07() {
  const { localTime } = useSprite();

  // Bubbles appear at 1.8, 3.8, 6.5; calendar at 7.3
  const bubbles = [
    { side: 'right', text: 'Hi Ragna — loved your profile. 30-min chat next week?', t: 1.8 },
    { side: 'left',  text: 'Tuesday or Thursday PM both work.',                     t: 3.8 },
    { side: 'right', text: 'Perfect. Invite coming through.',                        t: 6.5 },
  ];
  const showTyping = (start, end) => localTime > start && localTime < end;

  // ── Composer ────────────────────────────────────────────────────────
  const composerSteps = [
    { text: bubbles[0].text, typeStart: 0.6, sendAt: 1.8 },  // message 1
    { text: bubbles[2].text, typeStart: 5.4, sendAt: 6.5 },  // message 3
  ];
  let composerText = '';
  let composerActive = false;
  for (const s of composerSteps) {
    if (localTime >= s.typeStart && localTime < s.sendAt) {
      const p = (localTime - s.typeStart) / (s.sendAt - s.typeStart);
      composerText = s.text.slice(0, Math.ceil(p * s.text.length));
      composerActive = true;
      break;
    }
  }
  const caretOn = Math.floor(localTime * 2.5) % 2 === 0;

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#ebe7dc' }}>
      <AppWindow active="Chat" width={1760} height={900} x={80} y={40}>
        <div style={{ display: 'flex', height: '100%' }}>
          {/* Sidebar */}
          <div style={{
            width: 320, background: '#fff',
            borderRight: '1px solid rgba(0,0,0,0.08)',
            padding: '20px 14px',
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: WP.textDim, letterSpacing: '1.5px', textTransform: 'uppercase', padding: '0 10px', marginBottom: 12 }}>Conversations</div>
            {[
              { c: CANDIDATES[0], active: true, unread: 1 },
              { c: CANDIDATES[1], active: false, unread: 0 },
              { c: CANDIDATES[2], active: false, unread: 0 },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'flex', gap: 12, alignItems: 'center',
                padding: '10px 12px', borderRadius: 8, marginBottom: 4,
                background: row.active ? WP.brandLighter : 'transparent',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: row.active ? WP.brand : WP.brandLighter,
                  color: row.active ? '#fff' : WP.brand,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 12,
                }}>{row.c.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: WP.ink }}>{row.c.name}</div>
                  <div style={{ fontSize: 12, color: WP.textDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Tuesday or Thursday…</div>
                </div>
                {row.unread > 0 && (
                  <div style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: WP.brand, color: '#fff',
                    fontSize: 10, fontWeight: 700,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{row.unread}</div>
                )}
              </div>
            ))}
          </div>

          {/* Chat pane */}
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            {/* Chat header */}
            <div style={{
              padding: '18px 28px', borderBottom: '1px solid rgba(0,0,0,0.08)',
              display: 'flex', alignItems: 'center', gap: 14, background: '#fff',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: WP.brandLighter, color: WP.brand,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700,
              }}>RE</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: WP.ink }}>Ragna Eiríksdóttir</div>
                <div style={{ fontSize: 12, color: WP.green }}>● Online now</div>
              </div>
              <Pill kind="brand" size="md">94% MATCH</Pill>
            </div>

            {/* Messages */}
            <div style={{
              flex: 1, padding: '24px 40px', display: 'flex',
              flexDirection: 'column', gap: 12, justifyContent: 'flex-end',
              background: '#fafaf5',
            }}>
              {bubbles.map((b, i) => {
                const t = clamp((localTime - b.t) / 0.35, 0, 1);
                if (t <= 0) return null;
                const isRight = b.side === 'right';
                return (
                  <div key={i} style={{
                    display: 'flex', justifyContent: isRight ? 'flex-end' : 'flex-start',
                    opacity: t,
                    transform: `translateY(${(1 - t) * 12}px) scale(${0.9 + 0.1 * t})`,
                  }}>
                    <div style={{
                      background: isRight ? WP.brand : '#fff',
                      color: isRight ? '#fff' : WP.ink,
                      padding: '14px 20px', borderRadius: 18,
                      [isRight ? 'borderBottomRightRadius' : 'borderBottomLeftRadius']: 4,
                      fontSize: 16, fontWeight: 500, maxWidth: 520, lineHeight: 1.4,
                      boxShadow: isRight ? '0 2px 6px -2px rgba(82,49,255,0.35)' : '0 1px 2px rgba(0,0,0,0.06)',
                      border: isRight ? 'none' : '1px solid rgba(0,0,0,0.06)',
                    }}>{b.text}</div>
                  </div>
                );
              })}

              {/* Typing indicator before bubble 2 */}
              {showTyping(2.5, 3.8) && (
                <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                  <div style={{
                    background: '#fff', borderRadius: 18, padding: '12px 16px',
                    display: 'flex', gap: 4, border: '1px solid rgba(0,0,0,0.06)',
                  }}>
                    {[0,1,2].map(i => (
                      <div key={i} style={{
                        width: 8, height: 8, borderRadius: '50%', background: WP.textDim,
                        opacity: (Math.sin(localTime * 6 + i) + 1) / 2,
                      }} />
                    ))}
                  </div>
                </div>
              )}

              {/* Calendar card */}
              {localTime > 7.3 && (() => {
                const t = clamp((localTime - 7.3) / 0.5, 0, 1);
                return (
                  <div style={{
                    alignSelf: 'center',
                    background: WP.brandLighter,
                    border: `1px solid rgba(82,49,255,0.2)`,
                    borderRadius: 14, padding: '18px 24px',
                    display: 'flex', gap: 16, alignItems: 'center',
                    opacity: t, transform: `translateY(${(1-t) * 16}px)`,
                    minWidth: 440,
                  }}>
                    <div style={{
                      width: 52, height: 52, borderRadius: 10,
                      background: WP.brand, color: '#fff',
                      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700,
                    }}>
                      <div style={{ fontSize: 9, letterSpacing: '1px' }}>TUE</div>
                      <div style={{ fontSize: 22, lineHeight: 1 }}>12</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 17, fontWeight: 700, color: WP.ink }}>Tue · 14:00 — video interview</div>
                      <div style={{ fontSize: 13, color: WP.textDim, marginTop: 2 }}>30 min · both calendars synced</div>
                    </div>
                    <div style={{
                      marginLeft: 'auto',
                      background: WP.brand, color: '#fff',
                      padding: '8px 16px', borderRadius: 8,
                      fontSize: 13, fontWeight: 700, letterSpacing: '0.5px',
                    }}>CONFIRMED</div>
                  </div>
                );
              })()}
            </div>

            {/* Composer / message input */}
            <div style={{
              padding: '14px 28px 18px',
              borderTop: '1px solid rgba(0,0,0,0.06)',
              background: '#fff',
              position: 'relative',
            }}>
              {/* Smart suggestions — calendar invite chips above the input */}
              {(() => {
                // Show suggestions after Ragna replies (~4.3s) until the calendar card is sent (~7.3s)
                const showS = clamp((localTime - 4.3) / 0.25, 0, 1);
                const hideS = clamp((7.3 - localTime) / 0.25, 0, 1);
                const sOp = Math.min(showS, hideS);
                if (sOp <= 0) return null;
                // Highlight the selected chip (Tue 14:00) from ~6.7s onward
                const picked = localTime > 6.7;
                const slots = [
                  { d: 'Tue', t: '14:00', highlight: true },
                  { d: 'Tue', t: '16:30' },
                  { d: 'Thu', t: '15:00' },
                ];
                return (
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    marginBottom: 12,
                    opacity: sOp,
                    transform: `translateY(${(1 - sOp) * 6}px)`,
                  }}>
                    <div style={{
                      fontSize: 11, fontWeight: 700,
                      color: WP.textDim, letterSpacing: '1.5px', textTransform: 'uppercase',
                      marginRight: 4,
                    }}>Suggest</div>
                    {slots.map((s, i) => {
                      const isPicked = picked && s.highlight;
                      return (
                        <div key={i} style={{
                          display: 'inline-flex', alignItems: 'center', gap: 8,
                          padding: '8px 12px',
                          background: isPicked ? WP.brand : WP.brandLighter,
                          color: isPicked ? '#fff' : WP.brand,
                          border: `1px solid ${isPicked ? WP.brand : 'rgba(82,49,255,0.25)'}`,
                          borderRadius: 999,
                          fontSize: 13, fontWeight: 600,
                          transform: isPicked ? 'scale(1.04)' : 'scale(1)',
                          transition: 'transform 160ms, background 160ms',
                          boxShadow: isPicked ? '0 4px 10px -2px rgba(82,49,237,0.4)' : 'none',
                        }}>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
                            <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2"/>
                            <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                          </svg>
                          <span style={{ fontWeight: 700 }}>{s.d}</span>
                          <span style={{ opacity: 0.85 }}>· {s.t}</span>
                        </div>
                      );
                    })}
                  </div>
                );
              })()}

              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                flex: 1,
                background: '#f3f1ea',
                border: `1px solid ${composerActive ? WP.brand : 'rgba(0,0,0,0.08)'}`,
                boxShadow: composerActive ? `0 0 0 3px ${WP.brandLighter}` : 'none',
                borderRadius: 10,
                padding: '12px 16px',
                fontSize: 15, fontWeight: 500,
                color: composerText ? WP.ink : WP.textDim,
                minHeight: 22, lineHeight: '22px',
                transition: 'border-color 120ms, box-shadow 120ms',
              }}>
                {composerText || 'Type a message…'}
                {composerActive && (
                  <span style={{
                    display: 'inline-block',
                    width: 2, height: 18, verticalAlign: -3, marginLeft: 2,
                    background: WP.brand,
                    opacity: caretOn ? 1 : 0,
                  }} />
                )}
              </div>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: composerText ? WP.brand : '#ece8df',
                color: composerText ? '#fff' : WP.textDim,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, fontWeight: 700,
                transition: 'background 120ms',
              }}>↑</div>
              </div>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>
  );
}

// ── Scene 07b: Batch invite-all to interview ─────────────────────────────
function Scene07b() {
  const { localTime } = useSprite();

  const inCol = CANDIDATES.slice(0, 5); // Ragna, Snorri, Vera, Þorbjörg, Hrafn
  const btnRef = React.useRef(null);
  const bodyRef = React.useRef(null);
  const [btnPos, setBtnPos] = React.useState({ x: 600, y: 120 });

  React.useLayoutEffect(() => {
    if (btnRef.current && bodyRef.current) {
      const p = offsetWithin(btnRef.current, bodyRef.current);
      setBtnPos({ x: p.x + p.w * 0.5, y: p.y + p.h * 0.5 });
    }
  }, [localTime > 0.2]);

  // Cursor: fades in, lands on "Invite all" button at 1.4s, presses at 1.6s
  const cursorX = interpolate([0, 1.4, 1.8], [btnPos.x + 180, btnPos.x, btnPos.x], Easing.easeOutCubic)(localTime);
  const cursorY = interpolate([0, 1.4, 1.8], [btnPos.y + 120, btnPos.y, btnPos.y], Easing.easeOutCubic)(localTime);
  const cursorOpacity = clamp((localTime - 0.3) / 0.35, 0, 1);
  const pressed = localTime > 1.6 && localTime < 1.85;
  const rippleT = clamp((localTime - 1.6) / 0.55, 0, 1);

  // Ragna (index 0) is already invited from the chat scene — others flip on click
  const invitedAt = [-1, 1.95, 2.12, 2.30, 2.48];

  // Confirmation toast slides in at 2.9s ("4 more invites sent")
  const toastT = clamp((localTime - 2.9) / 0.35, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#ebe7dc' }}>
      <AppWindow active="Matches" width={1760} height={900} x={80} y={40} title="Match board">
        <div ref={bodyRef} style={{
          padding: '16px 28px 28px',
          height: '100%', boxSizing: 'border-box',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
          position: 'relative',
        }}>
          <Column title="Reviewing" fg={WP.colReviewFg} bg={WP.colReview} count={2}>
            {CANDIDATES.slice(5, 7).map(c => (
              <div key={c.initials} style={{
                background: '#fff', border: '1px solid rgba(0,0,0,0.08)',
                borderRadius: 10, padding: '10px 12px',
                display: 'flex', alignItems: 'center', gap: 10,
                boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
                opacity: 0.75,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: WP.brandLighter, color: WP.brand,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 11, flexShrink: 0,
                }}>{c.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: WP.ink }}>{c.name}</div>
                  <div style={{ fontSize: 10, color: WP.textDim, letterSpacing: '0.5px' }}>{c.pct}% MATCH</div>
                </div>
              </div>
            ))}
          </Column>

          <Column title="Interviewing" fg={WP.colInterviewFg} bg={WP.colInterview} count={5}>
            {/* Invite-all action at the top of the column */}
            <div ref={btnRef} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              padding: '10px 12px', borderRadius: 8,
              background: localTime > 1.6 ? WP.brand : WP.brandLighter,
              color: localTime > 1.6 ? '#fff' : WP.brand,
              border: `1px dashed ${WP.brand}`,
              fontSize: 12, fontWeight: 800, letterSpacing: '0.5px', textTransform: 'uppercase',
              transform: pressed ? 'scale(0.98)' : 'scale(1)',
              transition: 'background 140ms, color 140ms, transform 120ms',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2"/>
                <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
              Invite all to interview
            </div>

            {inCol.map((c, i) => {
              const invited = localTime > invitedAt[i];
              const flipT = clamp((localTime - invitedAt[i]) / 0.25, 0, 1);
              // Tiny scale pulse on flip
              const pulse = 1 + Math.sin(flipT * Math.PI) * 0.03;
              return (
                <div key={c.initials} style={{
                  background: '#fff',
                  border: `1px solid ${invited ? 'rgba(82,49,255,0.3)' : 'rgba(0,0,0,0.08)'}`,
                  borderRadius: 10, padding: '10px 12px',
                  display: 'flex', alignItems: 'center', gap: 10,
                  boxShadow: invited
                    ? '0 4px 12px -6px rgba(82,49,255,0.25)'
                    : '0 1px 2px rgba(0,0,0,0.04)',
                  transform: `scale(${pulse})`,
                  transition: 'border-color 200ms, box-shadow 200ms',
                }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: WP.brandLighter, color: WP.brand,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 700, fontSize: 11, flexShrink: 0,
                  }}>{c.initials}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: WP.ink }}>{c.name}</div>
                    <div style={{ fontSize: 10, color: WP.textDim, letterSpacing: '0.5px' }}>{c.pct}% MATCH</div>
                  </div>
                  {invited ? (
                    i === 0 ? (
                      <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                        padding: '4px 10px', borderRadius: 999,
                        background: '#e7f7ea', color: '#2c7a3e',
                        fontSize: 10, fontWeight: 800, letterSpacing: '0.5px',
                      }}>
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        ALREADY INVITED
                      </div>
                    ) : (
                      <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 4,
                        padding: '4px 10px', borderRadius: 999,
                        background: WP.brandLighter, color: WP.brand,
                        fontSize: 10, fontWeight: 800, letterSpacing: '0.5px',
                        opacity: flipT,
                      }}>
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        INVITED
                      </div>
                    )
                  ) : (
                    <div style={{
                      width: 14, height: 14, borderRadius: '50%',
                      border: '2px solid rgba(0,0,0,0.15)',
                    }} />
                  )}
                </div>
              );
            })}
          </Column>

          <Column title="Hiring" fg={WP.colHiringFg} bg={WP.colHiring} count={0}><EmptyGhost /></Column>
          <Column title="Other"  fg={WP.colOtherFg}  bg={WP.colOther}  count={0}><EmptyGhost /></Column>

          <ClickRipple x={cursorX + 4} y={cursorY + 4} t={rippleT} />
          <Cursor x={cursorX} y={cursorY} rotate={-8} pressed={pressed} style={{ opacity: cursorOpacity }} />

          {/* Confirmation toast */}
          {toastT > 0 && (
            <div style={{
              position: 'absolute', bottom: 32, left: '50%',
              transform: `translate(-50%, ${(1 - toastT) * 16}px)`,
              opacity: toastT,
              background: WP.ink, color: '#fff',
              padding: '14px 22px', borderRadius: 12,
              boxShadow: '0 14px 28px -10px rgba(0,0,0,0.4)',
              display: 'inline-flex', alignItems: 'center', gap: 12,
              fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap',
              zIndex: 60,
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M5 12.5l4.5 4.5L19 7.5" stroke={WP.green} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              4 more invites sent
            </div>
          )}
        </div>
      </AppWindow>
    </div>
  );
}

// ── Scene 08: Interview confirmed (35-40s) ──────────────────────────────
function Scene08() {
  const { localTime } = useSprite();
  // Zoom-in on card
  const zoom = interpolate([0, 0.6], [0.95, 1])(Easing.easeOutCubic(clamp(localTime / 0.6, 0, 1)));

  // Avatar bob
  const bob = Math.sin(localTime * 2) * 3;

  // Digit flip for "Tue · 14:00" — starts typing the moment the card appears
  const full = 'Tue · 14:00';
  const revealed = Math.floor(clamp(localTime / 1.2, 0, 1) * full.length);
  const shown = full.slice(0, Math.max(1, revealed));

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#ebe7dc' }}>
      <AppWindow active="Chat" width={1760} height={900} x={80} y={40}>
        <div style={{
          height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 40,
        }}>
          <div style={{
            background: '#fff', borderRadius: 20,
            padding: '48px 72px', textAlign: 'center',
            border: '1px solid rgba(0,0,0,0.06)',
            boxShadow: '0 20px 60px -20px rgba(82,49,255,0.25)',
            transform: `scale(${zoom})`,
            minWidth: 640,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 24, right: 28,
            }}>
              <Pill kind="green" size="md">● CONFIRMED</Pill>
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: WP.textDim, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 18 }}>
              Scheduled
            </div>

            <div style={{
              fontSize: 96, fontWeight: 700, color: WP.brand,
              letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
            }}>{shown}<span style={{ opacity: revealed < full.length ? 1 : 0 }}>|</span></div>

            <div style={{ fontSize: 17, color: WP.textDim, marginTop: 14, marginBottom: 36 }}>
              30-minute video interview · Thursday 12 June
            </div>

            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', alignItems: 'center' }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: WP.brandLighter, color: WP.brand,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 16,
                transform: `translateY(${bob}px)`,
              }}>RE</div>
              <div style={{ fontSize: 22, color: WP.textDim, fontWeight: 300 }}>×</div>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: WP.brand, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800, fontSize: 16,
                transform: `translateY(${-bob}px)`,
              }}>FL</div>
            </div>
            <div style={{ fontSize: 13, color: WP.textDim, marginTop: 12 }}>
              Ragna  ·  Fjörður Labs (you)
            </div>
          </div>
        </div>
      </AppWindow>
    </div>
  );
}

// ── Scene 09: References come in (40-45s) ──────────────────────────────
function Scene09() {
  const { localTime } = useSprite();

  const refs = [
    {
      initials: 'ÞB',
      name: 'Þorbjörg Bjarnadóttir',
      role: 'Former engineering manager · Marel',
      doneAt: 1.3,
      rating: 5,
      quote: '"Led the sonar DSP rewrite — on time, under budget. Senior-level judgement on tricky hardware."',
      tags: ['Would hire again', 'Ships on deadline'],
    },
    {
      initials: 'HG',
      name: 'Hrafn Guðmundsson',
      role: 'Colleague · CCP Games',
      doneAt: 3.3,
      rating: 5,
      quote: '"Rare combo — deep Rust skill and the patience to mentor juniors through their first firmware bug."',
      tags: ['Great mentor', 'Strong fundamentals'],
    },
    {
      initials: 'KS',
      name: 'Kári Stefánsson',
      role: 'CTO · previous role',
      doneAt: 5.3,
      rating: 5,
      quote: '"We shipped three hardware generations together. She owns problems end-to-end, never hand-waves."',
      tags: ['Owns outcomes', 'Technical rigour'],
    },
  ];

  // Determine which reference is currently expanded (the most recent DONE).
  // It collapses when the next one lands; the last one stays open until the scene ends.
  let expandedIdx = -1;
  for (let i = 0; i < refs.length; i++) {
    if (localTime >= refs[i].doneAt) expandedIdx = i;
  }

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#ebe7dc' }}>
      <AppWindow active="Matches" width={1760} height={900} x={80} y={40}
        title="References"
        right={<Pill kind="green" size="lg">● 3 OF 3</Pill>}>
        <div style={{ padding: '20px 40px', height: '100%', boxSizing: 'border-box' }}>
          <div style={{ fontSize: 15, color: WP.textDim, marginBottom: 20 }}>
            References travel with the Talent — already verified by Opus Futura.
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {refs.map((r, i) => {
              const isDone = localTime > r.doneAt;
              const flipT = clamp((localTime - r.doneAt) / 0.3, 0, 1);
              const glow = flipT > 0 && flipT < 1 ? `0 0 0 ${(1 - flipT) * 14}px rgba(82,185,99,0.22)` : 'none';

              // Expanded when this ref is the latest one flipped.
              const expanded = i === expandedIdx;
              // Each ref has its own expansion timeline: expand at doneAt + 0.2,
              // collapse when the NEXT ref lands (or stay open for the last one).
              const openAt = r.doneAt + 0.15;
              const closeAt = refs[i + 1] ? refs[i + 1].doneAt + 0.1 : Infinity;
              const expandT = clamp((localTime - openAt) / 0.35, 0, 1);
              const collapseT = closeAt !== Infinity ? clamp((localTime - closeAt) / 0.25, 0, 1) : 0;
              const openness = Math.max(0, expandT - collapseT);
              return (
                <div key={i} style={{
                  background: '#fff',
                  border: `1px solid ${expanded ? 'rgba(82,49,255,0.25)' : 'rgba(0,0,0,0.08)'}`,
                  borderRadius: 12,
                  boxShadow: expanded
                    ? '0 8px 24px -10px rgba(82,49,255,0.18)'
                    : '0 1px 2px rgba(0,0,0,0.03)',
                  overflow: 'hidden',
                  transition: 'border-color 200ms, box-shadow 200ms',
                }}>
                  {/* Header row */}
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 18,
                    padding: '18px 22px',
                  }}>
                    <div style={{
                      width: 48, height: 48, borderRadius: '50%',
                      background: WP.brandLighter, color: WP.brand,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700, fontSize: 15,
                    }}>{r.initials}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 17, fontWeight: 700, color: WP.ink }}>{r.name}</div>
                      <div style={{ fontSize: 13, color: WP.textDim, marginTop: 2 }}>{r.role}</div>
                    </div>
                    <div style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      padding: '10px 18px', borderRadius: 999,
                      background: isDone ? '#e7f7ea' : '#fff6e1',
                      color: isDone ? '#2c7a3e' : '#b77d01',
                      fontSize: 13, fontWeight: 800, letterSpacing: '0.5px',
                      boxShadow: glow, transition: 'box-shadow 200ms',
                    }}>
                      {isDone ? (
                        <>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="#2c7a3e" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          DONE
                        </>
                      ) : 'PENDING'}
                    </div>
                  </div>

                  {/* Expanded feedback — quote, stars, tags */}
                  <div style={{
                    maxHeight: openness * 170,
                    opacity: openness,
                    transition: 'max-height 250ms ease, opacity 200ms ease',
                    overflow: 'hidden',
                  }}>
                    <div style={{
                      padding: '0 22px 20px 88px',
                      borderTop: '1px solid rgba(0,0,0,0.05)',
                      paddingTop: 14,
                    }}>
                      <div style={{
                        fontSize: 14, color: WP.ink, fontStyle: 'italic',
                        lineHeight: 1.5, marginBottom: 12,
                      }}>{r.quote}</div>

                      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                        <div style={{ display: 'inline-flex', gap: 2 }}>
                          {Array.from({ length: 5 }).map((_, s) => (
                            <svg key={s} width="16" height="16" viewBox="0 0 24 24" fill={s < r.rating ? '#ffc107' : 'rgba(0,0,0,0.12)'}>
                              <path d="M12 2l2.9 6.9L22 10l-5.5 4.7L18.2 22 12 18.3 5.8 22l1.7-7.3L2 10l7.1-1.1L12 2z" />
                            </svg>
                          ))}
                        </div>
                        {r.tags.map((t, j) => (
                          <span key={j} style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            padding: '5px 12px',
                            background: WP.brandLighter, color: WP.brand,
                            borderRadius: 999, fontSize: 12, fontWeight: 700,
                            letterSpacing: '0.3px',
                          }}>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                              <path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                            </svg>
                            {t}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </AppWindow>
    </div>
  );
}

Object.assign(window, { Scene07, Scene07b, Scene08, Scene09 });