// scenes-b.jsx — Scenes 4–6: Live ROI calculator, Why OneWay, CTA.

// ───────────────────── Scene 4 — Live ROI calculator ─────────────────────
// Geometry (canvas 1920×1080)
const CALC = {
  cardX: 290, cardY: 232, cardW: 1340, cardH: 616,
  trackX: 358, trackW: 472, trackY: 600,  // absolute, thumb travels here
  minSal: 80000, maxSal: 400000,
};

function salaryAt(t, start) {
  // hold 90K, drag 90K→150K between +1.5s and +3.7s
  const dragP = Easing.easeInOutCubic(clamp((t - (start + 1.5)) / 2.2, 0, 1));
  return 90000 + (150000 - 90000) * dragP;
}

function CalcCursor({ start }) {
  const t = useTime();
  const sal = salaryAt(t, start);
  const pct = (sal - CALC.minSal) / (CALC.maxSal - CALC.minSal);
  const thumbX = CALC.trackX + pct * CALC.trackW;

  // enter from lower-right toward the thumb's start position by +1.5s
  const enterP = Easing.easeOutCubic(clamp((t - (start + 0.7)) / 0.8, 0, 1));
  const startX = 1480, startY = 880;
  const x = enterP < 1 ? startX + (thumbX - startX) * enterP : thumbX;
  const y = enterP < 1 ? startY + (CALC.trackY - startY) * enterP : CALC.trackY;

  // exit lift after drag
  const exitP = Easing.easeInCubic(clamp((t - (start + 4.0)) / 0.7, 0, 1));
  const op = clamp(enterP, 0, 1) * (1 - exitP);
  const lift = exitP * 30;
  // click pulse at grab
  const grab = clamp(1 - Math.abs(t - (start + 1.5)) / 0.25, 0, 1);

  if (op <= 0.01) return null;
  return (
    <div style={{ position: 'absolute', left: x - 3, top: y - 3 - lift, opacity: op, willChange: 'transform, opacity', zIndex: 30 }}>
      {grab > 0.05 && (
        <div style={{ position: 'absolute', left: -14, top: -14, width: 36, height: 36, borderRadius: 99, border: `2px solid ${OW.accent}`, opacity: grab * 0.7, transform: `scale(${1 + grab * 0.6})` }} />
      )}
      <svg width="28" height="32" viewBox="0 0 28 32" fill="none" style={{ filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.5))' }}>
        <path d="M3 2 L3 24 L9 18.5 L13 27 L17 25 L13 16.5 L21 16 Z" fill="#fff" stroke={OW.ink} strokeWidth="1.6" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function OutputRow({ label, sub, value, accent, big, pulse = 0 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: big ? '26px 30px' : '20px 30px', borderRadius: 16, background: big ? 'linear-gradient(180deg, rgba(53,224,161,0.12), rgba(53,224,161,0.03))' : OW.surface2, border: `1px solid ${big ? `rgba(53,224,161,${0.4 + 0.5 * pulse})` : OW.lineSoft}`, transform: `scale(${1 + 0.045 * pulse})`, transformOrigin: 'center', boxShadow: big ? `0 0 ${40 * pulse}px ${4 * pulse}px ${OW.accentGl}` : 'none', willChange: 'transform' }}>
      <div>
        <div style={{ fontFamily: BODY, fontSize: big ? 22 : 19, fontWeight: 600, color: big ? OW.text : OW.text }}>{label}</div>
        <div style={{ fontFamily: BODY, fontSize: 15, color: OW.faint, marginTop: 4, fontWeight: 400 }}>{sub}</div>
      </div>
      <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: big ? 52 : 34, letterSpacing: '-0.02em', color: accent, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}

function SceneCalculator({ start, end }) {
  const t = useTime();
  const sal = salaryAt(t, start);
  const pct = (sal - CALC.minSal) / (CALC.maxSal - CALC.minSal);
  const thumbX = CALC.trackX + pct * CALC.trackW;

  const oneway = 0.12 * sal;
  const agencyLo = 0.20 * sal, agencyHi = 0.25 * sal;
  const inhouse = 39000;
  const save = 0.225 * sal - 0.12 * sal;

  // Punch when the savings figure lands (drag ends ~start+3.7)
  const sinceLand = t - (start + 3.85);
  const punch = sinceLand >= 0 ? Math.exp(-sinceLand * 3.2) : clamp(1 + sinceLand / 0.2, 0, 1) * 0.4;

  const marks = [100, 150, 200, 250, 300];

  return (
    <Scene start={start} end={end}>
      <div style={{ position: 'absolute', top: 120, left: 290 }}>
        <div style={{ marginBottom: 18 }}><Eyebrow inAt={start + 0.1}>See the math live</Eyebrow></div>
        <Reveal inAt={start + 0.3} y={20} dur={0.6}
          style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 52, letterSpacing: '-0.025em', color: OW.text }}>
          What will your next hire actually cost?
        </Reveal>
      </div>

      <Reveal inAt={start + 0.5} y={36} dur={0.7} outAt={end - 0.5} style={{
        position: 'absolute', left: CALC.cardX, top: CALC.cardY, width: CALC.cardW, height: CALC.cardH,
        background: 'linear-gradient(180deg, rgba(24,30,41,0.97), rgba(17,21,30,0.97))',
        border: `1px solid ${OW.line}`, borderRadius: 26, padding: 0,
        boxShadow: '0 40px 100px -40px rgba(0,0,0,0.9)', display: 'flex', overflow: 'hidden',
      }}>
        {/* Left — input */}
        <div style={{ width: 600, padding: '52px 56px', borderRight: `1px solid ${OW.lineSoft}`, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: MONO, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: OW.faint }}>Your next hire</div>
          <div style={{ fontFamily: BODY, fontSize: 20, color: OW.muted, marginTop: 30, fontWeight: 400 }}>Annual base salary</div>
          <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 84, letterSpacing: '-0.03em', color: OW.text, lineHeight: 1.05, marginTop: 4 }}>
            {fmtUSD(sal)}
          </div>

          {/* slider */}
          <div style={{ position: 'relative', marginTop: 38, height: 8 }}>
            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 8, borderRadius: 99, background: OW.surface2 }} />
            <div style={{ position: 'absolute', left: 0, width: `${pct * 100}%`, top: 0, height: 8, borderRadius: 99, background: `linear-gradient(90deg, ${OW.accentDp}, ${OW.accent})` }} />
            <div style={{ position: 'absolute', left: `${pct * 100}%`, top: 4, width: 26, height: 26, marginLeft: -13, marginTop: -13, borderRadius: 99, background: '#fff', boxShadow: `0 0 0 4px ${OW.accentGl}, 0 4px 10px rgba(0,0,0,0.4)` }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 18, fontFamily: MONO, fontSize: 13, color: OW.faint }}>
            <span>$80K</span><span>$400K</span>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 26 }}>
            {marks.map((m) => (
              <div key={m} style={{ flex: 1, textAlign: 'center', padding: '9px 0', borderRadius: 9, fontFamily: BODY, fontSize: 15, fontWeight: 500,
                background: Math.round(sal / 1000) === m ? 'rgba(53,224,161,0.16)' : OW.surface2,
                color: Math.round(sal / 1000) === m ? OW.accent : OW.muted,
                border: `1px solid ${Math.round(sal / 1000) === m ? 'rgba(53,224,161,0.4)' : 'transparent'}` }}>${m}K</div>
            ))}
          </div>
          <div style={{ flex: 1 }} />
          <Reveal inAt={start + 4.4} y={10} dur={0.6} style={{ fontFamily: BODY, fontSize: 14, color: OW.faint, lineHeight: 1.55, fontWeight: 400, maxWidth: 460 }}>
            12% first IC hire · 8% subsequent · 15% manager &amp; above, all on starting base. Estimates only.
          </Reveal>
        </div>

        {/* Right — outputs */}
        <div style={{ flex: 1, padding: '44px 48px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <OutputRow label="OneWay Recruiting" sub="12% of base · $0 until first day" value={fmtUSD(oneway)} accent={OW.accent} />
          <OutputRow label="Traditional agency" sub="20–25% placement fee" value={`${fmtUSD(agencyLo)}–${fmtUSD(agencyHi)}`} accent={OW.warm} />
          <OutputRow label="In-house recruiter" sub="~$15K ramp + monthly burn" value={`~${fmtUSD(inhouse)}`} accent={OW.warm} />
          <div style={{ flex: 1 }} />
          <OutputRow big pulse={punch} label="You save vs. an agency" sub="On this single hire" value={fmtUSD(save)} accent={OW.accent} />
        </div>
      </Reveal>

      <CalcCursor start={start} />
    </Scene>
  );
}

