// Act 5 — CTA + pricing tiers (42–54s)
function Act5CTA() {
  return (
    <Sprite start={42.0} end={54.0}>
      <Act5Inner />
    </Sprite>
  );
}

function Act5Inner() {
  const { localTime: t } = useSprite();

  // Logo pulse
  const pulseScale = 1 + Math.sin(t * 2) * 0.02;

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, #1a0a00 0%, #0D0D0D 80%)', overflow: 'hidden', opacity: Math.min(1, t / 0.4) }}>
      {/* Background bolt — marca de agua estática */}
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(8)', opacity: 0.04 }}>
        <BoltSvg size={120} />
      </div>

      {/* Header (0-3) — with fade-in so logo doesn't pop in abruptly */}
      {t < 11 && (
        <div style={{ position: 'absolute', top: 70, left: 0, right: 0, textAlign: 'center', opacity: Math.min(1, t / 0.5) }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, transform: `scale(${pulseScale})` }}>
            <BoltSvg size={56} />
            <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 56, fontWeight: 800, color: '#fff', letterSpacing: '-0.04em' }}>Chispa</div>
          </div>
        </div>
      )}

      {/* Headline */}
      {t > 0.4 && t < 11 && (
        <div style={{ position: 'absolute', top: 170, left: 0, right: 0, textAlign: 'center', opacity: Easing.easeOutCubic(clamp((t - 0.4) / 0.5, 0, 1)) }}>
          <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 96, fontWeight: 800, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1.0 }}>
            Genera tu primera <span style={{ color: '#F59E0B' }}>chispa.</span>
          </div>
          <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 22, color: 'rgba(255,255,255,0.6)', marginTop: 16, letterSpacing: '-0.01em' }}>
            Beta privada · acceso por invitación.
          </div>
        </div>
      )}

      {/* Pricing tiers — ocultos durante la beta privada (no mostramos planes
          públicos con precio en la superficie pública). PricingRow se conserva
          abajo por si se reactiva. */}
      {false && t >= 1.5 && t < 11 && <PricingRow t={t - 1.5} />}

      {/* Closing tagline — más arriba (bottom 290) para no chocar con CTA */}
      {t >= 5.0 && t < 11 && (
        <div style={{ position: 'absolute', bottom: 290, left: 0, right: 0, textAlign: 'center', opacity: Easing.easeOutCubic(clamp((t - 5.0) / 0.5, 0, 1)), fontFamily: 'Inter, system-ui, sans-serif' }}>
          <div style={{ fontSize: 26, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em' }}>
            Tu IA, entrenada con <span style={{ color: '#F59E0B' }}>tu contenido</span>.
          </div>
        </div>
      )}

      {/* CTA button */}
      {t >= 3.0 && t < 11 && <CTAButton t={t - 3.0} />}

      {/* Compliance + Domain — única ubicación bottom */}
      {t >= 4.0 && t < 11 && (
        <div style={{ position: 'absolute', bottom: 40, left: 0, right: 0, textAlign: 'center', opacity: Easing.easeOutCubic(clamp((t - 4.0) / 0.5, 0, 1)), display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 16, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>
            RGPD · ENS-BÁSICA · OWASP ASVS L2 · chispa.es/trust
          </div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 18, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em' }}>
            chispa.es
          </div>
        </div>
      )}

      <CueLayer t={t} cues={[]} />
    </div>
  );
}

function BoltSvg({ size = 60 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <defs>
        <linearGradient id="bolt-grad-cta" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#F59E0B" />
          <stop offset="100%" stopColor="#EA580C" />
        </linearGradient>
      </defs>
      <path d="M55 8 L25 52 L48 52 L42 92 L75 42 L52 42 Z" fill="url(#bolt-grad-cta)" />
    </svg>
  );
}

function PricingRow({ t }) {
  const tiers = [
    { name: 'Free', price: '€0', clipsLine: '5 clips/mes', features: ['prueba y descarga'], delay: 0.0, accent: 'rgba(255,255,255,0.5)' },
    { name: 'Creator', price: '€29', clipsLine: '50 clips/mes', features: ['publica solo · YT + TT + IG'], delay: 0.25, accent: '#F59E0B' },
    { name: 'Pro', price: '€79', clipsLine: '200 clips/mes', features: ['IA entrenada · multi-canal'], delay: 0.5, accent: '#9061f9', highlight: true },
    { name: 'Studio', price: '€199', clipsLine: 'ilimitado', features: ['editorial · colaboradores'], delay: 0.75, accent: '#fff' },
  ];

  const proPulse = 0.5 + Easing.easeInOutSine((Math.sin(t * 3) + 1) / 2) * 0.5;

  return (
    <div style={{ position: 'absolute', top: 380, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'stretch', gap: 18, padding: '0 32px' }}>
      {tiers.map((tier, i) => {
        const local = t - tier.delay;
        const ease = Easing.easeOutCubic(clamp(local * 3, 0, 1));

        return (
          <div key={i} style={{
            width: 280,
            padding: '28px 26px',
            background: tier.highlight ? 'linear-gradient(135deg, rgba(144,97,249,0.14) 0%, rgba(234,88,12,0.06) 100%)' : 'rgba(255,255,255,0.03)',
            border: `${tier.highlight ? 2 : 1}px solid ${tier.highlight ? `rgba(144,97,249,${0.4 + proPulse * 0.3})` : 'rgba(255,255,255,0.1)'}`,
            borderRadius: 18,
            fontFamily: 'Inter, system-ui, sans-serif',
            position: 'relative',
            transform: `translateY(${(1 - ease) * 30}px)`,
            opacity: local < 0 ? 0 : ease,
            boxShadow: tier.highlight ? `0 0 ${30 + proPulse * 30}px rgba(144,97,249,${0.2 + proPulse * 0.2})` : 'none',
          }}>
            {tier.highlight && (
              <div style={{ position: 'absolute', top: -12, right: 16, padding: '5px 14px', background: '#9061f9', color: '#fff', fontSize: 14, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', borderRadius: 999, fontFamily: 'JetBrains Mono, monospace' }}>
                IA aprende
              </div>
            )}
            <div style={{ fontSize: 16, color: tier.accent, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 14 }}>{tier.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <div style={{ fontSize: 56, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>{tier.price}</div>
              <div style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)' }}>/mes</div>
            </div>
            <div style={{ fontSize: 17, color: '#fff', fontWeight: 600, marginBottom: 14 }}>{tier.clipsLine}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {tier.features.map((f, j) => (
                <div key={j} style={{ fontSize: 14, color: 'rgba(255,255,255,0.65)', display: 'flex', gap: 8, lineHeight: 1.45 }}>
                  <span style={{ color: tier.accent }}>✓</span> {f}
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CTAButton({ t }) {
  const opacity = Easing.easeOutCubic(clamp(t / 0.4, 0, 1));
  const sineNorm = (Math.sin(t * 4) + 1) / 2;
  const pulse = 1 + (Easing.easeInOutSine(sineNorm) - 0.5) * 0.03;
  const glow = Easing.easeInOutSine(sineNorm);

  return (
    <div style={{ position: 'absolute', bottom: 180, left: 0, right: 0, display: 'flex', justifyContent: 'center', opacity }}>
      <div style={{
        padding: '20px 44px',
        background: 'linear-gradient(90deg, #EA580C 0%, #F59E0B 100%)',
        borderRadius: 14,
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 22, fontWeight: 700, color: '#fff',
        letterSpacing: '-0.01em',
        boxShadow: `0 0 ${30 + glow * 30}px rgba(234,88,12,${0.4 + glow * 0.3})`,
        transform: `scale(${pulse})`,
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        Solicitar acceso →
      </div>
    </div>
  );
}

window.Act5CTA = Act5CTA;