// Step 4 — Subjects. Scrolling content (Subject library + Frequency by class).
const STEP4_FRAME = { x: 192, y: 48, w: 1536, h: 984 };

// Beat plan (~11s):
//  0.0 – 0.4   Scene fades in (Step 1✓ Step 2✓ Step 3✓ Step 4 active)
//  0.4 – 1.0   Step strip slides in
//  1.0 – 1.6   Subject library card slides up (5 subjects pre-selected)
//  1.6 – 2.3   Cursor clicks "+ Hindi" → flips selected
//  2.3 – 3.0   Cursor clicks "+ Computer" → flips selected
//  3.0 – 3.8   "Your subjects" count grows to 7; new chips slide in
//  3.8 – 5.2   Scroll down to reveal Frequency by class card
//  5.2 – 5.9   Cursor clicks "+ Add subject to Class 1"
//  5.9 – 7.5   Subjects populate the table row-by-row with periods/week
//  7.5 – 8.4   Counter ticks up to 27 / 40
//  8.4 – 9.0   Cursor glides to Continue (active green)
//  9.0 – 9.3   Click + halo
//  9.3 – 10.2  Step 4 ticks ✓, Step 5 activates
// 10.2 – 11.0  Hold + fade

const SUBJECT_PALETTE = {
  Mathematics:        { color: '#3b82f6', soft: '#dbeafe' },
  English:            { color: '#d4a017', soft: '#fef3c7' },
  'Social Studies':   { color: '#ec4899', soft: '#fce7f3' },
  Science:            { color: '#22c55e', soft: '#dcfce7' },
  Art:                { color: '#d97706', soft: '#fed7aa' },
  Hindi:              { color: '#14b8a6', soft: '#ccfbf1' },
  Computer:           { color: '#a855f7', soft: '#f3e8ff' },
  'Physical Education': { color: '#ef4444', soft: '#fee2e2' },
  Music:              { color: '#8b5cf6', soft: '#ede9fe' },
};

const COMMON_SUBJECTS = ['English', 'Mathematics', 'Science', 'Social Studies', 'Hindi', 'Computer', 'Art', 'Physical Education', 'Music'];

// Pre-selected at scene start
const INITIAL_SELECTED = ['Mathematics', 'English', 'Social Studies', 'Science', 'Art'];

const PERIODS_DATA = [
  { name: 'Mathematics', periods: 6 },
  { name: 'English', periods: 5 },
  { name: 'Social Studies', periods: 4 },
  { name: 'Science', periods: 4 },
  { name: 'Art', periods: 2 },
  { name: 'Hindi', periods: 4 },
  { name: 'Computer', periods: 2 },
];

