// ContractFill — "How it works" film · Scenes 4–6 + film assembly
// S4 14.5–19.5 Step 03: it catches what's wrong
// S5 19.5–25   Step 04+05: one click → signature-ready → DocuSign
// S6 25–30     Step 06: track to close → end card

// ── Scene 4 · it catches what's wrong ───────────────────────────────────────
function HIWScene4() {
  return (
    <SceneFade>
      <SceneBG />
      <Camera from={1} to={1.05} origin="66% 44%">
        <StepCaption num="03" label="It catches what’s wrong" title={<span>It pushes back <span style={{ color: HIW.goldMid }}>before a mistake ships.</span></span>} />
        <BrowserWin url="new deal · review" x={800} y={210} w={980} h={660}>
          <Bubble kind="flag" at={0.7}>
            <b style={{ color: HIW.goldDark }}>Heads up.</b> April 11, 2026 is a <b>Saturday</b>. Completion moved to Monday, April 13.
          </Bubble>
          <div style={{ marginTop: 30 }}>
            <Meter at={1.7} dur={1.5} from={62} to={100} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 28 }}>
            <CheckRow at={3.0}>Deposit method confirmed</CheckRow>
            <CheckRow at={3.35}>Expiry time set · 9:00 PM</CheckRow>
          </div>
          <In at={3.9} dur={0.45} dy={8}>
            <div style={{ fontFamily: HIW.mono, fontSize: 17, color: HIW.mutedLight, textAlign: 'center', marginTop: 26 }}>
              It will not generate a contract with a field missing.
            </div>
          </In>
        </BrowserWin>
      </Camera>
    </SceneFade>
  );
}

// ── Scene 5 · one click → signatures ────────────────────────────────────────
function HIWScene5() {
  const t = useLocal();
  const clicked = t >= 1.7;
  const genP = ease01(t, 1.85, 0.9, Easing.easeInOutCubic);
  const ready = t >= 2.9;
  return (
    <SceneFade>
      <SceneBG />
      <Camera from={1} to={1.055} origin="64% 46%">
        <StepCaption num="04" label="File · sign" title={<span>One click. <span style={{ color: HIW.goldMid }}>Out for signature.</span></span>} />
        <BrowserWin url="new deal · generate" x={800} y={220} w={980} h={640}>
          {/* generate button → progress → ready */}
          <div style={{
            position: 'relative', borderRadius: 16, overflow: 'hidden',
            background: ready ? '#fff' : HIW.goldGrad,
            border: ready ? `1.5px solid ${HIW.warmBorder}` : '1.5px solid transparent',
            boxShadow: ready ? 'none' : '0 12px 30px rgba(170,119,28,0.35)',
            padding: '22px 26px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
            transform: clicked && t < 1.88 ? 'scale(0.97)' : 'scale(1)',
          }}>
            {!ready ? (
              <span style={{ color: '#fff', fontWeight: 600, fontSize: 27, fontFamily: HIW.sans }}>
                {clicked ? 'Generating offer…' : '⚡ Generate offer'}
              </span>
            ) : (
              <Pop at={2.9} dur={0.4} from={0.94} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 38, height: 38, borderRadius: '50%', background: HIW.ok, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 700 }}>✓</span>
                <span style={{ fontSize: 26, fontWeight: 600, color: HIW.ink, fontFamily: HIW.sans }}>Offer ready · 11 pages</span>
              </Pop>
            )}
            {clicked && !ready ? (
              <div style={{ position: 'absolute', left: 0, bottom: 0, height: 7, width: `${genP * 100}%`, background: 'rgba(255,255,255,0.85)' }}></div>
            ) : null}
          </div>

          <In at={3.2} dur={0.4} dy={8}>
            <div style={{ fontFamily: HIW.mono, fontSize: 17, color: HIW.goldDark, margin: '22px 4px 14px', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              ✦ Sent to DocuSign
            </div>
          </In>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
            <SigRow initials="TS" name="T. Stark" role="Buyer" status={t >= 4.6 ? 'signed' : 'sent'} at={3.5} />
            <SigRow initials="PS" name="P. Stark" role="Buyer" status="awaiting" at={3.75} />
          </div>

          <Cursor
            frames={[
              { t: 0.6, x: 880, y: 640 },
              { t: 1.6, x: 500, y: 56 },
              { t: 2.4, x: 520, y: 70 },
            ]}
            clickAt={1.7}
          />
        </BrowserWin>
      </Camera>
    </SceneFade>
  );
}

