// === Escena 04 — "Cobertura por solape" (la joya pedagógica) ===
// Plan 9–14. Fichajes 10–11 y 13–13:30. El solape se ilumina → 90/300 cubiertos, retraso 60.
// Sin decidir a qué turno pertenece cada fichada: solo cuánto se solapa.
function EscenaCH04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): eje → plan 9-14 → fichada 10-11 → fichada
  // 13-13:30 → pausa retórica ("¿a qué parte pertenece?") → solape iluminado →
  // contador 90/300 → retraso 60 → frase final.
  const T = {
    eje:2.5,
    plan:6.5,
    fich1:13.5, fich2:17.5,
    solape:26.0,
    cont:33.5, retraso:42.5,
    frase:48.5,
  };

  // Eje horario 8 → 15 (7 horas de ancho)
  const H0 = 8, H1 = 15;
  const AX = 220, AW = 1480;                 // x inicio, ancho útil
  const xAt = (h)=> AX + ((h-H0)/(H1-H0))*AW;

  const planP = clamp((t-T.plan)/0.7, 0, 1), planE = Easing.easeOutCubic(planP);
  const f1P = clamp((t-T.fich1)/0.55, 0, 1), f1E = Easing.easeOutBack(f1P);
  const f2P = clamp((t-T.fich2)/0.55, 0, 1), f2E = Easing.easeOutBack(f2P);
  const solapeP = clamp((t-T.solape)/1.0, 0, 1);

  // Contadores
  const cubiertos = Math.round(90 * clamp((t-T.cont)/1.1, 0, 1));
  const contShow = t >= T.cont;
  const retrasoShow = t >= T.retraso;
  const retraso = Math.round(60 * clamp((t-T.retraso)/0.8, 0, 1));
  const fraseP = clamp((t-T.frase)/0.8, 0, 1), fraseE = Easing.easeOutCubic(fraseP);

  const rowY = { plan:430, fich:560, solape:560 };
  const barH = 62;

  // Segmentos de solape (verde): [10-11] y [13-13:30], ambos dentro del plan 9-14
  const SOL = [ {a:10, b:11}, {a:13, b:13.5} ];

  const Etiqueta = ({x, txt, color})=>(
    <div className="f-mono" style={{position:'absolute', left:x, top:-22, transform:'translateX(-50%)', fontSize:13, fontWeight:700, color}}>{txt}</div>
  );

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="CÓMO SE CUENTA" title={<span>No importa a qué turno pertenece cada fichada. <span className="grad-text">Solo cuánto se solapa</span></span>}/>

      {/* Lienzo del eje */}
      <div style={{position:'absolute', left:0, right:0, top:230}}>
        {/* Eje horario */}
        {clamp((t-T.eje)/0.6,0,1) > 0 && (
          <svg width="1920" height="120" viewBox="0 0 1920 120" style={{position:'absolute', top:300, left:0}}>
            <line x1={AX} y1={30} x2={AX+AW} y2={30} stroke="#CBD5E1" strokeWidth="2"/>
            {Array.from({length:H1-H0+1}).map((_,i)=>{
              const h = H0+i, x = xAt(h);
              return (
                <g key={i}>
                  <line x1={x} y1={24} x2={x} y2={36} stroke="#CBD5E1" strokeWidth="2"/>
                  <text x={x} y={58} textAnchor="middle" fontSize="15" fontFamily="'JetBrains Mono',monospace" fill="#94A3B8">{h}:00</text>
                </g>
              );
            })}
          </svg>
        )}

        {/* Fila PLAN (azul) */}
        <div style={{position:'absolute', left:60, top:430, width:140}} className="f-mono">
          <span style={{fontSize:15, fontWeight:700, color:'#0085FF'}}>PLAN</span>
        </div>
        {planP > 0 && (
          <div style={{position:'absolute', left:xAt(9), top:430, width:(xAt(14)-xAt(9)), height:barH, borderRadius:12, background:'linear-gradient(180deg,#38BDF8,#0085FF)', boxShadow:'0 12px 30px rgba(0,133,255,0.28)', transform:`scaleX(${planE})`, transformOrigin:'left', opacity:clamp(planP*1.3,0,1)}}>
            <div style={{position:'relative', height:'100%'}}>
              <Etiqueta x={0} txt="9:00" color="#0085FF"/>
              <Etiqueta x={xAt(14)-xAt(9)} txt="14:00" color="#0085FF"/>
              <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily:"'IBM Plex Sans'", fontWeight:700, fontSize:16, opacity:planE}}>Turno programado · 300 min</div>
            </div>
          </div>
        )}

        {/* Fila FICHAJES (naranja) + solape verde encima */}
        <div style={{position:'absolute', left:60, top:560, width:140}} className="f-mono">
          <span style={{fontSize:15, fontWeight:700, color:'#FB8C00'}}>FICHAJES</span>
        </div>
        {/* Fichaje 1: 10–11 */}
        {f1P > 0 && (
          <div style={{position:'absolute', left:xAt(10), top:560, width:(xAt(11)-xAt(10)), height:barH, borderRadius:12, background:'linear-gradient(180deg,#FBBF6B,#FB8C00)', boxShadow:'0 12px 26px rgba(251,140,0,0.28)', transform:`scale(${lerp(0.9,1,f1E)})`, opacity:clamp(f1P*1.3,0,1)}}>
            <div style={{position:'relative', height:'100%'}}>
              <Etiqueta x={0} txt="10:00" color="#FB8C00"/>
              <Etiqueta x={xAt(11)-xAt(10)} txt="11:00" color="#FB8C00"/>
            </div>
          </div>
        )}
        {/* Fichaje 2: 13–13:30 */}
        {f2P > 0 && (
          <div style={{position:'absolute', left:xAt(13), top:560, width:(xAt(13.5)-xAt(13)), height:barH, borderRadius:12, background:'linear-gradient(180deg,#FBBF6B,#FB8C00)', boxShadow:'0 12px 26px rgba(251,140,0,0.28)', transform:`scale(${lerp(0.9,1,f2E)})`, opacity:clamp(f2P*1.3,0,1)}}>
            <div style={{position:'relative', height:'100%'}}>
              <Etiqueta x={0} txt="13:00" color="#FB8C00"/>
              <Etiqueta x={xAt(13.5)-xAt(13)} txt="13:30" color="#FB8C00"/>
            </div>
          </div>
        )}

        {/* Pregunta retórica (aparece tras las fichadas, se disuelve al llegar el solape) */}
        {t >= 20.5 && t < T.solape + 0.6 && (
          <div style={{position:'absolute', left:0, right:0, top:740, textAlign:'center', opacity:Math.min(clamp((t-20.5)/0.6,0,1), clamp((T.solape+0.6-t)/0.6,0,1))}}>
            <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:26, fontWeight:700, color:'#0F172A', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'12px 30px', boxShadow:'0 10px 30px rgba(15,23,42,0.08)'}}>
              ¿A qué parte del turno pertenece cada fichada?
              {t >= 23.5 && <span style={{color:'#059669', fontWeight:800, opacity:clamp((t-23.5)/0.5,0,1)}}>No importa.</span>}
            </span>
          </div>
        )}

        {/* Solape iluminado (verde punteado conectando plan y fichaje) */}
        {solapeP > 0 && SOL.map((s,i)=>(
          <div key={i}>
            {/* halo vertical que une plan y fichaje */}
            <div style={{position:'absolute', left:xAt(s.a), top:430, width:(xAt(s.b)-xAt(s.a)), height:192, background:'linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06))', border:'2px dashed rgba(16,185,129,0.7)', borderRadius:12, opacity:solapeP}}/>
            {/* etiqueta minutos */}
            <div className="f-mono" style={{position:'absolute', left:(xAt(s.a)+xAt(s.b))/2, top:672, transform:'translateX(-50%)', fontSize:14, fontWeight:800, color:'#059669', opacity:solapeP}}>
              {Math.round((s.b-s.a)*60)} min
            </div>
          </div>
        ))}
      </div>

      {/* Panel de resultado */}
      {contShow && (
        <div style={{position:'absolute', right:150, top:255, display:'flex', flexDirection:'column', gap:14, opacity:clamp((t-T.cont)/0.5,0,1)}}>
          <div style={{background:'#fff', borderRadius:16, border:'1.5px solid rgba(16,185,129,0.4)', boxShadow:'0 18px 44px rgba(16,185,129,0.14)', padding:'18px 26px', minWidth:290}}>
            <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#059669'}}>REALIZADO</div>
            <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', lineHeight:1.1}}>{cubiertos}<span style={{fontSize:22, color:'#94A3B8', fontWeight:600}}> / 300 min</span></div>
            <div className="f-plex" style={{fontSize:14, color:'#64748B'}}>minutos del plan cubiertos por fichajes</div>
          </div>
          {retrasoShow && (
            <div style={{background:'#fff', borderRadius:16, border:'1.5px solid rgba(251,140,0,0.4)', boxShadow:'0 18px 44px rgba(251,140,0,0.12)', padding:'18px 26px', minWidth:290, opacity:clamp((t-T.retraso)/0.5,0,1)}}>
              <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#D97706'}}>RETRASO DE ENTRADA</div>
              <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', lineHeight:1.1}}>{retraso}<span style={{fontSize:22, color:'#94A3B8', fontWeight:600}}> min</span></div>
              <div className="f-plex" style={{fontSize:14, color:'#64748B'}}>primer minuto cubierto: 10:00</div>
            </div>
          )}
        </div>
      )}

      {/* Frase */}
      {fraseP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:930, textAlign:'center', opacity:fraseE, transform:`translateY(${(1-fraseE)*14}px)`}}>
          <div className="f-plex" style={{fontSize:32, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
            Cero decisiones sobre a qué turno pertenece cada fichada. <span style={{color:'#059669'}}>Solo minutos que coinciden.</span>
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCH04 });