// koryo-scenes-a.jsx — Scenes 1-4 (admin side of the demo)

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1: LANDING PAGE (0-7s)
// ═══════════════════════════════════════════════════════════════════════════
function SceneLanding() {
  const { localTime, duration } = useSprite();
  // 4 cards stagger in, slow Ken-Burns out
  const cardIn = (i) => {
    const start = 1.6 + i * 0.18;
    return Easing.easeOutCubic(clamp((localTime - start) / 0.5, 0, 1));
  };
  // logo entry
  const logoIn = Easing.easeOutCubic(clamp(localTime / 0.7, 0, 1));
  // gentle camera push-in at the end
  const camScale = 1 + Math.max(0, (localTime - 4.5) / (duration - 4.5)) * 0.05;

  return (
    <SceneFade>
      <KoryoApp active="home">
        <div style={{
          position: 'absolute', inset: 0,
          transform: `scale(${camScale})`, transformOrigin: 'center center',
          transition: 'transform 0.05s linear',
        }}>
          <div style={{
            position: 'absolute', left: '50%', top: 90,
            transform: `translateX(-50%) translateY(${(1 - logoIn) * 14}px)`,
            opacity: logoIn,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            <KoryoAppIcon size={76}/>
            <div style={{
              marginTop: 18, fontSize: 44, fontWeight: 800,
              letterSpacing: '-0.03em', color: KORYO.ink,
            }}>Koryo</div>
            <div style={{
              marginTop: 8, fontSize: 12, letterSpacing: '0.32em',
              color: KORYO.inkSoft, fontWeight: 600,
            }}>EMPLOYEE EXPERIENCE</div>
          </div>

          {/* 4-card grid */}
          <div style={{
            position: 'absolute',
            left: 320, right: 60, top: 320, bottom: 80,
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gridTemplateRows: '1fr 1fr',
            gap: 18,
          }}>
            {[
              { icon: 'users', title: 'Users', body: 'Sync your messaging-app members, organize them into teams and assign roles for segmented analysis.' },
              { icon: 'cards', title: 'Surveys', body: 'Create pulse surveys from a validated question bank, schedule them, and send directly to your team via DM.' },
              { icon: 'results', title: 'Results', body: 'Visualize engagement scores by category and subcategory, track trends over time and export data.' },
              { icon: 'settings', title: 'Settings', body: 'Manage your billing, customize your workspace theme, background pattern and toggle between light and dark mode.' },
            ].map((c, i) => (
              <div key={i} style={{
                background: '#fff',
                borderRadius: 14,
                padding: '22px 24px 24px',
                boxShadow: '0 1px 0 rgba(15,18,40,0.04), 0 8px 32px -16px rgba(15,18,40,0.18)',
                opacity: cardIn(i),
                transform: `translateY(${(1 - cardIn(i)) * 18}px)`,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              }}>
                <div>
                  <div style={{
                    width: 40, height: 40, borderRadius: 9,
                    background: KORYO.indigoSoft,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 28,
                  }}>
                    <NavIcon kind={c.icon} size={20} color={KORYO.indigo}/>
                  </div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: KORYO.ink, marginBottom: 8 }}>{c.title}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.5, color: KORYO.inkSoft, maxWidth: 320 }}>{c.body}</div>
                </div>
                <div style={{ fontSize: 18, color: KORYO.indigo, marginTop: 14 }}>→</div>
              </div>
            ))}
          </div>
        </div>
      </KoryoApp>
      <Caption kicker="01 · KORYO" line="Run engagement surveys without leaving your team chat."/>
    </SceneFade>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2: USERS — sync from messaging app (7-18s = 11s)