// ───────────────────────── Scene 5 — Why OneWay ───────────────────────
function BigStat({ value, label, inAt, accent }) {
  return (
    <Reveal inAt={inAt} y={28} dur={0.7} style={{ flex: 1 }}>
      <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 76, letterSpacing: '-0.03em', color: accent || OW.text, lineHeight: 1 }}>{value}</div>
      <div style={{ width: 32, height: 2, background: OW.accent, margin: '20px 0 16px' }} />
      <div style={{ fontFamily: BODY, fontSize: 19, color: OW.muted, lineHeight: 1.4, fontWeight: 400, maxWidth: 280 }}>{label}</div>
    </Reveal>
  );
}

function SceneWhy({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 150px' }}>
      <div style={{ marginBottom: 26 }}><Eyebrow inAt={start + 0.1}>Why OneWay</Eyebrow></div>
      <Reveal inAt={start + 0.35} y={28} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 96, letterSpacing: '-0.03em', color: OW.text, lineHeight: 1.02 }}>
        Not a vendor. <span style={{ color: OW.accent }}>An operator.</span>
      </Reveal>
      <Reveal inAt={start + 1.0} y={20} dur={0.7} outAt={end - 0.5}
        style={{ fontFamily: BODY, fontSize: 28, lineHeight: 1.5, color: OW.muted, maxWidth: 1140, marginTop: 36, fontWeight: 400 }}>
        You work with <span style={{ color: OW.text, fontWeight: 600 }}>Chris Waye</span> directly&nbsp;&mdash; an operator who built recruiting from the ground up inside high-growth startups, <span style={{ color: OW.text, fontWeight: 500 }}>Series&nbsp;A to IPO</span>. Not another agency recruiter forwarding résumés&nbsp;&mdash; the person who&rsquo;s already sat in your chair.
      </Reveal>

      <div style={{ display: 'flex', gap: 48, marginTop: 84 }}>
        <BigStat inAt={start + 1.8} value="20 days" label="Average time-to-fill. Industry average is 45." />
        <BigStat inAt={start + 2.05} value="95%" label="Offer close rate" />
        <BigStat inAt={start + 2.3} value="100%" label="Retention across 40+ placements" />
        <BigStat inAt={start + 2.55} value="$0" accent={OW.accent} label="Until you hire. Invoiced on day one, payable Net 30." />
      </div>
    </Scene>
  );
}

