// === Escena 01 — "El control horario, en tres piezas" ===
// Tres tarjetas entran en cascada: Horario (plan) · Turno (la cuenta) · Fichaje (la prueba).
// Cierra con la frase madre: "El fichaje es la prueba. El turno es la cuenta."
// LOCUCIÓN (audio/escena-01.mp3): tres piezas presentadas una a una, con pausa
// entre cada una; la frase madre llega al final, cuando ya se han visto las tres.
function EscenaCH01({ t }){
  const T = { card:[6.5, 13.5, 21.5], frase:31.5, sub:36.0 };

  const PIEZAS = [
    { key:'horario', color:'#0085FF', tag:'PLANIFICACIÓN', name:'Horario',
      desc:'Qué jornada toca cada día de la semana.', icon:'calendar', edit:'Se configura' },
    { key:'turno', color:'#10B981', tag:'LA CUENTA', name:'Turno',
      desc:'Lo que cuenta como trabajado. Lo que llega a nómina.', icon:'sum', edit:'Se corrige' },
    { key:'fichaje', color:'#FB8C00', tag:'LA PRUEBA', name:'Fichaje',
      desc:'La marca del reloj. La prueba para una inspección.', icon:'finger', edit:'Nunca se toca' },
  ];

  const iconFor = (kind, color)=>{
    if (kind==='calendar') return (
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2.5" stroke={color} strokeWidth="1.9"/><path d="M3 9 H21 M8 3 V6 M16 3 V6" stroke={color} strokeWidth="1.9" strokeLinecap="round"/></svg>
    );
    if (kind==='sum') return (
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M6 5 H18 L11 12 L18 19 H6" stroke={color} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>
    );
    return (
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M6 11 a10 10 0 0 1 12 0 M8.5 13.5 a6.5 6.5 0 0 1 7 0 M11 16 a3 3 0 0 1 2 0" stroke={color} strokeWidth="1.9" strokeLinecap="round"/><circle cx="12" cy="19" r="1.4" fill={color}/></svg>
    );
  };

  const fraseP = clamp((t-T.frase)/0.8, 0, 1), fraseE = Easing.easeOutCubic(fraseP);
  const subP = clamp((t-T.sub)/0.8, 0, 1);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="RECURSOS HUMANOS · CONTROL HORARIO" title={<span>El control horario, en <span className="grad-text">tres piezas</span></span>}/>

      {/* Tres tarjetas */}
      <div style={{position:'absolute', left:0, right:0, top:300, display:'flex', gap:34, justifyContent:'center'}}>
        {PIEZAS.map((p,i)=>{
          const cp = clamp((t-T.card[i])/0.6, 0, 1), ce = Easing.easeOutBack(cp);
          if (cp <= 0) return null;
          return (
            <div key={p.key} style={{width:420, background:'#fff', borderRadius:20, border:`1px solid ${p.color}33`, boxShadow:`0 26px 60px ${p.color}1f, 0 6px 16px rgba(15,23,42,0.05)`, padding:'32px 34px', opacity:clamp(cp*1.3,0,1), transform:`translateY(${(1-ce)*40}px) scale(${lerp(0.92,1,ce)})`}}>
              <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:20}}>
                <div style={{width:64, height:64, borderRadius:16, background:`${p.color}14`, display:'flex', alignItems:'center', justifyContent:'center'}}>{iconFor(p.icon, p.color)}</div>
                <div>
                  <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:p.color}}>{p.tag}</div>
                  <div className="f-plex" style={{fontSize:32, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', lineHeight:1.1}}>{p.name}</div>
                </div>
              </div>
              <div className="f-plex" style={{fontSize:18, fontWeight:500, color:'#475569', lineHeight:1.45, minHeight:78, opacity:clamp((t-(T.card[i]+1.2))/0.7,0,1)}}>{p.desc}</div>
              <div style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:8, padding:'7px 15px', borderRadius:100, background:`${p.color}12`, border:`1px solid ${p.color}30`, opacity:clamp((t-(T.card[i]+2.6))/0.5,0,1), transform:`scale(${lerp(0.85,1,Easing.easeOutBack(clamp((t-(T.card[i]+2.6))/0.5,0,1)))})`}}>
                <span style={{width:7, height:7, borderRadius:100, background:p.color}}/>
                <span className="f-mono" style={{fontSize:12, fontWeight:700, color:p.color, letterSpacing:'0.5px'}}>{p.edit}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Frase madre */}
      {fraseP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:800, textAlign:'center', opacity:fraseE, transform:`translateY(${(1-fraseE)*16}px)`}}>
          <div className="f-plex" style={{fontSize:40, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A'}}>
            El fichaje es la <span style={{color:'#FB8C00'}}>prueba</span>. El turno es la <span style={{color:'#10B981'}}>cuenta</span>.
          </div>
          {subP > 0 && (
            <div className="f-plex" style={{marginTop:14, fontSize:21, fontWeight:500, color:'#64748B', opacity:subP}}>
              Cada pieza en su sitio, y ninguna pisa a la otra.
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCH01 });