// Scene 5: CTA — "Start your free inspection" (42-48s)

function Scene5_CTA({ start = 42, end = 48 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entry = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1));
        const ctaT = clamp((localTime - 1.2) / 0.6, 0, 1);
        const ctaEased = Easing.easeOutBack(ctaT);
        const tagT = clamp((localTime - 2.0) / 0.6, 0, 1);

        // Subtle wordmark pulse
        const pulseT = (localTime - 2.5) / 1.2;
        const pulse = pulseT > 0 ? Math.sin(pulseT * Math.PI * 2) * 0.008 + 1 : 1;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'oklch(0.22 0.03 50)',
            color: 'oklch(0.96 0.01 70)',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            textAlign: 'center',
            opacity: entry,
          }}>
            {/* Small kicker */}
            <div style={{
              fontFamily: "'Work Sans', sans-serif",
              fontSize: 18, fontWeight: 600,
              color: 'oklch(0.68 0.14 40)',
              letterSpacing: '0.24em',
              textTransform: 'uppercase',
              marginBottom: 28,
              opacity: entry,
              transform: `translateY(${(1 - entry) * -10}px)`,
            }}>
              · Free · No login · About 6 minutes ·
            </div>

            {/* Big headline */}
            <div style={{
              fontFamily: "'Fraunces', serif",
              fontSize: 128, fontWeight: 500,
              lineHeight: 1.02,
              letterSpacing: '-0.03em',
              maxWidth: 1400,
              transform: `translateY(${(1 - entry) * 20}px) scale(${pulse})`,
            }}>
              Start your<br/>
              <em style={{ fontStyle: 'italic', color: 'oklch(0.72 0.16 45)' }}>free inspection.</em>
            </div>

            {/* CTA button */}
            <div style={{
              marginTop: 120,
              padding: '22px 44px',
              background: 'oklch(0.58 0.17 35)',
              color: 'oklch(0.98 0.01 80)',
              borderRadius: 8,
              fontFamily: "'Work Sans', sans-serif",
              fontSize: 24, fontWeight: 600,
              letterSpacing: '0.02em',
              display: 'inline-flex',
              alignItems: 'center', gap: 14,
              opacity: ctaT,
              transform: `scale(${ctaEased})`,
              boxShadow: '0 12px 40px oklch(0.58 0.17 35 / 0.35)',
            }}>
              Begin the 24‑point walk‑around
              <span style={{ fontSize: 28 }}>→</span>
            </div>

            {/* GDS Logo lockup */}
            <div style={{
              marginTop: 56,
              display: 'flex', alignItems: 'center', gap: 14,
              opacity: tagT,
              transform: `translateY(${(1 - tagT) * 10}px)`,
            }}>
              <img src="assets/gds-icon.png" alt=""
                style={{ width: 40, height: 40, objectFit: 'contain',
                         filter: 'brightness(1.25)' }}/>
              <div style={{
                fontFamily: "'Work Sans', sans-serif",
                fontSize: 18, fontWeight: 500,
                color: 'oklch(0.85 0.02 70)',
                letterSpacing: '0.02em',
              }}>
                Garage Door <span style={{ color: 'oklch(0.72 0.10 230)', fontWeight: 600 }}>Science</span>
              </div>
            </div>

            {/* Tag */}
            <div style={{
              marginTop: 16,
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 12,
              color: 'oklch(0.58 0.03 70)',
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              opacity: tagT,
            }}>
              Independent · Homeowner‑first
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

window.Scene5_CTA = Scene5_CTA;