// Act 1 — Problem (0–5s): kinetic captions, waveform, chat scroll
function Act1Problem() {
  return (
    <Sprite start={0} end={5.0} keepMounted={false}>
      <Act1Inner />
    </Sprite>
  );
}

function Act1Inner() {
  const { localTime } = useSprite();
  const t = localTime;

  // Waveform animated bars — breathing curve, not noise
  const breath = Easing.easeInOutSine(clamp(t / 5, 0, 1));
  const bars = [];
  for (let i = 0; i < 64; i++) {
    const phase = i * 0.3 + t * 4;
    const dist = Math.abs(i - 32);
    const envelope = 1 - dist / 40;
    const h = 8 + (Math.abs(Math.sin(phase)) * 60 + Math.abs(Math.sin(phase * 1.7)) * 40) * envelope * (0.5 + breath * 0.7);
    bars.push(h);
  }

  // LIVE badge pulse — sine eased
  const pulse = 0.7 + Easing.easeInOutSine((Math.sin(t * 6) + 1) / 2) * 0.3;

  // Fake chat lines that scroll — diegetic stream chat (no brand rules apply)
  const chatLines = [
    { u: 'gabriela_91', m: '🔥🔥🔥', c: '#F59E0B' },
    { u: 'el_madmax', m: 'NO J*DAS', c: '#EA580C' },
    { u: 'streamfan', m: 'guarda eso pa shorts', c: '#9061f9' },
    { u: 'ana_pdcst', m: 'quéeee', c: '#F59E0B' },
    { u: 'kevin_g', m: 'clip clip clip', c: '#EA580C' },
    { u: 'mariana', m: 'épico jaja', c: '#9061f9' },
  ];
  const visibleChat = Math.min(6, Math.floor(t * 2.4));

  // Captions per phase — 3 cápsulas, primera arranca en t=0.0
  const captions = [
    { t: 0.0, end: 1.8, text: '3 horas de stream.' },
    { t: 1.9, end: 3.4, text: '0 clips publicados.' },
    { t: 3.5, end: 5.0, text: 'La competencia publica a diario.' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0f0f0f 0%, #000 100%)', overflow: 'hidden' }}>
      {/* Vignette */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%)' }} />

      {/* "Stream" panel — left half, flush with chat */}
      <div style={{ position: 'absolute', left: 200, top: 90, width: 1120, height: 540, borderTopLeftRadius: 16, borderBottomLeftRadius: 16, borderTopRightRadius: 0, borderBottomRightRadius: 0, background: '#000', border: '1px solid rgba(234,88,12,0.3)', borderRight: 'none', overflow: 'hidden', boxShadow: '0 0 60px rgba(234,88,12,0.2)' }}>
        {/* Header bar */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 44, background: 'rgba(0,0,0,0.7)', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 16px', gap: 12, fontFamily: 'Inter, system-ui, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', background: '#EA580C', borderRadius: 4, color: '#fff', fontWeight: 700, fontSize: 11, letterSpacing: '0.08em', opacity: pulse }}>
            <div style={{ width: 6, height: 6, background: '#fff', borderRadius: 3 }} />
            EN VIVO
          </div>
          <div>directo · 03:24:18</div>
          <div style={{ marginLeft: 'auto', fontVariantNumeric: 'tabular-nums' }}>2.847 espectadores</div>
        </div>

        {/* Waveform area */}
        <div style={{ position: 'absolute', top: 60, left: 24, right: 24, height: 200, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
          {bars.map((h, i) => {
            const dist = Math.abs(i - 32);
            const fade = Math.max(0.2, 1 - dist / 32);
            return (
              <div key={i} style={{
                width: 8,
                height: h,
                background: `linear-gradient(180deg, #F59E0B 0%, #EA580C 100%)`,
                borderRadius: 2,
                opacity: fade,
              }} />
            );
          })}
        </div>

        {/* "Highlight detected" floating tag — appears around t=3 */}
        {t > 3 && t < 6 && (
          <div style={{ position: 'absolute', top: 280, left: '50%', transform: `translateX(-50%) scale(${Math.min(1, (t-3)*2)})`, padding: '8px 14px', background: 'rgba(234,88,12,0.15)', border: '1px solid rgba(234,88,12,0.5)', borderRadius: 999, color: '#F59E0B', fontSize: 16, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ color: '#EA580C' }}>●</span> momento detectado
          </div>
        )}

        {/* Stream label placeholder */}
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, padding: 14, background: 'rgba(255,255,255,0.04)', borderRadius: 8, fontFamily: 'Inter, system-ui, sans-serif' }}>
          <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Título del directo</div>
          <div style={{ color: '#fff', fontSize: 16, fontWeight: 600 }}>Probando el nuevo update · gameplay caótico</div>
        </div>
      </div>

      {/* Chat panel — flush against stream panel (sin gap), unidos como una pieza */}
      <div style={{ position: 'absolute', left: 1320, top: 90, width: 400, height: 540, borderTopRightRadius: 16, borderBottomRightRadius: 16, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(234,88,12,0.3)', borderLeft: '1px solid rgba(234,88,12,0.18)', overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.06)', fontFamily: 'Inter, system-ui, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Chat en directo
        </div>
        <div style={{ padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'Inter, system-ui, sans-serif' }}>
          {chatLines.slice(0, visibleChat).map((c, i) => (
            <div key={i} style={{
              fontSize: 14,
              opacity: Math.min(1, (t * 2 - i) * 1.5),
              transform: `translateX(${Math.max(0, (i - t * 2 + 1)) * 20}px)`,
            }}>
              <span style={{ color: c.c, fontWeight: 600 }}>{c.u}</span>
              <span style={{ color: 'rgba(255,255,255,0.85)', marginLeft: 8 }}>{c.m}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Kinetic captions — bottom center, eased */}
      {captions.map((c, i) => {
        if (t < c.t || t > c.end) return null;
        const local = t - c.t;
        const dur = c.end - c.t;
        let opacity = 1;
        let ty = 0;
        let scale = 1;
        if (local < 0.3) {
          const k = Easing.easeOutCubic(local / 0.3);
          opacity = k;
          ty = (1 - k) * 30;
          scale = 0.92 + k * 0.08;
        } else if (local > dur - 0.3) {
          const k = Easing.easeInCubic((dur - local) / 0.3);
          opacity = k;
          ty = -(1 - k) * 20;
        }
        return (
          <div key={i} style={{
            position: 'absolute',
            left: '50%', bottom: 120,
            transform: `translate(-50%, ${ty}px) scale(${scale})`,
            opacity,
            fontFamily: 'Inter, system-ui, sans-serif',
            fontSize: 96,
            fontWeight: 800,
            letterSpacing: '-0.035em',
            color: '#fff',
            textShadow: '0 4px 30px rgba(0,0,0,0.85)',
            whiteSpace: 'nowrap',
            textAlign: 'center',
          }}>
            {c.text}
          </div>
        );
      })}
    </div>
  );
}

window.Act1Problem = Act1Problem;