// Act 4 — Tres formas de usar Chispa (32–42s)
// Reemplazamos las stats inventadas por los 3 modos del producto, mostrados con
// micro-visuales que ilustran cada caso. Da el "qué exactamente hace Chispa"
// que la landing necesita antes del CTA.
function Act4Results() {
  return (
    <Sprite start={32.0} end={42.0}>
      <Act4Inner />
    </Sprite>
  );
}

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

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0f0f0f 0%, #000 100%)', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '80px 60px' }}>
      {/* Title strip (window 10s, fade-out 9.5-10.0) */}
      <div style={{ textAlign: 'center', opacity: t < 0.4 ? t / 0.4 : t > 9.5 ? Math.max(0, (10.0 - t) / 0.5) : 1, marginBottom: 56 }}>
        <div style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 96, fontWeight: 800, color: '#fff', letterSpacing: '-0.035em', lineHeight: 1.05 }}>
          Un mismo motor IA.<br/>
          <span style={{ color: '#F59E0B' }}>Tres formatos para usar Chispa.</span>
        </div>
      </div>

      {t >= 1.4 && t < 10.0 && <UseCases t={t - 1.4} />}
    </div>
  );
}

function UseCases({ t }) {
  const opacity = t < 0.3 ? t / 0.3 : t > 8.0 ? Math.max(0, (8.6 - t) / 0.6) : 1;
  const cases = [
    {
      tag: '01',
      label: 'Clips personalizados',
      meta: 'el día a día',
      desc: 'IA entrenada en TU canal. Gaming, deportes, podcast, comedy, lifestyle.',
      delay: 0.2,
      visual: 'clips',
    },
    {
      tag: '02',
      label: 'Recortar bruto',
      meta: 'montaje · sin silencios',
      desc: 'Elimina silencios, voz de producción y tomas falladas. La pieza queda lista para entregar.',
      delay: 0.7,
      visual: 'timeline',
    },
    {
      tag: '03',
      label: 'Highlights del directo',
      meta: '3 h → 5 min',
      desc: 'Detecta los picos de un stream o podcast y los condensa sin perder el hilo.',
      delay: 1.2,
      visual: 'condense',
      highlight: true,
    },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, opacity, width: '100%' }}>
      <div style={{ display: 'flex', gap: 22 }}>
        {cases.map((c, i) => {
          const local = t - c.delay;
          const ease = Easing.easeOutCubic(clamp(local * 2.5, 0, 1));
          return (
            <div key={i} style={{
              width: 400, height: 420,
              padding: '32px 34px',
              background: c.highlight ? 'linear-gradient(135deg, rgba(234,88,12,0.14) 0%, rgba(245,158,11,0.04) 100%)' : 'rgba(255,255,255,0.03)',
              border: `1px solid ${c.highlight ? 'rgba(234,88,12,0.4)' : 'rgba(255,255,255,0.08)'}`,
              borderRadius: 18,
              fontFamily: 'Inter, system-ui, sans-serif',
              transform: `translateY(${(1 - ease) * 30}px)`,
              opacity: local < 0 ? 0 : ease,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative',
              boxShadow: c.highlight ? '0 12px 40px rgba(234,88,12,0.18)' : 'none',
            }}>
              {/* Header row */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 16, color: c.highlight ? '#F59E0B' : 'rgba(255,255,255,0.4)', letterSpacing: '0.18em', fontWeight: 600 }}>{c.tag}</div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>{c.meta}</div>
              </div>

              {/* Visual */}
              <CaseVisual kind={c.visual} t={t - c.delay} highlight={c.highlight} />

              {/* Body */}
              <div>
                <div style={{ fontSize: 32, fontWeight: 700, color: '#fff', letterSpacing: '-0.02em', marginBottom: 10, lineHeight: 1.15 }}>{c.label}</div>
                <div style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', lineHeight: 1.45 }}>{c.desc}</div>
              </div>
            </div>
          );
        })}
      </div>
      {/* Nichos optimizados strip (compliance se muestra en Act 5 para no duplicar) */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 22, fontFamily: 'JetBrains Mono, monospace', fontSize: 16, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
        <span>optimizado para gaming · fútbol · podcast · comedia</span>
      </div>
    </div>
  );
}

