// Scene 6 — CTA final: tagline + call to action.

function SceneCTA({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const bgT = clamp(localTime / 0.5, 0, 1);
        const bg = Easing.easeOutCubic(bgT);

        const logoT = clamp((localTime - 0.4) / 0.6, 0, 1);
        const logo = Easing.easeOutBack(logoT);

        const l1T = clamp((localTime - 1.1) / 0.5, 0, 1);
        const l2T = clamp((localTime - 1.7) / 0.5, 0, 1);
        const ctaT = clamp((localTime - 2.6) / 0.5, 0, 1);
        const urlT = clamp((localTime - 3.2) / 0.5, 0, 1);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: `radial-gradient(60% 60% at 50% 50%, ${OP_COLORS.surface} 0%, ${OP_COLORS.bg} 80%)`,
            opacity: bg,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            fontFamily: SANS,
            padding: '0 120px',
          }}>
            {/* Rings */}
            {[0, 1, 2].map((i) => {
              const delay = i * 0.5;
              const t = Math.max(0, (localTime - delay) % 3.0) / 3.0;
              const size = 200 + t * 1200;
              const op = (1 - t) * 0.25;
              return (
                <div key={i} style={{
                  position: 'absolute',
                  left: '50%', top: '50%',
                  width: size, height: size,
                  marginLeft: -size / 2, marginTop: -size / 2,
                  border: `1px solid ${OP_COLORS.blueLight}`,
                  borderRadius: '50%', opacity: op,
                  pointerEvents: 'none',
                }} />
              );
            })}

            {/* Logo */}
            <div style={{
              opacity: logoT,
              transform: `scale(${0.85 + 0.15 * logo})`,
              marginBottom: 36,
              display: 'flex', alignItems: 'center', gap: 18,
              fontFamily: SANS, fontWeight: 700, fontSize: 70,
              letterSpacing: '-0.035em', color: OP_COLORS.text,
            }}>
              <LogoMark size={90} glow />
              <div>
                Obra
                <span style={{
                  background: `linear-gradient(90deg, ${OP_COLORS.blueLight}, ${OP_COLORS.greenLight})`,
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                }}>Planner</span>
              </div>
            </div>

            {/* Tagline — 2 lines */}
            <div style={{
              fontSize: 64, fontWeight: 800,
              letterSpacing: '-0.035em', color: OP_COLORS.text,
              textAlign: 'center', lineHeight: 1.05,
              opacity: Easing.easeOutCubic(l1T),
              transform: `translateY(${(1 - l1T) * 16}px)`,
              whiteSpace: 'nowrap',
            }}>
              De la planificación del día
            </div>
            <div style={{
              fontSize: 64, fontWeight: 800,
              letterSpacing: '-0.035em',
              textAlign: 'center', lineHeight: 1.05,
              marginTop: 10,
              opacity: Easing.easeOutCubic(l2T),
              transform: `translateY(${(1 - l2T) * 16}px)`,
              background: `linear-gradient(90deg, ${OP_COLORS.blueLight}, ${OP_COLORS.greenLight})`,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              whiteSpace: 'nowrap',
            }}>
              a la liquidación de la quincena.
            </div>

            <div style={{
              fontSize: 28, color: OP_COLORS.textDim,
              marginTop: 32, fontWeight: 500,
              textAlign: 'center',
              opacity: Easing.easeOutCubic(ctaT),
              transform: `translateY(${(1 - ctaT) * 10}px)`,
              letterSpacing: '-0.01em',
            }}>
              Todo en un solo sistema.
            </div>

            {/* CTA button */}
            <div style={{
              marginTop: 50,
              display: 'flex', gap: 16, alignItems: 'center',
              opacity: Easing.easeOutCubic(urlT),
              transform: `translateY(${(1 - urlT) * 20}px) scale(${0.95 + 0.05 * urlT})`,
            }}>
              <div style={{
                padding: '20px 36px',
                background: OP_COLORS.blue,
                color: '#fff',
                borderRadius: 12,
                fontSize: 22, fontWeight: 700,
                fontFamily: SANS,
                boxShadow: `0 20px 60px ${OP_COLORS.blue}55, 0 0 0 1px ${OP_COLORS.blueLight} inset`,
              }}>
                Solicitá una demo →
              </div>
              <div style={{
                fontFamily: MONO, fontSize: 18,
                color: OP_COLORS.textDim,
                letterSpacing: '0.05em',
              }}>
                obraplanner.com.ar
              </div>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneCTA });