// SceneLogo.jsx — Beat 5: logo + CTA
// Time window: 13.5 – 15.0s (loops back)

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

  const logoT = clamp(localTime / 0.5, 0, 1);
  const logoOp = Easing.easeOutCubic(logoT);
  const logoScale = 0.94 + 0.06 * logoT;

  const taglineT = clamp((localTime - 0.4) / 0.45, 0, 1);
  const urlT = clamp((localTime - 0.75) / 0.4, 0, 1);

  const exitT = clamp((localTime - (duration - 0.3)) / 0.3, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exitT);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: CAL.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: exitOp,
      fontFamily: CAL.font,
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 60% 50% at 50% 55%, ${CAL.haloA} 0%, transparent 65%)`,
      }}/>

      <div style={{ textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <div style={{
          opacity: logoOp,
          transform: `scale(${logoScale})`,
        }}>
          <Wordmark size={96} />
        </div>

        <div style={{
          marginTop: 28,
          opacity: Easing.easeOutCubic(taglineT),
          transform: `translateY(${(1 - taglineT) * 10}px)`,
          fontSize: 22, fontWeight: 400,
          color: CAL.inkSoft,
          letterSpacing: '-0.015em',
        }}>
          Boek tijd. Skip het heen-en-weer gemail.
        </div>

        <div style={{
          marginTop: 36,
          opacity: urlT,
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '14px 26px',
          background: CAL.blue,
          color: '#fff',
          borderRadius: 999,
          fontFamily: CAL.font,
          fontSize: 15, fontWeight: 600,
          boxShadow: '0 12px 30px -8px rgba(47,107,255,0.4)',
        }}>
          Start gratis
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 6l6 6-6 6"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

window.SceneLogo = SceneLogo;