// scenes-a.jsx — Scenes 1–3: Cold open, The problem, The hidden math.

// ── Persistent background that drifts/recolors across the whole video ──
function GlobalBackground() {
  const time = useTime();
  // glow position eases between scene anchors for continuity
  const gx = interpolate([0, 5, 11, 22.5, 37.5, 47.5, 54],
    [70, 50, 78, 22, 80, 50, 50], Easing.easeInOutSine)(time) + '%';
  const gy = interpolate([0, 5, 11, 22.5, 37.5, 47.5, 54],
    [34, 60, 24, 70, 40, 50, 50], Easing.easeInOutSine)(time) + '%';
  return <Ambient glowX={gx} glowY={gy} />;
}

// ───────────────────────── Scene 1 — Cold open ─────────────────────────
function SceneColdOpen({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 30 }}>
        <Reveal inAt={start + 0.1} y={0} dur={0.6} outAt={end - 0.5}>
          <Eyebrow inAt={start + 0.15}>Engineering &amp; Product Recruiting</Eyebrow>
        </Reveal>
        <Reveal inAt={start + 0.3} y={0} dur={0.01} outAt={end - 0.5}>
          <Wordmark size={150} inAt={start + 0.4} />
        </Reveal>
        <div style={{ height: 4 }} />
        <Reveal inAt={start + 1.0} y={0} dur={0.01} outAt={end - 0.5}>
          <OneWayLine width={460} inAt={start + 1.1} />
        </Reveal>
        <Reveal inAt={start + 1.9} y={16} dur={0.7} outAt={end - 0.5}
          style={{ fontFamily: BODY, fontSize: 30, color: OW.muted, letterSpacing: '0.01em', fontWeight: 400, marginTop: 6 }}>
          Hire smarter. Hire faster. <span style={{ color: OW.text, fontWeight: 500 }}>Pay only when you do.</span>
        </Reveal>
      </div>
    </Scene>
  );
}

// ───────────────────────── Scene 2 — The problem ───────────────────────
function SceneProblem({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 200px' }}>
      <div style={{ marginBottom: 44 }}>
        <Eyebrow inAt={start + 0.1} color={OW.warm}>The problem</Eyebrow>
      </div>
      <Reveal inAt={start + 0.4} y={30} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 86, lineHeight: 1.07, letterSpacing: '-0.025em', color: OW.text }}>
        Build the product.
      </Reveal>
      <Reveal inAt={start + 0.95} y={30} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 86, lineHeight: 1.07, letterSpacing: '-0.025em', color: OW.text }}>
        Work with <span style={{ color: OW.accent }}>brilliant people.</span>
      </Reveal>
      <Reveal inAt={start + 1.5} y={30} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 86, lineHeight: 1.07, letterSpacing: '-0.025em', color: OW.faint }}>
        Never the cost of hiring.
      </Reveal>
      <Reveal inAt={start + 2.6} y={20} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: BODY, fontSize: 30, lineHeight: 1.5, color: OW.muted, maxWidth: 1080, marginTop: 44, fontWeight: 400 }}>
        In-house recruiters and agencies bill a fortune&nbsp;&mdash;{' '}
        <span style={{ color: OW.text, fontWeight: 500 }}>before a single hire ever lands.</span>
      </Reveal>
    </Scene>
  );
}

