// scenes/Scene4_CTA.jsx
// 13.5 → 18.0s — Big stat (80% de temps gagné), then wordmark + CTA.

function Scene4_CTA({ start = 13.5, end = 18.0 }) {
  return (
    <Sprite start={start} end={end}>
      <SceneBg color={FP.bg}>
        <SubtleGrain />

        <Sprite start={start + 0.1} end={start + 2.7}>
          <BigStat />
        </Sprite>

        <Sprite start={start + 2.6} end={end}>
          <WordmarkCTA />
        </Sprite>
      </SceneBg>
    </Sprite>
  );
}

function BigStat() {
  const { localTime, duration } = useSprite();
  const t = localTime;

  // "80%" counts up from 0
  const countP = Easing.easeOutCubic(clamp(t / 0.9, 0, 1));
  const pct = Math.round(countP * 80);

  // exit fade
  const exitP = clamp((t - (duration - 0.35)) / 0.35, 0, 1);
  const opacity = (1 - exitP);
  const ty = -exitP * 20;

  // entry
  const entryP = clamp(t / 0.5, 0, 1);
  const entryEase = Easing.easeOutCubic(entryP);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
      opacity: opacity * entryEase,
      transform: `translateY(${ty}px)`,
    }}>
      <div style={{
        fontSize: 24,
        fontFamily: SANS,
        color: FP.muted,
        fontWeight: 400,
        marginBottom: 20,
        letterSpacing: '-0.01em',
      }}>
        En moyenne
      </div>

      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 16,
        fontFamily: SANS,
        color: FP.primary,
        fontWeight: 500,
        letterSpacing: '-0.04em',
        fontVariantNumeric: 'tabular-nums',
      }}>
        <span style={{ fontSize: 340, lineHeight: 1 }}>{pct}</span>
        <span style={{ fontSize: 180, lineHeight: 1 }}>%</span>
      </div>

      <div style={{
        fontSize: 44,
        fontFamily: SANS,
        color: FP.text,
        fontWeight: 500,
        marginTop: 24,
        letterSpacing: '-0.02em',
        textAlign: 'center',
      }}>
        de temps <span style={{ fontFamily: SERIF, fontStyle: 'italic' }}>gagné</span> sur la collecte
      </div>
    </div>
  );
}

function WordmarkCTA() {
  const { localTime, duration } = useSprite();
  const t = localTime;
  const appearP = Easing.easeOutCubic(clamp(t / 0.6, 0, 1));

  // exit: keep visible till end, no exit fade
  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column', gap: 40,
      opacity: appearP,
      transform: `translateY(${(1 - appearP) * 16}px)`,
    }}>
      <div style={{
        color: FP.text,
        transform: 'scale(2.6)',
        transformOrigin: 'center',
      }}>
        <Wordmark color={FP.text} size={1.2} />
      </div>

      <div style={{
        fontSize: 28,
        fontFamily: SANS,
        color: FP.muted,
        fontWeight: 400,
        letterSpacing: '-0.01em',
        textAlign: 'center',
        marginTop: 40,
      }}>
        Collecte de documents <span style={{ fontFamily: SERIF, fontStyle: 'italic', color: FP.text }}>simplifiée.</span>
      </div>

      {/* CTA button */}
      <Sprite start={14.3} end={18.0}>
        <CTAButton />
      </Sprite>
    </div>
  );
}

function CTAButton() {
  const { localTime } = useSprite();
  const p = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
      opacity: clamp(localTime / 0.3, 0, 1),
      transform: `scale(${0.92 + p * 0.08})`,
      marginTop: 8,
    }}>
      <button style={{
        padding: '22px 48px',
        background: FP.primary,
        color: FP.bg,
        border: 'none',
        borderRadius: 10,
        fontFamily: SANS,
        fontSize: 24, fontWeight: 500,
        letterSpacing: '-0.015em',
        boxShadow: `0 0 60px ${FP.primaryDim}, 0 4px 0 rgba(0,0,0,0.3)`,
        cursor: 'pointer',
      }}>
        Essayez gratuitement
      </button>
      <div style={{
        fontFamily: MONO,
        fontSize: 15,
        color: FP.muted,
        letterSpacing: '0.02em',
      }}>
        filepilot.io
      </div>
    </div>
  );
}

Object.assign(window, { Scene4_CTA });