function StepStripStep4({ step4DoneT = 0 }) {
  const steps = ['School', 'Classes', 'Periods', 'Subjects', 'Teachers', 'Review'];
  const step4Done = step4DoneT > 0.5;
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      background: '#fff', border: `1px solid ${BRAND.border}`,
      borderRadius: 14, padding: '18px 24px',
    }}>
      {steps.map((s, i) => {
        const isDone = i <= 2 || (i === 3 && step4Done);
        const isActive = i === 3 ? !step4Done : (i === 4 ? step4Done : false);
        return (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 26, height: 26, borderRadius: 999,
                background: isDone ? BRAND.greenSoft : (isActive ? BRAND.green : '#f1efe8'),
                color: isDone ? BRAND.green : (isActive ? '#fff' : BRAND.inkSub),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700,
                transition: 'background 240ms, color 240ms',
              }}>
                {isDone ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5 11-12"/></svg>
                ) : (i + 1)}
              </div>
              <span style={{
                fontSize: 14,
                fontWeight: isActive ? 700 : 500,
                color: isDone || isActive ? BRAND.ink : BRAND.inkSub,
                whiteSpace: 'nowrap',
              }}>{s}</span>
            </div>
            {i < steps.length - 1 && (
              <div style={{
                flex: 1, height: 1,
                background: (i < 3 || (i === 3 && step4Done)) ? BRAND.greenMid : BRAND.borderSoft,
                margin: '0 14px',
                transition: 'background 240ms',
              }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

function SubjectChip({ name, selected, justAdded }) {
  const pal = SUBJECT_PALETTE[name] || { color: BRAND.ink, soft: BRAND.greenSoft };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '10px 14px',
      borderRadius: 10,
      background: selected ? BRAND.greenSofter : '#fff',
      border: `1px solid ${selected ? BRAND.greenMid : BRAND.border}`,
      color: selected ? BRAND.green : BRAND.ink,
      fontSize: 14, fontWeight: 600,
      whiteSpace: 'nowrap',
      transform: `scale(${justAdded ? 1.06 : 1})`,
      boxShadow: justAdded ? `0 0 0 4px ${BRAND.greenSoft}` : 'none',
      transition: 'all 240ms cubic-bezier(.4,1.6,.6,1)',
    }}>
      {selected ? (
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5 11-12"/></svg>
      ) : (
        <span style={{ color: BRAND.inkSub, fontWeight: 600 }}>+</span>
      )}
      {name}
    </div>
  );
}

function YourSubjectChip({ name, opacity = 1 }) {
  const pal = SUBJECT_PALETTE[name] || { color: BRAND.ink };
  return (
    <div style={{
      opacity,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 12px 8px 10px',
      borderRadius: 10,
      background: '#fff',
      border: `1px solid ${BRAND.border}`,
      fontSize: 14, fontWeight: 600, color: BRAND.ink,
      whiteSpace: 'nowrap',
      transition: 'opacity 240ms',
    }}>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: pal.color }}/>
      {name}
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={BRAND.inkSub} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
      </svg>
    </div>
  );
}

function PeriodRow({ name, periods, opacity }) {
  const pal = SUBJECT_PALETTE[name] || { color: BRAND.ink };
  return (
    <div style={{
      opacity,
      display: 'grid', gridTemplateColumns: '1fr 220px',
      gap: 16, padding: '14px 16px',
      borderBottom: `1px solid ${BRAND.borderSoft}`,
      alignItems: 'center',
      transition: 'opacity 280ms',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: pal.color }}/>
        <span style={{ fontSize: 15, fontWeight: 600, color: BRAND.ink }}>{name}</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center',
          border: `1px solid ${BRAND.border}`,
          borderRadius: 8, background: '#fff',
        }}>
          <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', color: BRAND.inkSub, fontSize: 16 }}>−</div>
          <div style={{ minWidth: 36, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums', borderLeft: `1px solid ${BRAND.borderSoft}`, borderRight: `1px solid ${BRAND.borderSoft}` }}>{periods}</div>
          <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', color: BRAND.inkSub, fontSize: 16 }}>+</div>
        </div>
      </div>
    </div>
  );
}

