// Step 5 — Teachers. Tip banner + Teachers card + Coverage check with scroll.
const STEP5_FRAME = { x: 192, y: 48, w: 1536, h: 984 };

// Beat plan (~10s):
//  0.0 – 0.4   Scene fades in (Step 4 ✓, Step 5 active)
//  0.4 – 1.0   Step strip slides in
//  1.0 – 1.5   Tip banner appears
//  1.5 – 2.0   Teachers card slides up (empty)
//  2.0 – 2.7   Cursor clicks "+ Add teacher" → Ms. Carter row appears
//  2.7 – 3.4   Stats update "1 teacher · 1 assignment"
//  3.4 – 4.6   Scroll down to reveal Coverage check
//  4.6 – 5.6   Coverage check tiles populate; Unassigned 1 pulses
//  5.6 – 6.4   Mathematics row appears in coverage list
//  6.4 – 7.4   Cursor glides to Continue
//  7.4 – 7.7   Click + halo
//  7.7 – 8.6   Step 5 ✓, Step 6 Review activates
//  8.6 – 9.6   Hold
//  9.6 – 10.0  Fade

function StepStripStep5({ step5DoneT = 0 }) {
  const steps = ['School', 'Classes', 'Periods', 'Subjects', 'Teachers', 'Review'];
  const step5Done = step5DoneT > 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 <= 3 || (i === 4 && step5Done);
        const isActive = i === 4 ? !step5Done : (i === 5 ? step5Done : 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 < 4 || (i === 4 && step5Done)) ? BRAND.greenMid : BRAND.borderSoft,
                margin: '0 14px',
                transition: 'background 240ms',
              }}/>
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

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

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

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

  const tipOp = interpolate([1.0, 1.5], [0, 1], Easing.easeOutCubic)(lt);
  const tipY  = interpolate([1.0, 1.5], [12, 0], Easing.easeOutCubic)(lt);

  const teachersCardOp = interpolate([1.5, 2.0], [0, 1], Easing.easeOutCubic)(lt);
  const teachersCardY  = interpolate([1.5, 2.0], [20, 0], Easing.easeOutCubic)(lt);

  // Add-teacher click at t=2.3
  const addClickT = 2.3;
  const teacherShown = lt >= addClickT;
  const teacherRowOp = interpolate([addClickT, addClickT + 0.4], [0, 1], Easing.easeOutCubic)(lt);

  // Scroll between t=3.4 and t=4.6
  const scrollT = interpolate([3.4, 4.6], [0, 1], Easing.easeInOutCubic)(lt);
  const MAX_SCROLL = 280;
  const scrollY = scrollT * MAX_SCROLL;

  // Coverage check card appears after teachers card is done
  const coverCardOp = interpolate([3.0, 3.6], [0, 1], Easing.easeOutCubic)(lt);
  const coverCardY  = interpolate([3.0, 3.6], [40, 0], Easing.easeOutCubic)(lt);

  // Tiles cascade in
  const tileOp = (i) => interpolate([4.6 + i*0.08, 4.9 + i*0.08], [0, 1], Easing.easeOutBack)(lt);

  // Unassigned tile pulse
  const pulseT = (lt - 5.4) % 1.4;
  const pulse = pulseT > 0 && pulseT < 0.7 ? Math.sin((pulseT / 0.7) * Math.PI) : 0;

  // Math row appears
  const mathRowOp = interpolate([5.7, 6.1], [0, 1], Easing.easeOutCubic)(lt);
  const mathRowY  = interpolate([5.7, 6.1], [16, 0], Easing.easeOutCubic)(lt);

  // Continue active from start (can continue even with coverage gaps)
  const continueActive = interpolate([0.5, 1.0], [0, 1], Easing.easeOutCubic)(lt);
  const continueClickT = 7.4;
  const continueHot = lt > 7.0 && lt < 7.7;
  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 step5DoneT = interpolate([continueClickT + 0.1, continueClickT + 0.8], [0, 1], Easing.easeOutCubic)(lt);

  // Cursor path (WORLD coords pre-scroll)
  // + Add teacher button ≈ (370, 575)
  // Continue button (after scroll completes at scrollY=540) world y for footer ≈ 1340 → screen 800
  const path = [
    { t: 1.6, x: 1740, y: 1100 },
    { t: 2.2, x: 370, y: 575 },   // + Add teacher
    { t: 2.3, x: 370, y: 575 },
    { t: 7.2, x: 1585, y: 1340 }, // Continue (after scroll, world coord)
    { t: 7.4, x: 1585, y: 1340 },
    { t: 10.0, x: 1585, y: 1340 },
  ];
  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([8.8, 9.4], [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;

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

        <div style={{ position: 'relative', height: STEP5_FRAME.h - 88, overflow: 'hidden' }}>
          <div style={{
            position: 'absolute', left: 0, right: 0, top: 0,
            transform: `translateY(${-scrollY}px)`,
            padding: '24px 48px',
          }}>
            {/* Step strip */}
            <div style={{ opacity: stripOp, transform: `translateY(${stripY}px)` }}>
              <StepStripStep5 step5DoneT={step5DoneT}/>
            </div>

            {/* Tip banner */}
            <div style={{
              marginTop: 18,
              opacity: tipOp,
              transform: `translateY(${tipY}px)`,
              background: BRAND.greenSofter,
              border: `1px solid ${BRAND.greenMid}`,
              borderRadius: 14,
              padding: '20px 24px',
              display: 'flex', alignItems: 'flex-start', gap: 14,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999,
                background: BRAND.greenSoft,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, marginTop: 2,
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={BRAND.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 18h6M10 22h4M12 2a7 7 0 00-4 12.7c.6.4 1 1 1 1.6V18h6v-1.7c0-.6.4-1.2 1-1.6A7 7 0 0012 2z"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>
                  Primary section? Mark a mother teacher.
                </div>
                <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4, lineHeight: 1.5 }}>
                  For Nursery–Class 2, one teacher usually covers most subjects for a single section. Marking them <span style={{ fontWeight: 700, color: BRAND.ink }}>Mother teacher</span> on their card lets the solver place all their classes in a tight block — often the difference between a 98% and 100% fill rate.
                </div>
              </div>
            </div>

            {/* Teachers card */}
            <div style={{
              marginTop: 16,
              opacity: teachersCardOp,
              transform: `translateY(${teachersCardY}px)`,
            }}>
              <Card style={{ padding: '22px 26px' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18 }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                    <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="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
                      </svg>
                    </div>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>Teachers</div>
                      <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4, maxWidth: 720 }}>
                        Add the teaching staff and what they teach. Class teachers and coordinators get extra attention from the scheduler.
                      </div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, fontSize: 14, color: BRAND.inkSoft, whiteSpace: 'nowrap' }}>
                    <span><span style={{ fontSize: 17, fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums' }}>{teacherShown ? 1 : 0}</span> {teacherShown && lt < addClickT + 0.5 ? 'teachers' : 'teacher'}</span>
                    <span>·</span>
                    <span><span style={{ fontSize: 17, fontWeight: 700, color: BRAND.ink, fontVariantNumeric: 'tabular-nums' }}>{teacherShown ? 1 : 0}</span> assignment{teacherShown ? '' : 's'}</span>
                  </div>
                </div>

                {/* Add teacher button */}
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '12px 18px', borderRadius: 10,
                  border: `1px solid ${BRAND.border}`, background: '#fff',
                  color: BRAND.ink, fontSize: 14, fontWeight: 600,
                  marginBottom: teacherShown ? 14 : 0,
                  boxShadow: lt > 2.1 && lt < 2.4 ? `0 0 0 4px ${BRAND.greenSoft}` : 'none',
                  transition: 'box-shadow 200ms',
                }}>
                  <span style={{ color: BRAND.inkSub, fontSize: 16 }}>+</span> Add teacher
                </div>

                {/* Teacher row */}
                {teacherShown && (
                  <div style={{
                    opacity: teacherRowOp,
                    transform: `translateY(${(1 - teacherRowOp) * 12}px)`,
                    padding: '18px 22px',
                    border: `1px solid ${BRAND.border}`,
                    borderRadius: 12,
                    background: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={BRAND.inkSub} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                      <div>
                        <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink }}>Ms. Carter</div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: BRAND.inkSoft, marginTop: 4 }}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 4l8 8 8-8"/></svg>
                          carter@example.com
                        </div>
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                      <span style={{ fontSize: 14, color: BRAND.inkSoft }}>
                        <span style={{ fontWeight: 700, color: BRAND.ink }}>1</span> periods
                      </span>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={BRAND.inkSub} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z"/></svg>
                      <svg width="16" height="16" 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>
                  </div>
                )}
              </Card>
            </div>

            {/* Coverage check card */}
            <div style={{
              marginTop: 16,
              opacity: coverCardOp,
              transform: `translateY(${coverCardY}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="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                      <path d="M12 9v4M12 17h.01"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>Coverage check</div>
                    <div style={{ fontSize: 14, color: BRAND.inkSoft, marginTop: 4, maxWidth: 820 }}>
                      Each class section needs every subject fully covered before the timetable can generate. Tap a tile to see only those rows.
                    </div>
                  </div>
                </div>

                {/* Stat tiles */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
                  {[
                    { label: 'Fully covered', value: '0/1', bg: BRAND.greenSofter, fg: BRAND.green, pulse: false },
                    { label: 'Partial',       value: '0',   bg: '#fef3c7', fg: '#92400e', pulse: false },
                    { label: 'Unassigned',    value: '1',   bg: '#f5f5f0', fg: BRAND.ink, pulse: true },
                    { label: 'Over-filled',   value: '0',   bg: BRAND.roseSoft, fg: BRAND.rose, pulse: false },
                  ].map((tile, i) => (
                    <div key={i} style={{
                      opacity: tileOp(i),
                      padding: '16px 18px', borderRadius: 12,
                      background: tile.bg,
                      transform: tile.pulse
                        ? `scale(${1 + pulse * 0.02})`
                        : 'none',
                      boxShadow: tile.pulse && pulse > 0.1
                        ? `0 0 0 ${pulse * 5}px rgba(15,23,42,${0.05 * pulse})`
                        : 'none',
                      transition: 'box-shadow 200ms',
                    }}>
                      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: tile.fg, opacity: 0.85, marginBottom: 6 }}>
                        {tile.label}
                      </div>
                      <div style={{ fontSize: 28, fontWeight: 700, color: tile.fg, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>
                        {tile.value}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Filter tabs */}
                <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
                  <div style={{
                    padding: '8px 14px', borderRadius: 999,
                    background: BRAND.ink, color: '#fff',
                    fontSize: 13, fontWeight: 600,
                    whiteSpace: 'nowrap',
                  }}>Issues only (1)</div>
                  <div style={{
                    padding: '8px 14px', borderRadius: 999,
                    background: '#fff', color: BRAND.ink,
                    border: `1px solid ${BRAND.border}`,
                    fontSize: 13, fontWeight: 600,
                    whiteSpace: 'nowrap',
                  }}>All (1)</div>
                </div>

                {/* Math unassigned row */}
                <div style={{
                  opacity: mathRowOp,
                  transform: `translateY(${mathRowY}px)`,
                  border: `1px solid ${BRAND.border}`,
                  borderRadius: 10,
                  padding: '16px 18px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  background: '#fff',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ width: 10, height: 10, borderRadius: 999, background: '#3b82f6' }}/>
                    <span style={{ fontSize: 15, fontWeight: 700, color: BRAND.ink }}>Mathematics</span>
                    <span style={{ fontSize: 14, color: BRAND.inkSoft, marginLeft: 16 }}>Class 1-A</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{
                      padding: '3px 10px', borderRadius: 999,
                      background: '#f1efe8', color: BRAND.ink,
                      fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
                    }}>UNASSIGNED</span>
                    <span style={{ fontSize: 14, fontWeight: 600, color: BRAND.inkSub, fontVariantNumeric: 'tabular-nums' }}>0/1</span>
                    <span style={{ fontSize: 14, fontWeight: 700, color: BRAND.rose, fontVariantNumeric: 'tabular-nums' }}>−1</span>
                  </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={{ fontSize: 14, color: BRAND.inkSoft }}>You can fix coverage gaps in the Review step</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: BRAND.green, 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)`
                    : '0 2px 6px rgba(4,120,87,0.18)',
                  transition: '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 */}
            {cursorOp > 0 && (
              <div style={{
                position: 'absolute',
                left: cur.x - STEP5_FRAME.x,
                top: cur.y - STEP5_FRAME.y - 88 + settle,
                pointerEvents: 'none',
              }}>
                <Cursor x={0} y={0} opacity={cursorOp}/>
              </div>
            )}
          </div>
        </div>
      </AppFrame>
    </div>
  );
}

function Step5App({ loop = true, persistKey = "step5video" }) {
  return (
    <Stage width={1920} height={1080} duration={10} background={BRAND.bg} loop={loop} persistKey={persistKey}>
      <Step5Video start={0}/>
    </Stage>
  );
}

Object.assign(window, { Step5Video, Step5App });

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