// ── Scene 6 · track to close → end card ─────────────────────────────────────
function HIWScene6() {
  const t = useLocal();
  const toCard = ease01(t, 2.5, 0.55, Easing.easeInOutCubic); // crossfade to end card
  return (
    <SceneFade outDur={0.01}>
      <SceneBG />
      {/* track-to-close beat */}
      <div style={{ position: 'absolute', inset: 0, opacity: 1 - toCard }}>
        <Camera from={1} to={1.04} origin="62% 44%">
          <StepCaption num="06" label="Track it in one spot" title={<span>Every deadline, <span style={{ color: HIW.goldMid }}>watched for you.</span></span>} at={0.1} />
          <BrowserWin url="deal · conditions" x={800} y={210} w={980} h={620} at={0.15}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <CheckRow at={0.5} color={HIW.gold} icon="$" sub="Due Apr 5" mono="5 days">Financing</CheckRow>
              <CheckRow at={0.8} color={t >= 1.7 ? HIW.ok : HIW.gold} icon={t >= 1.7 ? '✓' : '⌂'} sub={t >= 1.7 ? 'Satisfied Apr 2' : 'Booked Apr 2'} mono={t >= 1.7 ? 'done' : 'booked'}>Home inspection</CheckRow>
              <CheckRow at={1.1} color={HIW.navy600} icon="✎" sub="Apr 13" mono="on track">Closing</CheckRow>
            </div>
          </BrowserWin>
        </Camera>
      </div>

      {/* end card */}
      {t >= 2.5 ? (
        <div style={{ position: 'absolute', inset: 0, opacity: toCard, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <In at={2.7} dur={0.55} dy={20}>
            <div style={{ fontFamily: HIW.serif, fontWeight: 700, fontSize: 60, color: '#fff' }}>
              Contract<span style={{ color: HIW.goldMid }}>Fill</span>
            </div>
            <div style={{ fontFamily: HIW.mono, fontSize: 17, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 12 }}>
              AI for Alberta real estate
            </div>
          </In>
          <In at={3.0} dur={0.6} dy={28}>
            <div style={{ fontFamily: HIW.serif, fontWeight: 700, fontSize: 88, lineHeight: 1.05, color: '#fff', marginTop: 52, whiteSpace: 'nowrap' }}>
              Stop filling. <span style={{ color: HIW.goldMid }}>Start closing.</span>
            </div>
          </In>
          <Pop at={3.5} dur={0.55} from={0.85}>
            <div style={{ marginTop: 56, background: HIW.goldGrad, color: '#fff', fontSize: 30, fontWeight: 600, fontFamily: HIW.sans, padding: '24px 58px', borderRadius: 16, boxShadow: '0 18px 44px rgba(170,119,28,0.4)' }}>
              Start your 60-day free trial
            </div>
          </Pop>
          <In at={3.9} dur={0.5} dy={10}>
            <div style={{ fontFamily: HIW.mono, fontSize: 23, color: 'rgba(255,255,255,0.62)', marginTop: 40, letterSpacing: '0.06em' }}>
              ▪ contractfill.ca
            </div>
          </In>
        </div>
      ) : null}
    </SceneFade>
  );
}

// ── film assembly ───────────────────────────────────────────────────────────
const HIW_DURATION = 30;

function HIWFilm() {
  const { time } = useTimeline();
  return (
    <div data-screen-label={`film t=${Math.floor(time)}s`} style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: HIW.navy900, fontFamily: HIW.sans }}>
      <Sprite start={0} end={4}><HIWScene1 /></Sprite>
      <Sprite start={4} end={9.5}><HIWScene2 /></Sprite>
      <Sprite start={9.5} end={14.5}><HIWScene3 /></Sprite>
      <Sprite start={14.5} end={19.5}><HIWScene4 /></Sprite>
      <Sprite start={19.5} end={25}><HIWScene5 /></Sprite>
      <Sprite start={25} end={30.01}><HIWScene6 /></Sprite>
    </div>
  );
}

Object.assign(window, { HIWScene4, HIWScene5, HIWScene6, HIWFilm, HIW_DURATION });