// === Escena 03 — "El plan se crea solo" ===
// El horario semanal → cada madrugada se materializa en los turnos del día. Sin planificar a mano.
function EscenaCH03({ t }){
  // LOCUCIÓN (audio/escena-03.mp3): horario semanal → reloj de las 02:00 →
  // flecha → el turno del día aparece → nota final "nace vacío".
  const T = { cal:4.0, reloj:14.5, flecha:18.5, turnos:[21.5, 22.3], nota:31.0 };

  const DIAS = [
    { d:'LUN', j:'8–14 / 15–18', on:true },
    { d:'MAR', j:'8–14 / 15–18', on:true },
    { d:'MIÉ', j:'9–14', on:true, hoy:true },
    { d:'JUE', j:'8–14 / 15–18', on:true },
    { d:'VIE', j:'8–15', on:true },
    { d:'SÁB', j:'Libre', on:false },
    { d:'DOM', j:'Libre', on:false },
  ];

  const calP = clamp((t-T.cal)/0.6, 0, 1), calE = Easing.easeOutCubic(calP);
  const relojOn = t >= T.reloj;
  const flechaP = clamp((t-T.flecha)/0.7, 0, 1);
  const notaP = clamp((t-T.nota)/0.8, 0, 1), notaE = Easing.easeOutCubic(notaP);

  const TURNOS = [
    { rango:'9:00 – 14:00', tipo:'Trabajo', color:'#0085FF' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="GENERACIÓN AUTOMÁTICA" title={<span>Cada madrugada, el plan del día <span className="grad-text">se crea solo</span></span>}/>

      {/* Columna izquierda — Horario semanal */}
      <div style={{position:'absolute', left:150, top:290, width:640, opacity:calP, transform:`translateY(${(1-calE)*24}px)`}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
          <span style={{width:10, height:10, borderRadius:100, background:'#0085FF'}}/>
          <span className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>Horario asignado</span>
          <span className="f-mono" style={{fontSize:12, color:'#94A3B8'}}>· María José</span>
        </div>
        <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 20px 50px rgba(15,23,42,0.06)', overflow:'hidden'}}>
          {DIAS.map((d,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', gap:16, padding:'14px 22px', borderBottom: i<DIAS.length-1?'1px solid #F1F5F9':'none', background: d.hoy?'rgba(0,133,255,0.06)':'#fff'}}>
              <span className="f-mono" style={{width:52, fontSize:14, fontWeight:700, color: d.hoy?'#0085FF':'#334155'}}>{d.d}</span>
              <span className="f-plex" style={{fontSize:16, fontWeight: d.on?600:400, color: d.on?'#0F172A':'#CBD5E1'}}>{d.j}</span>
              {d.hoy && <span style={{marginLeft:'auto'}}><StatusChip label="Hoy" color="primary" start={T.cal} t={t}/></span>}
            </div>
          ))}
        </div>
      </div>

      {/* Centro — reloj 02:00 + flecha */}
      <div style={{position:'absolute', left:820, top:470, width:270, textAlign:'center'}}>
        {relojOn && (
          <div style={{opacity:clamp((t-T.reloj)/0.5,0,1), transform:`scale(${lerp(0.8,1,Easing.easeOutBack(clamp((t-T.reloj)/0.5,0,1)))})`}}>
            <div style={{width:96, height:96, margin:'0 auto', borderRadius:100, background:'#0F172A', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 16px 40px rgba(15,23,42,0.3)'}}>
              <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#fff" strokeWidth="1.8"/><path d="M12 7 V12 L15.5 14" stroke="#56E16A" strokeWidth="2" strokeLinecap="round"/></svg>
            </div>
            <div className="f-mono" style={{marginTop:12, fontSize:16, fontWeight:700, color:'#0F172A'}}>02:00</div>
            <div className="f-mono" style={{fontSize:11, color:'#94A3B8', letterSpacing:'1px'}}>EL SISTEMA GENERA</div>
          </div>
        )}
        {/* Flecha animada */}
        <svg width="270" height="60" viewBox="0 0 270 60" style={{position:'absolute', top:40, left:0}}>
          <path d="M10 30 H240" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round" strokeDasharray="230" strokeDashoffset={230*(1-flechaP)}/>
          {flechaP > 0.85 && <path d="M232 22 L246 30 L232 38" stroke="#0085FF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>}
        </svg>
      </div>

      {/* Columna derecha — Turnos del día */}
      <div style={{position:'absolute', right:150, top:290, width:600}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16, opacity:clamp((t-T.turnos[0])/0.5,0,1)}}>
          <span style={{width:10, height:10, borderRadius:100, background:'#10B981'}}/>
          <span className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>Turnos de hoy</span>
          <span className="f-mono" style={{fontSize:12, color:'#94A3B8'}}>· miércoles</span>
        </div>
        {TURNOS.map((tur,i)=>{
          const tp = clamp((t-T.turnos[i])/0.6, 0, 1), te = Easing.easeOutBack(tp);
          if (tp <= 0) return null;
          return (
            <div key={i} style={{background:'#fff', borderRadius:16, border:`1.5px solid ${tur.color}40`, boxShadow:`0 20px 50px ${tur.color}18`, padding:'26px 30px', opacity:clamp(tp*1.3,0,1), transform:`translateX(${(1-te)*40}px) scale(${lerp(0.94,1,te)})`}}>
              <div style={{display:'flex', alignItems:'center', gap:16}}>
                <div style={{width:8, height:56, borderRadius:100, background:tur.color}}/>
                <div>
                  <div className="f-mono" style={{fontSize:28, fontWeight:700, color:'#0F172A', letterSpacing:'0.5px'}}>{tur.rango}</div>
                  <div className="f-plex" style={{fontSize:15, fontWeight:600, color:'#64748B', marginTop:2}}>{tur.tipo} · estado Programada</div>
                </div>
                <div style={{marginLeft:'auto'}}><StatusChip label="Programada" color="primary" start={T.turnos[i]} t={t}/></div>
              </div>
            </div>
          );
        })}
        {notaP > 0 && (
          <div style={{marginTop:22, display:'flex', gap:12, padding:'16px 20px', borderRadius:14, background:'#F0FDF6', border:'1px solid #A7F3D0', opacity:notaE, transform:`translateY(${(1-notaE)*12}px)`}}>
            <span style={{fontSize:20}}>✓</span>
            <span className="f-plex" style={{fontSize:16, fontWeight:600, color:'#065F46', lineHeight:1.4}}>
              Nadie planifica a mano. El turno nace vacío, esperando los fichajes.
            </span>
          </div>
        )}
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCH03 });