// ───────────────────────── Scene 3 — The hidden math ───────────────────
function CostCard({ label, number, desc, rows, highlight, inAt, countTo, countSuffix = '', countStart, countEnd, popAt }) {
  const accent = highlight ? OW.accent : OW.warm;
  const time = useTime();
  const pop = (highlight && popAt != null) ? Easing.easeOutCubic(clamp((time - popAt) / 0.8, 0, 1)) : 0;
  return (
    <Reveal inAt={inAt} y={40} dur={0.7} style={{ width: 452, position: 'relative', zIndex: highlight ? 2 : 1 }}>
      <div style={{
        padding: '40px 40px 36px',
        background: highlight ? `linear-gradient(180deg, rgba(53,224,161,${0.10 + 0.12 * pop}), rgba(53,224,161,0.02))` : OW.surface,
        border: `1px solid ${highlight ? `rgba(53,224,161,${0.45 + 0.45 * pop})` : OW.line}`,
        borderRadius: 22,
        boxShadow: highlight ? `0 0 0 1px rgba(53,224,161,${0.15 + 0.25 * pop}), 0 30px 80px -30px ${OW.accentGl}, 0 0 ${60 * pop}px ${8 * pop}px ${OW.accentGl}` : '0 24px 60px -40px rgba(0,0,0,0.8)',
        position: 'relative', overflow: 'hidden',
        transform: `scale(${1 + 0.05 * pop}) translateY(${-12 * pop}px)`,
        transformOrigin: 'center bottom', willChange: 'transform',
      }}>
      {highlight && (
        <div style={{ position: 'absolute', top: 26, right: 28, fontFamily: MONO, fontSize: 12, letterSpacing: '0.16em', color: OW.accent, textTransform: 'uppercase', border: `1px solid rgba(53,224,161,0.4)`, padding: '5px 10px', borderRadius: 99 }}>OneWay</div>
      )}
      <div style={{ fontFamily: BODY, fontSize: 19, fontWeight: 500, color: highlight ? OW.text : OW.muted, letterSpacing: '0.01em', marginBottom: 28 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', whiteSpace: 'nowrap', fontFamily: DISPLAY, fontWeight: 600, fontSize: countSuffix ? 62 : 78, letterSpacing: '-0.03em', color: accent, lineHeight: 1 }}>
        <CountUp from={0} to={countTo} start={countStart} end={countEnd} format={fmtUSD} />
        {countSuffix && <span style={{ fontSize: 30, marginLeft: 4, color: accent }}>{countSuffix}</span>}
      </div>
      <div style={{ fontFamily: BODY, fontSize: 19, color: OW.muted, marginTop: 16, lineHeight: 1.4, fontWeight: 400 }}>{desc}</div>
      <div style={{ height: 1, background: OW.line, margin: '28px 0 22px' }} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: BODY, fontSize: 18, color: OW.text, fontWeight: 400 }}>
            <span style={{ width: 7, height: 7, borderRadius: 99, background: accent, flexShrink: 0, opacity: highlight ? 1 : 0.7 }} />
            {r}
          </div>
        ))}
      </div>
      </div>
    </Reveal>
  );
}

function SceneHiddenMath({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 120px' }}>
      <div style={{ position: 'absolute', top: 150, left: 120 }}>
        <div style={{ marginBottom: 22 }}><Eyebrow inAt={start + 0.1}>The hidden math</Eyebrow></div>
        <Reveal inAt={start + 0.35} y={24} dur={0.7}
          style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 64, letterSpacing: '-0.025em', color: OW.text, lineHeight: 1.05 }}>
          Same $150K hire. <span style={{ color: OW.muted }}>Three very different bills.</span>
        </Reveal>
      </div>

      <div style={{ display: 'flex', gap: 36, justifyContent: 'center', marginTop: 120 }}>
        <CostCard
          inAt={start + 1.3} label="In-house recruiter" highlight={false}
          countTo={39000} countStart={start + 1.5} countEnd={start + 3.3}
          desc="Ramp + monthly burn, before a single hire"
          rows={['30–60 day ramp to productivity', '~$14.5K / mo fully loaded']} />
        <CostCard
          inAt={start + 1.6} label="Traditional agency" highlight={false}
          countTo={30000} countSuffix="–37.5K" countStart={start + 1.8} countEnd={start + 3.6}
          desc="20–25% placement fee on the hire"
          rows={['45–60 day time-to-fill', '20+ unscreened résumés']} />
        <CostCard
          inAt={start + 1.9} label="OneWay" highlight={true} popAt={start + 6.6}
          countTo={18000} countStart={start + 2.1} countEnd={start + 3.9}
          desc="12% of base, invoiced on the first day"
          rows={['First shortlist in 7 days', '$0 during the entire search']} />
      </div>

      <Reveal inAt={start + 5.4} y={18} dur={0.7} outAt={end - 0.5}
        style={{ position: 'absolute', bottom: 96, left: 0, right: 0, textAlign: 'center', fontFamily: BODY, fontSize: 26, color: OW.muted, fontWeight: 400 }}>
        Consultative work, interview design, and ATS hygiene? <span style={{ color: OW.accent, fontWeight: 500 }}>All free during the search.</span>
      </Reveal>
    </Scene>
  );
}

Object.assign(window, { GlobalBackground, SceneColdOpen, SceneProblem, SceneHiddenMath, CostCard });