// ───────────────────────── Scene 6 — CTA ───────────────────────
function SceneCTA({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <Reveal inAt={start + 0.2} y={0} dur={0.5}><Wordmark size={58} inAt={start + 0.2} /></Reveal>
      <div style={{ height: 40 }} />
      <Reveal inAt={start + 0.5} y={28} dur={0.7}
        style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 104, letterSpacing: '-0.03em', color: OW.text, textAlign: 'center', lineHeight: 1.02 }}>
        Let&rsquo;s jump on a call.
      </Reveal>
      <Reveal inAt={start + 1.1} y={18} dur={0.7}
        style={{ fontFamily: BODY, fontSize: 30, color: OW.muted, marginTop: 30, textAlign: 'center', fontWeight: 400 }}>
        The first conversation is always free. <span style={{ color: OW.accent, fontWeight: 500 }}>Pay only when you hire.</span>
      </Reveal>
      <Reveal inAt={start + 1.7} y={20} dur={0.7} style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 56 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '20px 34px', borderRadius: 99, background: OW.accent, color: OW.ink, fontFamily: BODY, fontSize: 24, fontWeight: 600 }}>
          Book a 30-minute call
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M4 11h13M12 6l5 5-5 5" stroke={OW.ink} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </Reveal>
      <Reveal inAt={start + 2.1} y={14} dur={0.7}
        style={{ fontFamily: MONO, fontSize: 18, color: OW.faint, marginTop: 30, letterSpacing: '0.04em' }}>
        onewayrecruiting.com&nbsp;&nbsp;·&nbsp;&nbsp;christopher.waye@onewayrecruiting.com
      </Reveal>
    </Scene>
  );
}