// ═══════════════════════════════════════════════════════════════════════════
function SceneUsers() {
  const { localTime } = useSprite();

  // Layout coordinates (1920×1080 stage, sidebar 230 + browser 36 high):
  // Sync from Slack button sits at right edge of members panel header.
  const SYNC_X = 1790, SYNC_Y = 168;
  // Sam Park (row 1) Slack icon — we toggle this one to email
  const TOGGLE_X = 1438, TOGGLE_Y = 330;

  // Timing
  const tHoverSync = 1.4;
  const clickSyncAt = 2.2;
  const syncStart = 2.5;
  const tHoverToggle = 7.0;
  const clickToggleAt = 7.8;

  // Cursor: idle → Sync → wait while rows appear → move to Sam's Slack icon → click to switch
  const cursorPath = [
    { t: 0.02, x: 600,        y: 520 },
    { t: 0.13, x: SYNC_X,     y: SYNC_Y }, // hover Sync from Slack
    { t: 0.21, x: SYNC_X,     y: SYNC_Y }, // click
    { t: 0.55, x: SYNC_X - 80, y: SYNC_Y + 80 }, // drift while syncing
    { t: 0.62, x: TOGGLE_X,   y: TOGGLE_Y }, // move to Sam's slack icon
    { t: 0.72, x: TOGGLE_X,   y: TOGGLE_Y }, // click → switch to email
    { t: 0.95, x: TOGGLE_X + 20, y: TOGGLE_Y + 60 },
  ];

  const rowAt = (i) => Easing.easeOutCubic(clamp((localTime - (syncStart + 0.6 + i * 0.22)) / 0.4, 0, 1));
  const showRows = localTime > syncStart + 0.4;

  // After clickToggleAt, Sam's channel flips to email
  const samFlipped = localTime > clickToggleAt;

  const users = [
    { name: 'Alex Kim',     email: 'alex.kim@axonapps.io',     role: 'HR Admin', channel: 'msg' },
    { name: 'Sam Park',     email: 'sam.park@axonapps.io',     role: 'End User', channel: samFlipped ? 'email' : 'msg' },
    { name: 'Jordan Lee',   email: 'jordan.lee@axonapps.io',   role: 'End User', channel: 'msg' },
    { name: 'Riley Chen',   email: 'riley.chen@axonapps.io',   role: 'End User', channel: 'email' },
    { name: 'Morgan Hayes', email: 'morgan.hayes@axonapps.io', role: 'End User', channel: 'msg' },
    { name: 'Casey Diaz',   email: 'casey.diaz@axonapps.io',   role: 'End User', channel: 'msg' },
  ];

  // Spinner ring rotation
  const spin = (localTime * 360) % 360;

  return (
    <SceneFade>
      <KoryoApp active="users">
        <div style={{
          position: 'absolute', inset: 0,
          padding: '38px 48px',
          fontFamily: KORYO.font,
          color: KORYO.ink,
        }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: KORYO.indigoSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <NavIcon kind="users" size={20} color={KORYO.indigo}/>
            </div>
            <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em' }}>Users</div>
          </div>

          {/* Members panel */}
          <div style={{
            background: '#fff', borderRadius: 14, padding: 24,
            boxShadow: '0 1px 0 rgba(15,18,40,0.04), 0 6px 24px -14px rgba(15,18,40,0.16)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 18 }}>
              <div style={{ fontWeight: 800, fontSize: 18 }}>Workspace members</div>
              <div style={{ flex: 1 }}/>
              <div style={{ display: 'flex', gap: 10 }}>
                <Btn variant="ghost">Refresh</Btn>
                <Btn variant="outline">⬆ Import data ▾</Btn>
                <Btn variant="outline">+ Create user</Btn>
                <Btn variant="primary" highlight={localTime > 1.4 && localTime < 3.4}>
                  {showRows ? (
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
                      <span style={{
                        width: 14, height: 14, borderRadius: '50%',
                        border: `2px solid rgba(255,255,255,0.3)`,
                        borderTopColor: '#fff',
                        transform: `rotate(${spin}deg)`,
                      }}/>
                      Syncing…
                    </span>
                  ) : 'Sync from Slack'}
                </Btn>
              </div>
            </div>

            {/* Table */}
            <div style={{
              border: `1px solid ${KORYO.borderSoft}`,
              borderRadius: 10, overflow: 'hidden',
            }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1.2fr 1.7fr 0.8fr 0.9fr 1.1fr 0.6fr',
                background: '#fafaff',
                fontSize: 12.5, color: KORYO.inkSoft, fontWeight: 600,
                padding: '12px 18px',
                borderBottom: `1px solid ${KORYO.borderSoft}`,
              }}>
                <div>Name</div><div>Email</div><div>Job role</div><div>Access</div><div>Survey channel</div><div>Actions</div>
              </div>
              {users.map((u, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1.2fr 1.7fr 0.8fr 0.9fr 1.1fr 0.6fr',
                  padding: '14px 18px',
                  borderBottom: i < users.length - 1 ? `1px solid ${KORYO.borderSoft}` : 'none',
                  alignItems: 'center', fontSize: 13.5,
                  opacity: rowAt(i),
                  transform: `translateY(${(1 - rowAt(i)) * 6}px)`,
                  background: '#fff',
                }}>
                  <div style={{ fontWeight: 600, color: KORYO.ink }}>{u.name}</div>
                  <div style={{ color: KORYO.inkSoft }}>{u.email}</div>
                  <div style={{ color: KORYO.inkSoft }}>—</div>
                  <div>
                    {u.role === 'HR Admin' ? (
                      <span style={{ display: 'inline-block', padding: '2px 8px', background: KORYO.indigoSoft, color: KORYO.indigoText, fontSize: 12, fontWeight: 700, borderRadius: 4, whiteSpace: 'nowrap' }}>{u.role}</span>
                    ) : <span style={{ color: KORYO.inkSoft }}>{u.role}</span>}
                  </div>
                  <div>
                    {(() => {
                      const isMsg = u.channel === 'msg';
                      const isFlippingRow = i === 1; // Sam
                      const pulse = isFlippingRow && samFlipped && localTime < clickToggleAt + 0.6;
                      return (
                        <div style={{
                          display: 'inline-flex',
                          border: `1px solid ${KORYO.borderSoft}`,
                          borderRadius: 7,
                          padding: 2,
                          gap: 2,
                          background: '#fff',
                          boxShadow: pulse ? `0 0 0 3px ${KORYO.indigo}33` : 'none',
                          transition: 'box-shadow 0.2s',
                        }}>
                          <span title="Slack" style={{
                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                            width: 26, height: 24, borderRadius: 5,
                            background: isMsg ? KORYO.indigoSoft : 'transparent',
                          }}>
                            <SlackGlyph size={14} active={isMsg}/>
                          </span>
                          <span title="Email" style={{
                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                            width: 26, height: 24, borderRadius: 5,
                            background: !isMsg ? '#f1f1f6' : 'transparent',
                            color: !isMsg ? KORYO.ink : KORYO.inkMute,
                          }}>
                            <svg width="13" height="11" viewBox="0 0 16 12" fill="none">
                              <rect x="0.5" y="0.5" width="15" height="11" rx="1.5" stroke="currentColor"/>
                              <path d="M1 1.5 L8 7 L15 1.5" stroke="currentColor" fill="none" strokeLinecap="round"/>
                            </svg>
                          </span>
                        </div>
                      );
                    })()}
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <div style={{ width: 22, height: 22, borderRadius: 4, background: '#eef0fa', display: 'flex', alignItems: 'center', justifyContent: 'center', color: KORYO.indigoText, fontSize: 11 }}>✎</div>
                    <div style={{ width: 22, height: 22, borderRadius: 4, background: 'oklch(94% 0.04 25)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: KORYO.red, fontSize: 11 }}>🗑</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Member count */}
            <div style={{
              marginTop: 14,
              fontSize: 12, color: KORYO.inkSoft,
              opacity: rowAt(users.length - 1),
            }}>
              <span style={{ fontWeight: 700, color: KORYO.green }}>● {users.length} members</span> synced from Northwind
            </div>
          </div>

          {/* Groups */}
          <div style={{
            marginTop: 18,
            background: '#fff', borderRadius: 14, padding: '18px 24px',
            display: 'flex', alignItems: 'center',
            boxShadow: '0 1px 0 rgba(15,18,40,0.04), 0 6px 24px -14px rgba(15,18,40,0.16)',
            opacity: clamp((localTime - 5) / 0.6, 0, 1),
          }}>
            <div style={{ fontWeight: 800, fontSize: 16 }}>Groups</div>
            <div style={{ marginLeft: 18, display: 'flex', gap: 8 }}>
              {['Product','Design','Engineering'].map((g, i) => (
                <span key={i} style={{ padding: '4px 12px', background: KORYO.indigoSoft, color: KORYO.indigoText, fontSize: 12.5, fontWeight: 600, borderRadius: 999 }}>{g}</span>
              ))}
            </div>
            <div style={{ flex: 1 }}/>
            <Btn variant="outline-indigo">+ Create group</Btn>
          </div>
        </div>

        <Cursor path={cursorPath}/>
        <ClickPulse x={SYNC_X} y={SYNC_Y} at={clickSyncAt}/>
        <ClickPulse x={TOGGLE_X} y={TOGGLE_Y} at={clickToggleAt}/>
      </KoryoApp>
      <Caption kicker="02 · USERS" line="Sync from Slack, then pick how each person gets surveys — Slack or email."/>
    </SceneFade>
  );
}

// Button helper
function Btn({ children, variant = 'outline', highlight = false }) {
  const styles = {
    primary: {
      background: KORYO.ink, color: '#fff',
      border: `1px solid ${KORYO.ink}`,
    },
    outline: {
      background: '#fff', color: KORYO.ink,
      border: `1px solid ${KORYO.border}`,
    },
    'outline-indigo': {
      background: '#fff', color: KORYO.indigoText,
      border: `1.5px solid ${KORYO.indigo}`,
      fontWeight: 700,
    },
    ghost: {
      background: '#f4f4f9', color: KORYO.inkSoft,
      border: '1px solid transparent',
    },
  }[variant];
  return (
    <div style={{
      padding: '8px 14px', borderRadius: 7,
      fontSize: 13, fontWeight: 600,
      whiteSpace: 'nowrap',
      ...styles,
      boxShadow: highlight ? `0 0 0 3px ${KORYO.indigo}33` : 'none',
      transition: 'box-shadow 0.2s',
    }}>{children}</div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3: SURVEYS — build a survey with question bank + AI assist (18-32s = 14s)
// ═══════════════════════════════════════════════════════════════════════════
function SceneSurveys() {
  const { localTime } = useSprite();

  // Story (14s):
  //  0.0-0.8  arrive, cursor idle
  //  0.8-2.4  title typed
  //  2.4-3.0  cursor → Engagement bank header
  //  3.0      click → bank expands
  //  3.4-5.4  3 questions tick (subcategories shown)
  //  5.4-6.0  cursor → custom field
  //  6.0-7.4  custom text typed
  //  7.4-7.8  cursor → AI Suggest button
  //  7.8      click AI → spinner
  //  9.4-13.5 3 AI questions appear staggered with category + subcategory
  // Click coordinates in the 1920×1080 stage:
  const BANK_X = 950, BANK_Y = 428;
  const CUSTOM_X = 880, CUSTOM_Y = 746;
  const AI_X = 1790, AI_Y = 746;

  const title = "Q3 Pulse — Engagement & Wellbeing";
  const titleN = Math.floor(clamp((localTime - 0.8) / 1.6, 0, 1) * title.length);
  const titleText = title.slice(0, titleN);

  const clickBankAt = 3.0;
  const bankOpen = localTime > clickBankAt;
  const checks = [0, 1, 2].map((i) => localTime > 3.6 + i * 0.45);

  const custom = "Do you feel supported by your manager?";
  const customN = Math.floor(clamp((localTime - 6.0) / 1.3, 0, 1) * custom.length);
  const customText = custom.slice(0, customN);

  const clickAIAt = 7.8;
  const aiClicked = localTime > clickAIAt;
  const aiSpin = ((localTime - clickAIAt) * 360) % 360;
  const aiGenStart = 9.4;
  const aiShown = localTime > aiGenStart;
  const aiQuestionVis = [0, 1, 2].map((i) =>
    Easing.easeOutCubic(clamp((localTime - (aiGenStart + i * 0.4)) / 0.5, 0, 1)));

  // Cursor: idle → title → bank → custom → AI → linger
  const cursorPath = [
    { t: 0.01, x: 600, y: 280 },
    { t: 0.06, x: 720, y: 344 }, // hover title input (typing)
    { t: 0.18, x: 720, y: 344 },
    { t: 0.215, x: BANK_X, y: BANK_Y }, // bank header right at click time (3.0s ≈ 0.214)
    { t: 0.30, x: BANK_X + 40, y: BANK_Y + 80 }, // drift while checks happen
    { t: 0.42, x: CUSTOM_X, y: CUSTOM_Y }, // custom field at ~5.9s
    { t: 0.53, x: CUSTOM_X, y: CUSTOM_Y },
    { t: 0.557, x: AI_X, y: AI_Y }, // AI button at click time (7.8s = 0.557)
    { t: 0.66, x: AI_X - 30, y: AI_Y + 30 },
    { t: 0.78, x: 1100, y: 870 }, // hover one of generated questions
    { t: 1.0, x: 1100, y: 870 },
  ];

  // Question bank items with subcategories
  const engagementQs = [
    { q: 'I would recommend this company as a great place to work', sub: 'Engagement' },
    { q: 'I have the resources I need to do my job effectively',     sub: 'Resources' },
    { q: 'I see a clear path to grow my career here',                sub: 'Growth' },
  ];

  // AI-generated questions with category + subcategory
  const aiQuestions = [
    { q: 'On a scale of 1-10, how engaged do you feel in your current role?', cat: 'Engagement',         sub: 'Engagement' },
    { q: 'How well does your manager support your growth and development?',   cat: 'Manager Support',    sub: 'Coaching' },
    { q: 'How clear are your team\u2019s quarterly goals and priorities?',    cat: 'Transformation & Change', sub: 'Clarity' },
  ];

  return (
    <SceneFade>
      <KoryoApp active="surveys">
        <div style={{
          position: 'absolute', inset: 0,
          padding: '32px 48px 16px',
          overflow: 'hidden',
        }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: KORYO.indigoSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <NavIcon kind="cards" size={20} color={KORYO.indigo}/>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>Surveys</div>
              <div style={{ fontSize: 12.5, color: KORYO.inkSoft, marginTop: 2 }}>Manage and track your team surveys</div>
            </div>
            <div style={{ flex: 1 }}/>
            <Btn variant="ghost">✕ Cancel</Btn>
          </div>

          {/* Tab pills */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <div style={{ padding: '8px 22px', background: '#fff', borderRadius: 8, fontSize: 13.5, fontWeight: 700, boxShadow: '0 1px 4px rgba(15,18,40,0.06)' }}>Engagement</div>
            <div style={{ padding: '8px 22px', background: 'transparent', borderRadius: 8, fontSize: 13.5, fontWeight: 600, color: KORYO.inkSoft }}>Polls</div>
          </div>

          {/* Stats row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 16 }}>
            {[
              { v: 4, l: 'Surveys created', active: true },
              { v: 3, l: 'Sent to team', active: false },
              { v: 1, l: 'Drafts', active: false },
            ].map((s, i) => (
              <div key={i} style={{
                background: '#fff', borderRadius: 10, padding: '12px 18px',
                border: s.active ? `2px solid ${KORYO.indigo}` : '2px solid transparent',
                boxShadow: '0 1px 0 rgba(15,18,40,0.04)',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 7, background: KORYO.indigoSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <NavIcon kind="cards" size={16} color={KORYO.indigo}/>
                </div>
                <div>
                  <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1, color: s.active ? KORYO.indigoText : KORYO.ink }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: KORYO.inkSoft, marginTop: 2, whiteSpace: 'nowrap' }}>{s.l}</div>
                </div>
              </div>
            ))}
          </div>

          {/* New survey panel */}
          <div style={{
            background: '#fff', borderRadius: 14, padding: 22,
            boxShadow: '0 1px 0 rgba(15,18,40,0.04), 0 8px 28px -14px rgba(15,18,40,0.18)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}>
              <div style={{ fontWeight: 800, fontSize: 17 }}>New survey</div>
              <div style={{ flex: 1 }}/>
              <div style={{ width: 22, height: 22, color: KORYO.inkMute, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>×</div>
            </div>

            {/* Title input */}
            <div style={{
              border: `1px solid ${titleN > 0 ? KORYO.indigo : KORYO.border}`,
              borderRadius: 8, padding: '10px 14px',
              fontSize: 14, color: titleN > 0 ? KORYO.ink : KORYO.inkMute,
              marginBottom: 18,
              minHeight: 22,
              boxShadow: titleN > 0 ? `0 0 0 3px ${KORYO.indigo}1f` : 'none',
            }}>
              {titleText}{titleN > 0 && titleN < title.length && <span style={{ borderLeft: `1.5px solid ${KORYO.indigo}`, marginLeft: 1 }}/>}
              {titleN === 0 && 'Survey title'}
            </div>

            {/* Question bank */}
            <div style={{ fontSize: 11, color: KORYO.inkMute, fontWeight: 700, letterSpacing: '0.12em', marginBottom: 8 }}>QUESTION BANK</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
              {[
                { name: 'Engagement', n: '0/22', open: bankOpen },
                { name: 'Diversity & Inclusion', n: '0/7' },
                { name: 'Health & Wellbeing', n: '0/6' },
                { name: 'Transformation & Change', n: '0/5' },
              ].map((cat, i) => {
                const isOpen = i === 0 && bankOpen;
                const activeCount = isOpen ? checks.filter(Boolean).length : 0;
                return (
                  <div key={i}>
                    <div style={{
                      padding: '11px 16px',
                      border: `1px solid ${isOpen ? KORYO.indigo : KORYO.border}`,
                      background: isOpen ? KORYO.indigoSoft : '#fafaff',
                      borderRadius: 8,
                      display: 'flex', alignItems: 'center',
                      fontSize: 13.5, fontWeight: 600,
                      whiteSpace: 'nowrap',
                    }}>
                      <span>{cat.name}</span>
                      <div style={{ flex: 1 }}/>
                      <span style={{ color: isOpen ? KORYO.indigoText : KORYO.inkSoft, fontSize: 12.5, whiteSpace: 'nowrap' }}>
                        {isOpen ? `${activeCount}/22 active` : `${cat.n} active`} {isOpen ? '▴' : '▾'}
                      </span>
                    </div>
                    {isOpen && (
                      <div style={{ padding: '10px 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {engagementQs.map((item, j) => (
                          <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: KORYO.ink, opacity: clamp((localTime - 3.4 - j * 0.18) / 0.4, 0, 1) }}>
                            <div style={{
                              width: 18, height: 18, borderRadius: 4,
                              border: `1.5px solid ${checks[j] ? KORYO.indigo : KORYO.border}`,
                              background: checks[j] ? KORYO.indigo : '#fff',
                              display: 'flex', alignItems: 'center', justifyContent: 'center',
                              color: '#fff', fontSize: 11, fontWeight: 800,
                              flexShrink: 0,
                            }}>{checks[j] ? '✓' : ''}</div>
                            <span style={{ flex: 1 }}>{item.q}</span>
                            <span style={{
                              padding: '2px 10px',
                              background: '#f1f1f6',
                              color: KORYO.inkSoft,
                              fontSize: 11.5, fontWeight: 600,
                              borderRadius: 999,
                              whiteSpace: 'nowrap',
                              flexShrink: 0,
                            }}>{item.sub}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>

            {/* Custom + AI */}
            <div style={{ fontSize: 11, color: KORYO.inkMute, fontWeight: 700, letterSpacing: '0.12em', marginBottom: 8 }}>CUSTOM QUESTIONS</div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
              <div style={{
                flex: 1,
                border: `1px solid ${customN > 0 ? KORYO.indigo : KORYO.border}`,
                borderRadius: 8, padding: '10px 14px',
                fontSize: 14, color: customN > 0 ? KORYO.ink : KORYO.inkMute,
                background: '#fff',
                boxShadow: customN > 0 ? `0 0 0 3px ${KORYO.indigo}1f` : 'none',
              }}>
                {customText || 'Write a question…'}
                {customN > 0 && customN < custom.length && <span style={{ borderLeft: `1.5px solid ${KORYO.indigo}`, marginLeft: 1 }}/>}
              </div>
              <Btn variant="primary">+ Add</Btn>
              <div style={{
                padding: '8px 16px', borderRadius: 7,
                background: KORYO.indigo, color: '#fff',
                fontSize: 13, fontWeight: 700,
                boxShadow: aiClicked && !aiShown ? `0 0 0 3px ${KORYO.indigo}55` : 'none',
                display: 'flex', alignItems: 'center', gap: 7,
                whiteSpace: 'nowrap',
                flexShrink: 0,
              }}>
                {aiClicked && !aiShown ? (
                  <>
                    <span style={{
                      width: 12, height: 12, borderRadius: '50%',
                      border: '2px solid rgba(255,255,255,0.3)',
                      borderTopColor: '#fff',
                      transform: `rotate(${aiSpin}deg)`,
                    }}/> Generating
                  </>
                ) : <>✦ AI Suggest</>}
              </div>
            </div>

            {/* AI-generated questions (appear after Generate) */}
            {aiShown && (
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {aiQuestions.map((aq, idx) => {
                  const op = aiQuestionVis[idx];
                  return (
                    <div key={idx} style={{
                      opacity: op,
                      transform: `translateY(${(1 - op) * 10}px)`,
                      border: `1px solid ${KORYO.borderSoft}`,
                      borderRadius: 8,
                      background: '#fbfbff',
                      padding: '10px 14px',
                      display: 'flex', alignItems: 'center', gap: 10,
                    }}>
                      {/* AI sparkle */}
                      <div style={{
                        width: 22, height: 22, borderRadius: 5,
                        background: `linear-gradient(135deg, ${KORYO.indigo}, oklch(60% 0.21 320))`,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        color: '#fff', fontSize: 11, fontWeight: 800, flexShrink: 0,
                      }}>✦</div>
                      {/* Toggle */}
                      <div style={{
                        width: 30, height: 16, borderRadius: 999,
                        background: KORYO.indigo,
                        position: 'relative', flexShrink: 0,
                      }}>
                        <div style={{ position: 'absolute', right: 2, top: 2, width: 12, height: 12, borderRadius: 6, background: '#fff' }}/>
                      </div>
                      {/* Question text */}
                      <div style={{ flex: 1, fontSize: 13.5, color: KORYO.ink, minWidth: 0 }}>{aq.q}</div>
                      {/* Category pill */}
                      <span style={{
                        padding: '3px 10px',
                        background: KORYO.indigoSoft,
                        color: KORYO.indigoText,
                        fontSize: 11, fontWeight: 700,
                        borderRadius: 999,
                        whiteSpace: 'nowrap', flexShrink: 0,
                      }}>{aq.cat}</span>
                      {/* Subcategory pill */}
                      <span style={{
                        padding: '3px 10px',
                        background: '#f1f1f6',
                        color: KORYO.inkSoft,
                        fontSize: 11, fontWeight: 600,
                        borderRadius: 999,
                        whiteSpace: 'nowrap', flexShrink: 0,
                      }}>{aq.sub}</span>
                      {/* Edit icon */}
                      <div style={{
                        width: 22, height: 22, borderRadius: 4,
                        background: '#eef0fa', color: KORYO.indigoText,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 11, flexShrink: 0,
                      }}>✎</div>
                      {/* Delete icon */}
                      <div style={{
                        width: 22, height: 22, borderRadius: 4,
                        background: 'oklch(94% 0.04 25)', color: KORYO.red,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 11, flexShrink: 0,
                      }}>×</div>
                    </div>
                  );
                })}
              </div>
            )}

            <div style={{ display: 'flex', alignItems: 'center', marginTop: 16 }}>
              <div style={{ fontSize: 12.5, color: KORYO.inkSoft }}>
                {checks.filter(Boolean).length + (aiShown ? aiQuestions.length : 0) + (customN > 0 ? 1 : 0)} questions selected
              </div>
              <div style={{ flex: 1 }}/>
              <Btn variant="outline-indigo">Save survey</Btn>
            </div>
          </div>
        </div>

        <Cursor path={cursorPath}/>
        <ClickPulse x={BANK_X} y={BANK_Y} at={clickBankAt}/>
        <ClickPulse x={AI_X} y={AI_Y} at={clickAIAt}/>
      </KoryoApp>
      <Caption kicker="03 · SURVEYS" line="Pick from a validated question bank — or let AI suggest, edit, and tag for you."/>
    </SceneFade>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4: SCHEDULE & SEND (32-39s = 7s)
// ═══════════════════════════════════════════════════════════════════════════
function SceneSchedule() {
  const { localTime, duration } = useSprite();

  // Cursor moves from row → Schedule → Send. Card transitions states.
  const stage = localTime < 2.6 ? 'draft' : localTime < 4.6 ? 'scheduled' : 'sent';

  const cursorPath = [
    { t: 0.05, x: 360, y: 240 },
    { t: 0.30, x: 1170, y: 410 }, // schedule
    { t: 0.55, x: 1290, y: 410 }, // send
    { t: 0.78, x: 1290, y: 410 },
  ];

  return (
    <SceneFade>
      <KoryoApp active="surveys">
        <div style={{ position: 'absolute', inset: 0, padding: '36px 48px' }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: KORYO.indigoSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <NavIcon kind="cards" size={20} color={KORYO.indigo}/>
            </div>
            <div style={{ fontSize: 28, fontWeight: 800 }}>Surveys</div>
          </div>

          {/* Single highlighted survey */}
          <div style={{
            background: '#fff', borderRadius: 14, padding: '22px 26px',
            boxShadow: '0 1px 0 rgba(15,18,40,0.04), 0 12px 36px -14px rgba(15,18,40,0.18)',
            display: 'flex', alignItems: 'center',
            border: `2px solid ${stage === 'draft' ? KORYO.border : stage === 'scheduled' ? KORYO.amber : KORYO.green}`,
            transition: 'border-color 0.3s',
            transform: `scale(${1 + Math.max(0, (localTime - 0.2) / 0.6) * 0.0})`,
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 800, fontSize: 18, color: KORYO.ink, marginBottom: 4 }}>Q3 Pulse — Engagement & Wellbeing</div>
              <div style={{ fontSize: 13, color: KORYO.inkSoft }}>
                ID: 24 · <span style={{ color: KORYO.indigoText, textDecoration: 'underline' }}>4 questions</span>
                {' · '}
                {stage === 'draft' && <span style={{ padding: '2px 8px', background: '#f1f1f6', color: KORYO.inkSoft, borderRadius: 4, fontSize: 12, fontWeight: 600 }}>Draft</span>}
                {stage === 'scheduled' && <span style={{ padding: '2px 8px', background: KORYO.amberBg, color: KORYO.amber, borderRadius: 4, fontSize: 12, fontWeight: 700 }}>Scheduled · Mon 9:00 AM</span>}
                {stage === 'sent' && <span style={{ padding: '2px 8px', background: KORYO.greenBg, color: KORYO.green, borderRadius: 4, fontSize: 12, fontWeight: 700 }}>Sent · just now</span>}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn variant="outline">Delete</Btn>
              <div style={{
                padding: '8px 14px', borderRadius: 7,
                fontSize: 13, fontWeight: 700,
                background: stage === 'scheduled' ? KORYO.amberBg : 'transparent',
                color: KORYO.amber,
                border: `1.5px solid ${KORYO.amber}`,
                boxShadow: localTime > 2.0 && localTime < 3.0 ? `0 0 0 3px ${KORYO.amber}55` : 'none',
                whiteSpace: 'nowrap',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>📅 Schedule</div>
              <div style={{
                padding: '8px 18px', borderRadius: 7,
                fontSize: 13, fontWeight: 700,
                background: stage === 'sent' ? KORYO.green : KORYO.green,
                color: '#fff',
                boxShadow: localTime > 4.0 && localTime < 5.0 ? `0 0 0 3px ${KORYO.green}88` : '0 2px 0 oklch(45% 0.13 155)',
                whiteSpace: 'nowrap',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                {stage === 'sent' ? '✓ Sent' : 'Send →'}
              </div>
            </div>
          </div>

          {/* Toast */}
          {stage === 'sent' && (
            <div style={{
              marginTop: 22,
              opacity: clamp((localTime - 4.6) / 0.4, 0, 1),
              transform: `translateY(${(1 - clamp((localTime - 4.6) / 0.4, 0, 1)) * 12}px)`,
              background: '#fff',
              border: `1px solid ${KORYO.greenBg}`,
              borderLeft: `4px solid ${KORYO.green}`,
              borderRadius: 10, padding: '14px 18px',
              display: 'flex', alignItems: 'center', gap: 12,
              maxWidth: 540,
              boxShadow: '0 6px 24px -14px rgba(15,18,40,0.16)',
            }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: KORYO.green, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800 }}>✓</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: KORYO.ink }}>Survey sent to 124 employees</div>
                <div style={{ fontSize: 12.5, color: KORYO.inkSoft, marginTop: 2 }}>Reminders will fire on Wed & Fri at 9:00 AM</div>
              </div>
            </div>
          )}

          {/* Reminder & details panel below (small) */}
          <div style={{
            marginTop: 24,
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14,
            opacity: 0.7,
          }}>
            {[
              { l: 'Channel', v: 'Direct messages' },
              { l: 'Reminders', v: 'Wed, Fri @ 9 AM' },
              { l: 'Recipients', v: '124 people · 3 groups' },
            ].map((it, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 10, padding: '14px 16px', boxShadow: '0 1px 0 rgba(15,18,40,0.04)' }}>
                <div style={{ fontSize: 11, color: KORYO.inkMute, fontWeight: 700, letterSpacing: '0.12em' }}>{it.l.toUpperCase()}</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: KORYO.ink, marginTop: 4 }}>{it.v}</div>
              </div>
            ))}
          </div>
        </div>

        <Cursor path={cursorPath}/>
        <ClickPulse x={1170} y={410} at={2.4}/>
        <ClickPulse x={1290} y={410} at={4.4}/>
      </KoryoApp>
      <Caption kicker="04 · SCHEDULE" line="Schedule it, set reminders, send — surveys land where work happens."/>
    </SceneFade>
  );
}

Object.assign(window, { SceneLanding, SceneUsers, SceneSurveys, SceneSchedule, Btn });