function Step4Video({ start = 0 }) {
  const t = useTime();
  const lt = t - start;

  const fadeIn = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(lt);
  const fadeOut = interpolate([10.4, 11.0], [1, 0], Easing.easeInCubic)(lt);
  const sceneOp = fadeIn * fadeOut;

  // Step strip
  const stripOp = interpolate([0.4, 1.0], [0, 1], Easing.easeOutCubic)(lt);
  const stripY  = interpolate([0.4, 1.0], [16, 0], Easing.easeOutCubic)(lt);

  // Subject library card
  const libCardOp = interpolate([1.0, 1.6], [0, 1], Easing.easeOutCubic)(lt);
  const libCardY  = interpolate([1.0, 1.6], [24, 0], Easing.easeOutCubic)(lt);

  // Subject clicks: Hindi at t=2.0, Computer at t=2.6
  const hindiClickT = 2.0, computerClickT = 2.6;
  const selectedSet = new Set(INITIAL_SELECTED);
  if (lt >= hindiClickT) selectedSet.add('Hindi');
  if (lt >= computerClickT) selectedSet.add('Computer');
  const justHindi = lt >= hindiClickT && lt < hindiClickT + 0.4;
  const justComputer = lt >= computerClickT && lt < computerClickT + 0.4;

  // Scroll progress (0 → 1 between t=4.2 and t=5.4) — happens after freq card appears
  const scrollT = interpolate([4.2, 5.4], [0, 1], Easing.easeInOutCubic)(lt);
  const MAX_SCROLL = 520;
  const scrollY = scrollT * MAX_SCROLL;

  // Frequency by class card appears after Subject library is "done"
  const freqCardOp = interpolate([3.4, 4.0], [0, 1], Easing.easeOutCubic)(lt);
  const freqCardY  = interpolate([3.4, 4.0], [40, 0], Easing.easeOutCubic)(lt);

  // "Add subject to Class 1" click at t=5.7
  const addClickT = 5.7;
  const tableRowOp = (i) => interpolate([addClickT + i*0.18, addClickT + 0.4 + i*0.18], [0, 1], Easing.easeOutCubic)(lt);
  const visibleRows = PERIODS_DATA.filter((_, i) => tableRowOp(i) > 0);
  const totalPeriods = PERIODS_DATA.reduce((s, r, i) => s + (tableRowOp(i) > 0.5 ? r.periods : 0), 0);

  // Continue activation & click
  const continueActive = interpolate([1.6, 2.0], [0, 1], Easing.easeOutCubic)(lt);
  const continueClickT = 8.8;
  const continueHot = lt > 8.4 && lt < 9.1;
  const clkT = (lt - continueClickT) / 0.18;
  const clickSquish = clkT > 0 && clkT < 1 ? 0.05 * Math.sin(clkT * Math.PI) : 0;
  const haloOp = interpolate([continueClickT, continueClickT + 0.25, continueClickT + 0.7], [0, 0.7, 0], Easing.easeOutCubic)(lt);
  const haloScale = interpolate([continueClickT, continueClickT + 0.7], [1, 1.6], Easing.easeOutCubic)(lt);

  const step4DoneT = interpolate([continueClickT + 0.1, continueClickT + 0.8], [0, 1], Easing.easeOutCubic)(lt);

  // Cursor path in WORLD coords (pre-scroll). Screen y = world.y - scrollY
  // Hindi chip ≈ (905, 540), Computer ≈ (1040, 540)
  // Add-subject button ≈ (470, 1185) in world coords (after scroll, ≈ 665 on screen)
  // Continue ≈ (1585, 1280) world (≈ 760 screen)
  const path = [
    { t: 1.4, x: 1740, y: 1100 },
    { t: 1.9, x: 905, y: 540 },        // Hindi
    { t: 2.0, x: 905, y: 540 },
    { t: 2.5, x: 1040, y: 540 },       // Computer
    { t: 2.6, x: 1040, y: 540 },
    { t: 5.6, x: 470, y: 1185 },       // Add subject (after scroll completes)
    { t: 5.7, x: 470, y: 1185 },
    { t: 8.6, x: 1585, y: 1280 },      // Continue
    { t: 8.8, x: 1585, y: 1280 },
    { t: 11.0, x: 1585, y: 1280 },
  ];
  const cur = (() => {
    if (lt < path[0].t) return { x: path[0].x, y: path[0].y, op: 0 };
    if (lt >= path[path.length-1].t) return { x: path[path.length-1].x, y: path[path.length-1].y, op: 1 };
    for (let i = 0; i < path.length - 1; i++) {
      if (lt >= path[i].t && lt <= path[i+1].t) {
        const seg = (lt - path[i].t) / (path[i+1].t - path[i].t || 1);
        const e = Easing.easeInOutCubic(seg);
        return { x: path[i].x + (path[i+1].x - path[i].x) * e, y: path[i].y + (path[i+1].y - path[i].y) * e, op: 1 };
      }
    }
    return { x: path[0].x, y: path[0].y, op: 1 };
  })();
  const cursorFadeOut = interpolate([10.0, 10.5], [1, 0], Easing.easeInCubic)(lt);
  const cursorOp = cur.op * cursorFadeOut;
  const settle = lt > continueClickT && lt < continueClickT + 0.4
    ? Math.sin((lt - continueClickT) * 30) * 1.5 * Math.exp(-(lt - continueClickT) * 8) : 0;

  // Color swatches
  const COLORS = ['#d4a017', '#3b82f6', '#22c55e', '#ec4899', '#d97706', '#8b5cf6', '#eab308', '#14b8a6', '#ef4444', '#65a30d', '#a855f7', '#0891b2'];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <AppFrame x={STEP4_FRAME.x} y={STEP4_FRAME.y} width={STEP4_FRAME.w} height={STEP4_FRAME.h}>
        <ChromeStep2/>

        {/* Scrolling viewport */}
        <div style={{ position: 'relative', height: STEP4_FRAME.h - 88, overflow: 'hidden' }}>
          <div style={{
            position: 'absolute', left: 0, right: 0, top: 0,
            transform: `translateY(${-scrollY}px)`,
            transition: 'transform 80ms linear',
            padding: '24px 48px',
          }}>
            {/* Step strip */}
            <div style={{ opacity: stripOp, transform: `translateY(${stripY}px)` }}>
              <StepStripStep4 step4DoneT={step4DoneT}/>
            </div>

            {/* Subject library card */}
            <div style={{ marginTop: 18, opacity: libCardOp, transform: `translateY(${libCardY}px)` }}>
              <Card style={{ padding: '22px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 16 }}>
                  <div style={{
                    width: 42, height: 42, borderRadius: 11,
                    background: BRAND.greenSoft,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={BRAND.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/>
                      <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>Subject library</div>
                    <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4 }}>Build your school's master list. Each subject gets a color that'll show up across the timetable.</div>
                  </div>
                </div>

                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub, marginBottom: 10 }}>Common subjects</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
                  {COMMON_SUBJECTS.map(name => (
                    <SubjectChip
                      key={name}
                      name={name}
                      selected={selectedSet.has(name)}
                      justAdded={(name === 'Hindi' && justHindi) || (name === 'Computer' && justComputer)}
                    />
                  ))}
                </div>

                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub, marginBottom: 8 }}>Or add custom</div>
                <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
                  <div style={{
                    flex: 1, height: 44, padding: '0 14px',
                    background: '#fff', border: `1px solid ${BRAND.border}`,
                    borderRadius: 10, display: 'flex', alignItems: 'center',
                    fontSize: 14, color: BRAND.inkSub,
                  }}>e.g. Sanskrit, Robotics</div>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '0 18px', borderRadius: 10,
                    border: `1px solid ${BRAND.border}`, background: '#fff',
                    color: BRAND.ink, fontSize: 14, fontWeight: 600,
                  }}>
                    <span style={{ color: BRAND.inkSub }}>+</span> Add subject
                  </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                  <div style={{
                    width: 36, height: 20, borderRadius: 999,
                    background: BRAND.border, position: 'relative',
                  }}>
                    <span style={{
                      position: 'absolute', top: 2, left: 2,
                      width: 16, height: 16, borderRadius: 999, background: '#fff',
                    }}/>
                  </div>
                  <div style={{ fontSize: 14, color: BRAND.inkSoft }}>
                    <span style={{ fontWeight: 700, color: BRAND.ink }}>Mark as core subject</span> — the scheduler spreads core subjects across the week (one per day where possible).
                  </div>
                </div>

                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub, marginBottom: 10 }}>Color</div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
                  {COLORS.map((c, i) => (
                    <div key={i} style={{
                      width: 32, height: 32, borderRadius: 8,
                      background: c,
                      border: i === 0 ? `2px solid ${BRAND.ink}` : '2px solid transparent',
                      cursor: 'default',
                    }}/>
                  ))}
                </div>

                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub, marginBottom: 10 }}>
                  Your subjects ({selectedSet.size})
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {[...selectedSet].map(name => (
                    <YourSubjectChip key={name} name={name}/>
                  ))}
                </div>
              </Card>
            </div>

            {/* Frequency by class card */}
            <div style={{ marginTop: 14, opacity: freqCardOp, transform: `translateY(${freqCardY}px)` }}>
              <Card style={{ padding: '22px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 18 }}>
                  <div style={{
                    width: 42, height: 42, borderRadius: 11,
                    background: '#fef3c7',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 2L2 7l10 5 10-5z"/>
                      <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>Frequency by class</div>
                    <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4, maxWidth: 820 }}>
                      How many periods per week each subject runs in each class. The scheduler spreads them across days automatically.
                    </div>
                  </div>
                </div>

                {/* Class tab + counter */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '8px 14px', borderRadius: 10,
                    background: BRAND.green, color: '#fff',
                    fontSize: 14, fontWeight: 600,
                  }}>
                    Class 1
                    <span style={{
                      background: 'rgba(255,255,255,0.22)', padding: '2px 8px',
                      borderRadius: 6, fontSize: 12, fontVariantNumeric: 'tabular-nums',
                    }}>{totalPeriods}/40</span>
                  </div>
                  <div style={{ fontSize: 14, color: BRAND.inkSoft }}>
                    <span style={{ fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums' }}>{totalPeriods}</span>
                    {' / 40 periods/week'}
                  </div>
                </div>

                {/* Table */}
                <div style={{ border: `1px solid ${BRAND.border}`, borderRadius: 10, overflow: 'hidden' }}>
                  <div style={{
                    display: 'grid', gridTemplateColumns: '1fr 220px',
                    gap: 16, padding: '12px 16px',
                    background: '#fafaf6',
                    borderBottom: `1px solid ${BRAND.borderSoft}`,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub }}>Subject</div>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.inkSub, textAlign: 'right' }}>Periods / week</div>
                  </div>
                  {visibleRows.length === 0 ? (
                    <div style={{
                      padding: '32px 16px',
                      textAlign: 'center',
                      fontSize: 14, color: BRAND.inkSoft,
                    }}>
                      No subjects assigned to Class 1 yet — pick from the library below.
                    </div>
                  ) : (
                    PERIODS_DATA.map((row, i) => {
                      const op = tableRowOp(i);
                      if (op === 0) return null;
                      return <PeriodRow key={row.name} name={row.name} periods={row.periods} opacity={op}/>;
                    })
                  )}
                  <div style={{ padding: '14px 16px', display: 'flex' }}>
                    <div style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      padding: '10px 14px', borderRadius: 10,
                      border: `1px solid ${BRAND.border}`, background: '#fff',
                      color: BRAND.ink, fontSize: 14, fontWeight: 600,
                    }}>
                      <span style={{ color: BRAND.inkSub }}>+</span> Add subject to Class 1
                    </div>
                  </div>
                </div>
              </Card>
            </div>

            {/* Footer */}
            <div style={{ height: 1, background: BRAND.borderSoft, marginTop: 18 }}/>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingBottom: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: BRAND.inkSub, fontSize: 15, fontWeight: 500 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
                Back
              </div>
              <div style={{ position: 'relative' }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  borderRadius: 10, background: BRAND.greenSoft,
                  opacity: haloOp, transform: `scale(${haloScale})`, pointerEvents: 'none',
                }}/>
                <div style={{
                  position: 'relative',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '12px 22px', borderRadius: 10,
                  background: continueActive > 0.5 ? BRAND.green : '#9bcdb6',
                  color: '#fff', fontSize: 15, fontWeight: 600,
                  transform: `scale(${1 - clickSquish})`,
                  boxShadow: continueHot
                    ? `0 0 0 8px ${BRAND.greenSoft}, 0 8px 20px rgba(4,120,87,0.28)`
                    : continueActive > 0.5 ? '0 2px 6px rgba(4,120,87,0.18)' : 'none',
                  transition: 'background 320ms, box-shadow 200ms',
                }}>
                  Continue
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                </div>
              </div>
            </div>

            {/* Cursor (inside scrolling content so it moves with it) */}
            {cursorOp > 0 && (
              <div style={{
                position: 'absolute',
                left: cur.x - STEP4_FRAME.x,
                top: cur.y - STEP4_FRAME.y - 88 + settle,
                pointerEvents: 'none',
              }}>
                <Cursor x={0} y={0} opacity={cursorOp}/>
              </div>
            )}
          </div>
        </div>
      </AppFrame>
    </div>
  );
}

function Step4App({ loop = true, persistKey = "step4video" }) {
  return (
    <Stage width={1920} height={1080} duration={11} background={BRAND.bg} loop={loop} persistKey={persistKey}>
      <Step4Video start={0}/>
    </Stage>
  );
}

Object.assign(window, { Step4Video, Step4App });

if (!window.__STEP4_NO_AUTOMOUNT) {
  ReactDOM.createRoot(document.getElementById('root')).render(<Step4App/>);
}