// ───────────────────── Scene 5b — How it works (4 steps) ─────────────────────
function SlackMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 127 127" style={{ display: 'block', flexShrink: 0 }}>
      <path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80z" fill="#E01E5A" />
      <path d="M33.8 80c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" fill="#E01E5A" />
      <path d="M47 27.2c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.7 39.7.8 47 .8c7.3 0 13.2 5.9 13.2 13.2v13.2H47z" fill="#36C5F0" />
      <path d="M47 33.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H14C6.7 60.2.8 54.3.8 47c0-7.3 5.9-13.2 13.2-13.2h33z" fill="#36C5F0" />
      <path d="M99.8 47c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.8V47z" fill="#2EB67D" />
      <path d="M93.2 47c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V14c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33z" fill="#2EB67D" />
      <path d="M80 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8H80z" fill="#ECB22E" />
      <path d="M80 93.2c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80z" fill="#ECB22E" />
    </svg>
  );
}

function IntegrationChip({ children, mark }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '10px 16px', borderRadius: 11, background: OW.surface2, border: `1px solid ${OW.line}`, fontFamily: BODY, fontSize: 19, fontWeight: 500, color: OW.text, whiteSpace: 'nowrap' }}>
      {mark}{children}
    </div>
  );
}

function StepItem({ num, title, desc, inAt, chips }) {
  return (
    <Reveal inAt={inAt} y={32} dur={0.7} style={{ flex: 1 }}>
      <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 50, color: OW.accent, letterSpacing: '0.02em' }}>{num}</div>
      <div style={{ width: '100%', height: 1, background: OW.line, margin: '22px 0 26px' }} />
      <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 46, letterSpacing: '-0.02em', color: OW.text, lineHeight: 1.1 }}>{title}</div>
      <div style={{ fontFamily: BODY, fontSize: 26, color: OW.muted, lineHeight: 1.5, marginTop: 18, fontWeight: 400 }}>{desc}</div>
      {chips && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 11, marginTop: 24 }}>{chips}</div>
      )}
    </Reveal>
  );
}

function SceneSteps({ start, end }) {
  return (
    <Scene start={start} end={end} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 130px' }}>
      <div style={{ position: 'absolute', top: 150, left: 130 }}>
        <div style={{ marginBottom: 20 }}><Eyebrow inAt={start + 0.1}>How it works</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 }}>
          Four steps. <span style={{ color: OW.muted }}>That&rsquo;s the whole process.</span>
        </Reveal>
      </div>

      <div style={{ display: 'flex', gap: 44, alignItems: 'flex-start', marginTop: 56 }}>
        <StepItem inAt={start + 0.8} num="01" title="Jump on a call"
          desc="A 15-minute call to walk through the role and get to know your culture." />
        <StepItem inAt={start + 1.1} num="02" title="Review your shortlist"
          desc="Hand-sourced résumés within 7 days to review and calibrate on — signal, not noise." />
        <StepItem inAt={start + 1.4} num="03" title="We run scheduling"
          desc="Interview scheduling for every candidate, wired straight into your stack:"
          chips={[
            <IntegrationChip key="s" mark={<SlackMark />}>Slack</IntegrationChip>,
            <IntegrationChip key="r">Rippling</IntegrationChip>,
            <IntegrationChip key="g">Greenhouse</IntegrationChip>,
            <IntegrationChip key="a">+ your ATS</IntegrationChip>,
          ]} />
        <StepItem inAt={start + 1.7} num="04" title="Interview & hire"
          desc="You meet the best, make the call, and hire. You only pay once they start." />
      </div>
    </Scene>
  );
}

Object.assign(window, { SceneCalculator, SceneWhy, SceneSteps, SceneCTA });