// ContractFill — "How it works" film · Scenes 1–3
// S1 0–4    Title: write an offer in 5 minutes, not 30
// S2 4–9.5  Step 01: paste a link, property fills itself in
// S3 9.5–14.5 Step 02: talk it through

// ── Scene 1 · title beat ────────────────────────────────────────────────────
function HIWScene1() {
  const t = useLocal();
  // strike-through draws across "30 minutes" at 2.0s
  const strike = ease01(t, 2.0, 0.5, Easing.easeInOutCubic);
  const goldP = ease01(t, 1.1, 0.55, Easing.easeOutBack);
  return (
    <SceneFade outDur={0.45}>
      <SceneBG />
      <Camera from={1} to={1.05} origin="50% 46%">
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <In at={0.15} dur={0.55} dy={18}>
            <div style={{ fontFamily: HIW.mono, fontSize: 24, letterSpacing: '0.26em', textTransform: 'uppercase', color: HIW.goldMid }}>
              ContractFill · The agent workflow
            </div>
          </In>
          <In at={0.5} dur={0.6} dy={34}>
            <div style={{ fontFamily: HIW.serif, fontWeight: 700, fontSize: 108, lineHeight: 1.05, color: '#fff', marginTop: 44, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
              Write an offer in
            </div>
          </In>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 56, marginTop: 10, whiteSpace: 'nowrap' }}>
            <span style={{
              fontFamily: HIW.serif, fontWeight: 700, fontSize: 124, color: HIW.goldMid,
              display: 'inline-block', opacity: Math.min(1, goldP),
              transform: `scale(${0.6 + 0.4 * goldP})`, transformOrigin: 'center bottom',
            }}>5 minutes,</span>
            <span style={{ fontFamily: HIW.serif, fontWeight: 300, fontSize: 108, color: 'rgba(255,255,255,0.55)', opacity: ease01(t, 1.55, 0.4) }}>
              not&nbsp;
              <span style={{ position: 'relative', display: 'inline-block' }}>
                30.
                <span style={{
                  position: 'absolute', left: '-4%', top: '52%', height: 7, borderRadius: 4,
                  width: `${strike * 108}%`, background: HIW.goldGrad,
                }}></span>
              </span>
            </span>
          </div>
          <In at={2.5} dur={0.6} dy={16}>
            <div style={{ fontFamily: HIW.sans, fontWeight: 300, fontSize: 31, color: 'rgba(255,255,255,0.75)', marginTop: 54 }}>
              One deal, start to close — in six steps.
            </div>
          </In>
        </div>
      </Camera>
    </SceneFade>
  );
}

// ── Scene 2 · paste a link ──────────────────────────────────────────────────
function HIWScene2() {
  return (
    <SceneFade>
      <SceneBG />
      <Camera from={1} to={1.05} origin="68% 40%">
        <StepCaption num="01" label="Start the deal" title={<span>Paste a link. The property <span style={{ color: HIW.goldMid }}>fills itself in.</span></span>} />
        <BrowserWin url="contractfill.ca/deals/new" x={800} y={230} w={980} h={620}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, border: `1.5px solid ${HIW.warmBorder}`, borderRadius: 14, padding: '20px 24px', background: HIW.beige, fontFamily: HIW.mono, fontSize: 23, color: HIW.muted }}>
            <span style={{ width: 38, height: 38, borderRadius: 10, background: HIW.navy800, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flex: 'none' }}>🔗</span>
            <TypeText text="realtor.ca/listing/A2098441" at={1.0} cps={20} />
          </div>
          <In at={2.7} dur={0.4} dy={8}>
            <div style={{ fontFamily: HIW.mono, fontSize: 17, color: HIW.goldDark, margin: '20px 4px 14px', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              ✦ Pulling listing details…
            </div>
          </In>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <FieldCard k="Property" v="14 Maple Cres SW" at={3.1} />
            <FieldCard k="List price" v="$629,900" at={3.35} />
            <FieldCard k="Legal · Lot" v="Plan 0712, Lot 14" at={3.6} />
            <FieldCard k="Seller brokerage" v="Royal LePage" at={3.85} />
          </div>
          <In at={4.4} dur={0.45} dy={10}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24, fontSize: 21, color: HIW.muted, fontFamily: HIW.sans }}>
              <span style={{ width: 30, height: 30, borderRadius: '50%', background: HIW.ok, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700 }}>✓</span>
              No retyping off a PDF. Ever.
            </div>
          </In>
        </BrowserWin>
      </Camera>
    </SceneFade>
  );
}

// ── Scene 3 · talk it through ───────────────────────────────────────────────
function HIWScene3() {
  const t = useLocal();
  return (
    <SceneFade>
      <SceneBG />
      <Camera from={1} to={1.05} origin="64% 48%">
        <StepCaption num="02" label="Talk it through" title={<span>Describe the deal <span style={{ color: HIW.goldMid }}>like you&rsquo;d tell your assistant.</span></span>} />
        <BrowserWin url="new deal · interview" x={800} y={240} w={980} h={600}>
          <Bubble kind="q" at={0.7}>Tell me about the offer.</Bubble>
          {t < 2.6 ? <TypingDots at={1.4} until={2.6} /> : null}
          {t >= 2.6 ? (
            <Bubble kind="a" at={2.6}>
              Buyers are T. and P. Stark. <b>$615,000</b>, $20k deposit, financing and inspection conditions. Close Saturday, April 11.
            </Bubble>
          ) : null}
          <Bubble kind="q" at={4.0}>Got it. Generating your offer now.</Bubble>
          <In at={4.4} dur={0.4} dy={8} style={{ position: 'absolute', bottom: 28, left: 30, right: 30 }}>
            <div style={{ fontFamily: HIW.mono, fontSize: 17, color: HIW.mutedLight, textAlign: 'center' }}>
              Plain language in · finished offer out
            </div>
          </In>
        </BrowserWin>
      </Camera>
    </SceneFade>
  );
}

Object.assign(window, { HIWScene1, HIWScene2, HIWScene3 });