// Shared subtitle layer — ES principal, formato tipo broadcast: texto blanco
// grande, sin caja, con sombra suave. EN secundario opcional debajo.
function CueLayer({ cues, t }) {
  const subsOn = window.__chispaSubsOn !== false;
  const active = cues.find(c => t >= c.t && t <= c.end);
  if (!active || !subsOn) return null;

  const local = t - active.t;
  const dur = active.end - active.t;
  let opacity = 1;
  let ty = 0;
  if (local < 0.25) {
    opacity = local / 0.25;
    ty = (1 - local / 0.25) * 8;
  } else if (local > dur - 0.25) {
    opacity = (dur - local) / 0.25;
    ty = -(1 - (dur - local) / 0.25) * 6;
  }

  return (
    <div style={{
      position: 'absolute',
      bottom: 60,
      left: 0,
      right: 0,
      transform: `translateY(${ty}px)`,
      opacity,
      fontFamily: 'Inter, system-ui, sans-serif',
      textAlign: 'center',
      pointerEvents: 'none',
      zIndex: 50,
      padding: '0 60px',
    }}>
      <div style={{
        fontSize: 72,
        fontWeight: 800,
        color: '#fff',
        letterSpacing: '-0.02em',
        lineHeight: 1.1,
        textShadow: '0 6px 30px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7)',
      }}>
        {active.es}
      </div>
    </div>
  );
}

window.CueLayer = CueLayer;