// Scene 1: The Science of Garage Doors — Counterbalance
// Duration: 38s
// Story: 150-lb door + finger-push → hidden spring → force balance → payoff

function SceneCounterbalance() {
  return (
    <>
      <Backdrop />

      {/* ── Beat 1 (0–5.8s): The weight of the door ───────────────── */}
      <Sprite start={0} end={5.8}>
        <LabelChip text="Chapter 01 / The Science of Garage Doors" x={80} y={64} accent={COLORS.orange}/>
      </Sprite>

      <Sprite start={0.2} end={5.8}>
        {() => (
          <div style={{ position: 'absolute', left: 780, top: 170 }}>
            <DoorSchematic x={0} y={0} width={560} height={660} lift={0} showSpring={false} />
          </div>
        )}
      </Sprite>

      <Sprite start={0.8} end={5.8}>
        <Caption
          headline="A standard garage door weighs about"
          x={80} y={260} maxWidth={580} />
      </Sprite>

      <Sprite start={2.0} end={5.8}>
        <CountUp from={0} to={150} duration={1.6} x={80} y={500} suffix="lb" size={180} color={COLORS.orange}/>
      </Sprite>

      <Sprite start={4.0} end={5.8}>
        <Caption sub="Steel, insulation, and four hinged panels. Too heavy to lift by hand — in theory." x={80} y={720} maxWidth={560}/>
      </Sprite>

      {/* ── Beat 2 (6.1–12.6s): The finger-push test ─────────────── */}
      <Sprite start={6.1} end={12.6}>
        <Backdrop />
        <LabelChip text="Test 01 / Force required" x={80} y={64} accent={COLORS.orange}/>
      </Sprite>

      <Sprite start={6.1} end={12.6}>
        {() => (
          <div style={{ position: 'absolute', left: 780, top: 150 }}>
            <DoorSchematic x={0} y={0} width={620} height={720} lift={0} showSpring={false}/>
          </div>
        )}
      </Sprite>

      {/* Finger icon pressing down on the handle */}
      <Sprite start={7.0} end={12.6}>
        {({ localTime }) => {
          // finger pushes down, door doesn't budge, finger wiggles back
          const cycle = Math.sin(localTime * 2.5) * 6;
          return (
            <div style={{
              position: 'absolute',
              left: 1060, top: 600 + cycle,
              transform: 'rotate(180deg)',
              fontSize: 56,
              filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.5))',
            }}>
              <svg width="72" height="96" viewBox="0 0 60 80">
                <path d="M30 10 L30 55 M18 55 L42 55 L38 72 L22 72 Z"
                  fill={COLORS.ink} stroke={COLORS.bg} strokeWidth="1.5"/>
                <circle cx="30" cy="10" r="8" fill={COLORS.ink} stroke={COLORS.bg} strokeWidth="1.5"/>
              </svg>
            </div>
          );
        }}
      </Sprite>

      {/* Force arrow showing the 150 lbf the door presents */}
      <Sprite start={8.6} end={12.6}>
        <ForceArrow x={1090} y={560} length={110} dir="down"
          color={COLORS.danger} label="150 lbf ↓ gravity"/>
      </Sprite>

      <Sprite start={7.5} end={12.6}>
        <Caption
          headline="So how does it open?"
          sub="You lift it with one finger. Every day, without thinking."
          x={80} y={340} maxWidth={520}/>
      </Sprite>

      {/* ── Beat 3 (12.9–21s): Reveal the hidden spring ─────────────── */}
      <Sprite start={12.9} end={21}>
        <Backdrop />
        <LabelChip text="The hidden machine" x={80} y={64} accent={COLORS.orange}/>
      </Sprite>

      {/* Full door + spring, but camera "pans up" = spring area highlights */}
      <Sprite start={12.9} end={21}>
        {({ localTime }) => {
          // Camera pan simulation: overall SVG stays, but a highlight halo grows
          // around the header/spring area.
          const panPhase = clamp((localTime - 0.6) / 1.4, 0, 1);
          return (
            <div style={{ position: 'absolute', left: 760, top: 130 }}>
              <DoorSchematic
                x={0} y={0}
                width={640} height={760}
                lift={0}
                showSpring={true}
                springWind={localTime * 4}
              />
              {/* Pulsing halo around spring */}
              <div style={{
                position: 'absolute',
                left: -40, top: -40,
                width: 720, height: 140,
                borderRadius: '50%',
                background: `radial-gradient(ellipse, ${COLORS.orange}22 0%, transparent 70%)`,
                opacity: panPhase,
                pointerEvents: 'none',
              }}/>
            </div>
          );
        }}
      </Sprite>

      <Sprite start={14.0} end={21}>
        <Caption
          headline="A torsion spring lives above the door."
          sub="Wound to the exact tension it takes to lift that 150 pounds."
          x={80} y={320} maxWidth={560}/>
      </Sprite>

      <Sprite start={17.0} end={21}>
        <LabelChip text="← Torsion spring" x={880} y={175} color={COLORS.orange}/>
      </Sprite>

      <Sprite start={18.0} end={21}>
        <div style={{
          position: 'absolute', left: 80, top: 620,
          fontFamily: FONTS.mono, fontSize: 14, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: COLORS.inkDim,
        }}>
          Stored energy:&nbsp;
          <span style={{ color: COLORS.orange }}>~150 lbf of potential torque</span>
        </div>
      </Sprite>

      {/* ── Beat 4 (21.3–29.5s): The balance ─────────────── */}
      <Sprite start={21.3} end={29.5}>
        <Backdrop />
        <LabelChip text="Force diagram" x={80} y={64} accent={COLORS.orange}/>
      </Sprite>

      {/* Two force arrows on a balance beam illustration */}
      <Sprite start={21.3} end={29.5}>
        {({ localTime }) => {
          // A simple pivot point with two arrows: gravity down on left, spring torque up on right.
          // At the end, a small "= 0" appears in middle.
          return (
            <svg width="1100" height="520" viewBox="0 0 900 400" style={{
              position: 'absolute', left: 680, top: 300,
            }}>
              {/* Pivot */}
              <circle cx="450" cy="200" r="10" fill={COLORS.ink}/>
              <line x1="444" y1="210" x2="456" y2="210" stroke={COLORS.line}/>
              <polygon points="428,234 450,200 472,234" fill={COLORS.line}/>

              {/* Beam */}
              <rect x="80" y="195" width="740" height="10" fill={COLORS.ink} opacity="0.3"/>

              {/* LEFT side: weight of door */}
              <rect x="150" y="100" width="140" height="100" fill="url(#panel-grad)" stroke={COLORS.line}/>
              <text x="220" y="158" textAnchor="middle"
                fontFamily={FONTS.mono} fontSize="16" fill={COLORS.inkDim}>150 lb</text>

              {/* RIGHT side: spring torque */}
              <g transform="translate(580, 155)">
                <TorsionSpringCoils width={180} coils={11} wind={localTime * 6}/>
              </g>

              {/* Arrows */}
              <line x1="220" y1="200" x2="220" y2="300" stroke={COLORS.danger} strokeWidth="3.5"/>
              <polygon points="220,312 210,294 230,294" fill={COLORS.danger}/>
              <text x="240" y="265" fontFamily={FONTS.mono} fontSize="14"
                fill={COLORS.danger}>150 lbf DOWN</text>

              <line x1="670" y1="200" x2="670" y2="100" stroke={COLORS.success} strokeWidth="3.5"/>
              <polygon points="670,88 660,106 680,106" fill={COLORS.success}/>
              <text x="690" y="150" fontFamily={FONTS.mono} fontSize="14"
                fill={COLORS.success}>150 lbf UP</text>
            </svg>
          );
        }}
      </Sprite>

      <Sprite start={22.0} end={29.5}>
        <Caption
          headline="Weight pulls down. Spring pulls up."
          x={80} y={280} maxWidth={560}/>
      </Sprite>

      <Sprite start={25.0} end={29.5}>
        <div style={{
          position: 'absolute', left: 80, top: 470,
          fontFamily: FONTS.mono, fontSize: 14,
          letterSpacing: '0.08em', textTransform: 'uppercase', color: COLORS.inkDim,
        }}>
          Net force at rest
        </div>
      </Sprite>
      <Sprite start={25.7} end={29.5}>
        <div style={{
          position: 'absolute', left: 80, top: 500,
          fontFamily: FONTS.serif, fontSize: 160, color: COLORS.orange,
          lineHeight: 1, letterSpacing: '-0.02em',
        }}>
          ≈ 0
        </div>
      </Sprite>

      <Sprite start={27.5} end={29.5}>
        <div style={{
          position: 'absolute', left: 80, top: 740,
          maxWidth: 520,
          fontFamily: FONTS.sans, fontSize: 22, color: COLORS.inkDim, lineHeight: 1.5,
        }}>
          The door is weightless — until you touch it.
        </div>
      </Sprite>

      {/* ── Beat 5 (29.8–38s): Payoff — door lifts ─────────────── */}
      <Sprite start={29.8} end={38}>
        <Backdrop />
        <LabelChip text="Result" x={80} y={64} accent={COLORS.orange}/>
      </Sprite>

      <Sprite start={29.8} end={38}>
        {({ localTime }) => {
          const liftT = Easing.easeInOutCubic(clamp((localTime - 0.5) / 2.8, 0, 1));
          return (
            <div style={{ position: 'absolute', left: 780, top: 150 }}>
              <DoorSchematic
                x={0} y={0}
                width={620} height={720}
                lift={liftT}
                showSpring={true}
                springWind={localTime * 8 + liftT * 40}
              />
            </div>
          );
        }}
      </Sprite>

      {/* finger follows the door up */}
      <Sprite start={29.8} end={38}>
        {({ localTime }) => {
          const liftT = Easing.easeInOutCubic(clamp((localTime - 0.5) / 2.8, 0, 1));
          const dy = liftT * 560;
          return (
            <div style={{
              position: 'absolute',
              left: 1060, top: 620 - dy,
              transform: 'rotate(180deg)',
              transition: 'none',
            }}>
              <svg width="72" height="96" viewBox="0 0 60 80">
                <path d="M30 10 L30 55 M18 55 L42 55 L38 72 L22 72 Z"
                  fill={COLORS.ink} stroke={COLORS.bg} strokeWidth="1.5"/>
                <circle cx="30" cy="10" r="8" fill={COLORS.ink} stroke={COLORS.bg} strokeWidth="1.5"/>
              </svg>
            </div>
          );
        }}
      </Sprite>

      <Sprite start={30.6} end={38}>
        <Caption
          headline="One finger."
          x={80} y={320} maxWidth={500}/>
      </Sprite>
      <Sprite start={31.9} end={38}>
        <Caption
          headline="One hundred fifty pounds."
          x={80} y={420} maxWidth={560}/>
      </Sprite>
      <Sprite start={33.4} end={38}>
        <Caption
          headline="Counterbalanced."
          x={80} y={520} maxWidth={560}/>
      </Sprite>

      {/* ── Beat 6 (38.3–45.5s): Brand ───────────── */}
      <Sprite start={38.3} end={45.5}>
        <Backdrop />
        <BrandMark x={960} y={340} align="center" scale={1.5}/>
      </Sprite>
      <Sprite start={39.5} end={45.5}>
        <div style={{
          position: 'absolute', left: 960, top: 900,
          transform: 'translateX(-50%)',
          fontFamily: FONTS.mono, fontSize: 16, color: COLORS.inkDim,
          letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>
          Explore the interactive lab →
        </div>
      </Sprite>
    </>
  );
}

window.SceneCounterbalance = SceneCounterbalance;