// ── Mini visualisations per case card ───────────────────────────────────────
function CaseVisual({ kind, t = 0, highlight }) {
  // local pulse for liveliness
  const tt = Math.max(0, t);
  const accent = '#F59E0B';
  const orange = '#EA580C';

  if (kind === 'clips') {
    // 5 mini 9:16 portrait clips, each with a "spark" bolt overlay
    const clips = [0, 1, 2, 3, 4];
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 0', height: 140 }}>
        {clips.map(i => {
          const lift = Math.sin(tt * 3 + i) * 4;
          const tilt = (i - 2) * 4;
          return (
            <div key={i} style={{
              width: 38, height: 68,
              borderRadius: 6,
              background: i === 2 ? `linear-gradient(135deg, ${orange}, ${accent})` : 'rgba(255,255,255,0.06)',
              border: `1px solid ${i === 2 ? 'rgba(234,88,12,0.6)' : 'rgba(255,255,255,0.12)'}`,
              transform: `translateY(${lift}px) rotate(${tilt}deg)`,
              position: 'relative',
              boxShadow: i === 2 ? '0 8px 24px rgba(234,88,12,0.4)' : 'none',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
              padding: 4,
            }}>
              {/* fake subs bar */}
              <div style={{ width: '85%', height: 4, background: i === 2 ? '#fff' : 'rgba(255,255,255,0.3)', borderRadius: 1 }} />
              {/* center bolt on selected */}
              {i === 2 && (
                <svg width="16" height="16" viewBox="0 0 100 100" style={{ position: 'absolute', top: '32%', left: '50%', transform: 'translate(-50%, -50%)' }}>
                  <path d="M55 8 L25 52 L48 52 L42 92 L75 42 L52 42 Z" fill="#fff" />
                </svg>
              )}
            </div>
          );
        })}
      </div>
    );
  }

  if (kind === 'timeline') {
    // Bruto con bloques 'silencio' que se tachan + playhead recortando
    const segments = [
      { kind: 'voice',   w: 14 },
      { kind: 'silence', w: 8 },
      { kind: 'voice',   w: 22 },
      { kind: 'silence', w: 6 },
      { kind: 'voice',   w: 18 },
      { kind: 'silence', w: 10 },
      { kind: 'voice',   w: 12 },
      { kind: 'silence', w: 10 },
    ];
    return (
      <div style={{ position: 'relative', height: 140, padding: '20px 0' }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 14, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>
          fuera silencios · solo voz útil
        </div>
        <div style={{ position: 'relative', height: 56, background: 'rgba(255,255,255,0.04)', borderRadius: 6, border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden', display: 'flex' }}>
          {segments.map((s, i) => {
            if (s.kind === 'voice') {
              return (
                <div key={i} style={{ width: `${s.w}%`, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
                  {Array.from({ length: Math.round(s.w * 0.8) }).map((_, k) => {
                    const h = 6 + Math.abs(Math.sin(k * 0.7 + i * 2.1 + tt * 2)) * 28;
                    return <div key={k} style={{ width: 2, height: h, background: 'rgba(245,158,11,0.7)', borderRadius: 1 }} />;
                  })}
                </div>
              );
            }
            return (
              <div key={i} style={{ width: `${s.w}%`, position: 'relative', background: 'rgba(255,255,255,0.02)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ position: 'absolute', left: 4, right: 4, height: 1, background: 'rgba(239, 68, 68, 0.7)', transform: 'rotate(-8deg)' }} />
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'rgba(239, 68, 68, 0.85)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>cut</div>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 14, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em' }}>
          <span>bruto largo</span>
          <span style={{ color: accent }}>→ pieza final</span>
        </div>
      </div>
    );
  }

  if (kind === 'condense') {
    // Long bar → arrow → short condensed bar
    const pulse = 0.6 + Math.sin(tt * 4) * 0.4;
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 140, padding: '0 4px', gap: 14 }}>
        {/* Long form */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>3h</div>
          <div style={{ height: 16, background: 'rgba(255,255,255,0.08)', borderRadius: 3, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-around' }}>
              {Array.from({ length: 30 }).map((_, i) => (
                <div key={i} style={{ width: 1, height: 10, background: 'rgba(245,158,11,0.5)' }} />
              ))}
            </div>
          </div>
          {/* Detection dots */}
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 4px', marginTop: 2 }}>
            {[0.12, 0.28, 0.45, 0.62, 0.81].map((p, i) => (
              <div key={i} style={{ width: 6, height: 6, borderRadius: 3, background: orange, boxShadow: `0 0 6px ${orange}` }} />
            ))}
          </div>
        </div>
        {/* Arrow */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, flexShrink: 0 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: `scale(${pulse})` }}>
            <path d="M5 12h14"/><path d="M13 6l6 6-6 6"/>
          </svg>
        </div>
        {/* Condensed */}
        <div style={{ width: 90, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: accent, letterSpacing: '0.06em', textTransform: 'uppercase' }}>5min</div>
          <div style={{ height: 16, background: `linear-gradient(90deg, ${orange}, ${accent})`, borderRadius: 3, boxShadow: `0 0 12px ${orange}66` }} />
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.06em' }}>los mejores</div>
        </div>
      </div>
    );
  }

  return null;
}

window.Act4Results = Act4Results;
