// === Escena 05 — "Pieza 3: el fichaje" · audio real 24.16s ===
// LOCUCIÓN: "Las ocho y doce de la mañana. Llega la primera del equipo, teclea su código... o
//   pasa su tarjeta... y dentro. En tu pantalla, el equipo en directo: quién está, desde qué
//   hora. Y cada fichaje queda registrado a prueba de inspección. Tú no has llegado todavía...
//   y tu empresa ya está en marcha. Y ahora, lo mejor de tenerlo todo ahí dentro: los datos."
// UI: slide-fichaje del master CON el ajuste aplicado (terminal código/tarjeta, sin QR ni móvil):
//   teclado PIN + lector RFID → estado verde → vista admin en directo (cascada + n/4) → log legal.
function Escena05({ t }){
  const T = {
    win:0.8,
    pin:[3.6, 3.95, 4.3, 4.65],
    card:5.3, cardEnd:6.2, halo:5.9,
    ok:7.0,
    admin:8.3, rows:[8.9, 9.6, 10.3, 11.0],
    log:13.1, glow:17.5, sweep:21.2,
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const nPin = T.pin.reduce((a,at)=> a + (t>=at?1:0), 0);
  const cardP = clamp((t-T.card)/(T.cardEnd-T.card), 0, 1);
  const haloOn = t >= T.halo && t < T.ok+0.6;
  const okP = clamp((t-T.ok)/0.45, 0, 1), okE = Easing.easeOutBack(okP);
  const scanning = t >= T.pin[3]+0.3 && t < T.ok;

  const EQUIPO = [
    { n:'María José', h:'08:12', c:'#0085FF', ini:'MJ' },
    { n:'Juan R.',    h:'08:14', c:'#8B5CF6', ini:'JR' },
    { n:'Carlos A.',  h:'08:17', c:'#F59E0B', ini:'CA' },
    { n:'Ana L.',     h:'08:19', c:'#10B981', ini:'AL' },
  ];
  const nIn = T.rows.reduce((a,at)=> a + (t>=at?1:0), 0);
  const adminP = clamp((t-T.admin)/0.5, 0, 1);
  const logP = clamp((t-T.log)/0.5, 0, 1), logE = Easing.easeOutBack(logP);
  const glowOn = t >= T.glow && t < T.glow+2.2;
  const glow = glowOn ? Math.sin((t-T.glow)/2.2*Math.PI) : 0;
  const sweepP = clamp((t-T.sweep)/1.1, 0, 1);

  const keypad = ['1','2','3','4','5','6','7','8','9','','0','⌫'];

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="08:12" label="El equipo llega" start={0.3}/>
      <DemoHeader t={Math.max(0,t-0.3)} eyebrow="RRHH · FICHAJE" title={<span>Teclea su código. <span className="grad-text">O pasa su tarjeta.</span></span>}/>

      <div style={{position:'absolute', left:170, top:180, right:170, bottom:70, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:`0 30px 80px rgba(0,133,255,${0.15+glow*0.1}), 0 8px 20px rgba(15,23,42,0.06)`, opacity:winP, transform:`translateY(${(1-winE)*24}px)`}}>
        <BrowserChrome url="play.dinaup.com/BusinessApp/el-molino/fichar" title="Fichaje — Dinaup"/>
        <DinaupAppHeader breadcrumb={["RRHH","Fichaje"]}/>

        {/* Barrido puente hacia D6 */}
        {sweepP > 0 && (
          <div style={{position:'absolute', left:0, right:0, top:`${sweepP*100}%`, height:120, background:'linear-gradient(180deg, transparent, rgba(0,133,255,0.10), transparent)', zIndex:8, pointerEvents:'none'}}/>
        )}

        <div style={{display:'grid', gridTemplateColumns:'330px 250px 1fr', gap:24, alignItems:'center', height:'calc(100% - 142px)', padding:'22px 34px'}}>

          {/* Col 1 — Terminal: PIN + lector de tarjeta */}
          <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, padding:'18px 20px', boxShadow:'0 6px 18px rgba(15,23,42,0.05)'}}>
            <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A', marginBottom:4}}>Terminal de entrada</div>
            <div style={{fontSize:10, color:'#94A3B8', marginBottom:12}}>Código o tarjeta. Sin apps.</div>
            {/* Display del PIN */}
            <div style={{display:'flex', justifyContent:'center', gap:12, background:'#0F172A', borderRadius:10, padding:'14px 0', marginBottom:12}}>
              {[0,1,2,3].map((i)=>(
                <span key={i} style={{width:16, height:16, borderRadius:100, background: i<nPin?'#56E16A':'rgba(255,255,255,0.15)', boxShadow: i<nPin?'0 0 10px rgba(86,225,106,0.7)':'none', transform:`scale(${i===nPin-1 && t<T.pin[i]+0.25?1.35:1})`, transition:'transform 150ms'}}/>
              ))}
            </div>
            {/* Teclado numérico */}
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:7, marginBottom:14}}>
              {keypad.map((k,i)=>{
                const pressIdx = {'2':0,'7':1,'0':2,'4':3}[k];
                const pressing = pressIdx !== undefined && t >= T.pin[pressIdx] && t < T.pin[pressIdx]+0.22;
                return (
                  <div key={i} className="f-mono" style={{height:38, borderRadius:8, background: k? (pressing?'#0085FF':'#F8FAFC') :'transparent', border: k?`1px solid ${pressing?'#0085FF':'#E2E8F0'}`:'none', color: pressing?'#fff':'#334155', fontSize:14, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', transform:`translateY(${pressing?2:0}px)`, transition:'all 120ms'}}>{k}</div>
                );
              })}
            </div>
            {/* Lector RFID + tarjeta */}
            <div style={{position:'relative', height:74, background:'#F8FAFC', border:`1.5px solid ${haloOn?'rgba(0,133,255,0.6)':'#E2E8F0'}`, borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: haloOn?`0 0 0 5px rgba(0,133,255,0.18)`:'none', transition:'all 250ms', overflow:'visible'}}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" style={{opacity:0.6}}>
                <path d="M4 9 a10 10 0 0 1 16 0 M7 12 a6 6 0 0 1 10 0 M10 15 a2.5 2.5 0 0 1 4 0" stroke={haloOn?'#0085FF':'#94A3B8'} strokeWidth="1.8" strokeLinecap="round"/>
                <circle cx="12" cy="18" r="1.6" fill={haloOn?'#0085FF':'#94A3B8'}/>
              </svg>
              <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8', position:'absolute', bottom:6, left:0, right:0, textAlign:'center'}}>lector de tarjeta</span>
              {/* Tarjeta que se desliza (desaparece tras el fichaje) */}
              {cardP > 0 && t < T.ok + 0.9 && (
                <div style={{position:'absolute', left:`${lerp(-40, 96, Easing.easeInOutCubic(cardP))}px`, top:-10, width:110, height:66, background:'linear-gradient(135deg, #0F172A, #1E3A5F)', borderRadius:9, boxShadow:'0 14px 30px rgba(15,23,42,0.4)', transform:`rotate(${lerp(-6,2,cardP)}deg)`, opacity: 1 - clamp((t-T.ok-0.4)/0.5, 0, 1), padding:'8px 10px', zIndex:5}}>
                  <DinaupLogo mark size={14} style={{filter:'brightness(0) invert(1)', opacity:0.9}}/>
                  <div className="f-mono" style={{fontSize:7.5, color:'rgba(255,255,255,0.75)', marginTop:10}}>MARÍA JOSÉ G.</div>
                  <div className="f-mono" style={{fontSize:6.5, color:'rgba(255,255,255,0.45)'}}>EMPLEADA · 0412</div>
                </div>
              )}
            </div>
          </div>

          {/* Col 2 — Estado del terminal */}
          <div style={{textAlign:'center'}}>
            <div style={{width:210, height:210, margin:'0 auto', borderRadius:24, background: okP>0 ? '#10B981' : '#0F172A', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:10, boxShadow: okP>0?'0 24px 60px rgba(16,185,129,0.4)':'0 24px 60px rgba(15,23,42,0.3)', transform:`scale(${lerp(0.96,1,okE)})`, transition:'background 350ms'}}>
              {okP > 0 ? (
                <React.Fragment>
                  <span style={{fontSize:52, color:'#fff', fontWeight:800, lineHeight:1}}>✓</span>
                  <span className="f-plex" style={{fontSize:16, fontWeight:800, color:'#fff'}}>Entrada 08:12</span>
                  <span className="f-mono" style={{fontSize:9.5, color:'rgba(255,255,255,0.8)'}}>María José · registrada</span>
                </React.Fragment>
              ) : scanning ? (
                <React.Fragment>
                  <span style={{width:34, height:34, border:'3.5px solid rgba(255,255,255,0.2)', borderTopColor:'#fff', borderRadius:100, display:'inline-block', transform:`rotate(${(t*520)%360}deg)`}}/>
                  <span className="f-mono" style={{fontSize:11, color:'rgba(255,255,255,0.85)'}}>Registrando…</span>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <DinaupLogo mark size={34} style={{filter:'brightness(0) invert(1)', opacity:0.9}}/>
                  <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#fff'}}>Hola, María José</span>
                  <span className="f-mono" style={{fontSize:9.5, color:'rgba(255,255,255,0.6)'}}>código o tarjeta</span>
                </React.Fragment>
              )}
            </div>
          </div>

          {/* Col 3 — Vista admin en directo */}
          <div style={{background:'#fff', border:`1.5px solid ${adminP>0?'rgba(0,133,255,0.35)':'#E2E8F0'}`, borderRadius:14, padding:'18px 22px', boxShadow: adminP>0?'0 14px 40px rgba(0,133,255,0.1)':'none', transition:'all 350ms'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14}}>
              <div>
                <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A', display:'flex', alignItems:'center', gap:8}}>
                  Equipo ahora mismo
                  <span style={{width:8, height:8, borderRadius:100, background:'#10B981', boxShadow:'0 0 8px rgba(16,185,129,0.8)', animation:'none', opacity:0.6+0.4*Math.sin(t*4)}}/>
                </div>
                <div style={{fontSize:10.5, color:'#94A3B8'}}>Tu pantalla, en directo</div>
              </div>
              <span className="f-mono" style={{fontSize:20, fontWeight:800, color:'#059669'}}>{nIn}<span style={{fontSize:12, color:'#94A3B8'}}>/4 dentro</span></span>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {EQUIPO.map((p,i)=>{
                const isIn = t >= T.rows[i];
                const justIn = isIn && t < T.rows[i]+0.6;
                return (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'9px 13px', background: isIn?'rgba(16,185,129,0.07)':'#F8FAFC', border:`1px solid ${isIn?'rgba(16,185,129,0.4)':'#E2E8F0'}`, borderRadius:10, transform:`scale(${justIn?1.015:1})`, transition:'all 350ms'}}>
                    <span style={{width:30, height:30, borderRadius:100, background: isIn?p.c:'#CBD5E1', color:'#fff', fontSize:10.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', transition:'background 350ms'}}>{p.ini}</span>
                    <div style={{flex:1}}>
                      <div className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#0F172A'}}>{p.n}</div>
                      <div className="f-mono" style={{fontSize:9.5, color: isIn?'#059669':'#CBD5E1'}}>{isIn?`● Entrada ${p.h}`:'—'}</div>
                    </div>
                    {isIn && <StatusChip label="Dentro" color="success" start={T.rows[i]} t={t}/>}
                  </div>
                );
              })}
            </div>
            {/* Log legal */}
            {logP > 0 && (
              <div style={{marginTop:14, display:'flex', alignItems:'center', gap:10, background:'#0F172A', borderRadius:100, padding:'8px 16px', opacity:clamp(logP*1.3,0,1), transform:`translateY(${(1-logE)*10}px)`}}>
                <span style={{fontSize:11}}>🔒</span>
                <span className="f-mono" style={{fontSize:9.5, fontWeight:700, color:'#56E16A', letterSpacing:'1px'}}>LOG LEGAL</span>
                <span className="f-mono" style={{fontSize:9, color:'rgba(255,255,255,0.65)'}}>08:12:04 · María José · entrada · hash sha256:ab8f…</span>
              </div>
            )}
          </div>
        </div>
      </div>

    </SlideCanvas>
  );
}
Object.assign(window, { Escena05 });