// Scene 1: Hook — homeowner hears something off (0 - 5s)
// A stylized garage interior. A subtle "thunk" visualized as shake + sound-ring.
// Then a thought bubble: "Is my garage door okay?"

function Scene1_Hook({ start = 0, end = 5 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, progress }) => {
        // Camera: slow push-in on the door
        const camScale = 1 + progress * 0.08;

        // Thunk moment at ~1.2s
        const thunkT = localTime - 1.1;
        const shake = thunkT > 0 && thunkT < 0.5
          ? Math.sin(thunkT * 60) * (1 - thunkT / 0.5) * 4
          : 0;

        // Ring pulse from the door
        const ringT = clamp((localTime - 1.15) / 1.4, 0, 1);
        const ringOpacity = ringT > 0 && ringT < 1 ? (1 - ringT) * 0.5 : 0;
        const ringScale = 0.4 + ringT * 1.8;

        // Text fades near the end
        const textOpacity = clamp((localTime - 2.2) / 0.6, 0, 1) * clamp((end - start - localTime) / 0.8, 0, 1);
        const textY = (1 - Easing.easeOutCubic(clamp((localTime - 2.2) / 0.6, 0, 1))) * 14;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, oklch(0.94 0.02 75) 0%, oklch(0.88 0.03 70) 100%)',
            transform: `scale(${camScale}) translateX(${shake}px)`,
            transformOrigin: 'center 60%',
            overflow: 'hidden',
          }}>
            {/* Concrete floor */}
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0, height: '30%',
              background: 'linear-gradient(180deg, oklch(0.78 0.015 70) 0%, oklch(0.68 0.012 65) 100%)',
            }}/>
            {/* Floor line */}
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: '30%',
              height: 2, background: 'oklch(0.55 0.02 60)', opacity: 0.4,
            }}/>

            {/* The garage door (stylized panels) */}
            <StylizedDoor x={560} y={170} width={800} height={460} shake={shake} />

            {/* Sound rings from door */}
            {ringOpacity > 0 && (
              <>
                <div style={{
                  position: 'absolute',
                  left: 960, top: 400,
                  width: 200, height: 200,
                  marginLeft: -100, marginTop: -100,
                  border: '3px solid oklch(0.55 0.16 35)',
                  borderRadius: '50%',
                  opacity: ringOpacity,
                  transform: `scale(${ringScale})`,
                }}/>
                <div style={{
                  position: 'absolute',
                  left: 960, top: 400,
                  width: 200, height: 200,
                  marginLeft: -100, marginTop: -100,
                  border: '2px solid oklch(0.55 0.16 35)',
                  borderRadius: '50%',
                  opacity: ringOpacity * 0.7,
                  transform: `scale(${ringScale * 0.6})`,
                }}/>
              </>
            )}

            {/* Small homeowner silhouette — right side, looking up */}
            <HomeownerSilhouette x={1540} y={500} />

            {/* GDS wordmark — bottom-left of Scene 1 (fills red placeholder) */}
            <div style={{
              position: 'absolute',
              left: 140, top: 520,
              display: 'flex', alignItems: 'center', gap: 14,
              opacity: clamp((localTime - 2.8) / 0.6, 0, 1),
            }}>
              <img src="assets/gds-icon.png" alt=""
                style={{ width: 56, height: 56, objectFit: 'contain' }}/>
              <div style={{
                fontFamily: "'Work Sans', system-ui, sans-serif",
                fontSize: 22, fontWeight: 500,
                color: 'oklch(0.30 0.02 50)',
                letterSpacing: '0.01em',
                lineHeight: 1.1,
              }}>
                Garage Door<br/>
                <span style={{ color: 'oklch(0.52 0.12 230)', fontWeight: 600 }}>Science</span>
              </div>
            </div>

            {/* Thought bubble text */}
            <div style={{
              position: 'absolute',
              left: 140, top: 140,
              opacity: textOpacity,
              transform: `translateY(${textY}px)`,
            }}>
              <div style={{
                fontFamily: "'Work Sans', system-ui, sans-serif",
                fontSize: 22, fontWeight: 500,
                color: 'oklch(0.45 0.04 50)',
                letterSpacing: '0.14em',
                textTransform: 'uppercase',
                marginBottom: 16,
              }}>
                · Tuesday morning ·
              </div>
              <div style={{
                fontFamily: "'Fraunces', 'Work Sans', serif",
                fontSize: 88, fontWeight: 500,
                color: 'oklch(0.22 0.03 50)',
                lineHeight: 1.02,
                letterSpacing: '-0.02em',
                maxWidth: 700,
              }}>
                That <em style={{ fontStyle: 'italic', color: 'oklch(0.48 0.16 35)' }}>didn't</em><br/>
                sound right.
              </div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

function StylizedDoor({ x, y, width, height, shake }) {
  const panelH = height / 4;
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width, height,
      transform: `translateX(${shake * 0.3}px)`,
    }}>
      {/* Door frame */}
      <div style={{
        position: 'absolute', inset: -10,
        border: '10px solid oklch(0.38 0.015 60)',
        borderBottom: 'none',
        borderRadius: '4px 4px 0 0',
      }}/>
      {/* Door body */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'oklch(0.92 0.01 70)',
        borderRadius: 2,
        boxShadow: 'inset 0 -40px 80px rgba(0,0,0,0.06)',
      }}>
        {[0, 1, 2, 3].map(i => (
          <div key={i} style={{
            position: 'absolute',
            left: 0, right: 0,
            top: i * panelH,
            height: panelH,
            borderBottom: i < 3 ? '2px solid oklch(0.72 0.015 65)' : 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-around',
            padding: '0 40px',
          }}>
            {/* Window row on top panel */}
            {i === 0 && [0, 1, 2, 3].map(w => (
              <div key={w} style={{
                width: 120, height: panelH * 0.6,
                background: 'linear-gradient(180deg, oklch(0.82 0.03 230) 0%, oklch(0.88 0.02 220) 100%)',
                border: '3px solid oklch(0.55 0.015 60)',
                borderRadius: 2,
              }}/>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeownerSilhouette({ x, y }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
    }}>
      <svg width="120" height="200" viewBox="0 0 120 200">
        {/* Head */}
        <circle cx="60" cy="30" r="22" fill="oklch(0.35 0.02 50)" />
        {/* Body */}
        <path d="M 30 60 Q 30 55 36 55 L 84 55 Q 90 55 90 60 L 96 140 Q 98 150 90 150 L 30 150 Q 22 150 24 140 Z"
          fill="oklch(0.42 0.05 35)" />
        {/* Arms */}
        <rect x="22" y="62" width="12" height="60" rx="6" fill="oklch(0.42 0.05 35)" />
        <rect x="86" y="62" width="12" height="60" rx="6" fill="oklch(0.42 0.05 35)" />
        {/* Legs */}
        <rect x="36" y="148" width="18" height="50" rx="3" fill="oklch(0.28 0.03 50)" />
        <rect x="66" y="148" width="18" height="50" rx="3" fill="oklch(0.28 0.03 50)" />
      </svg>
    </div>
  );
}

window.Scene1_Hook = Scene1_Hook;