// === Escena 02 — "Un solo botón" ===
// El terminal de fichaje: una pulsación. El sistema sabe si es entrada o salida.
// Primera pulsación → ENTRADA (verde). Segunda → SALIDA (ámbar). Una pulsación = un significado.
function EscenaCH02({ t }){
  // LOCUCIÓN (audio/escena-02.mp3): teclea el código → pulsa → ENTRADA (pausa
  // larga: "pasa la jornada") → vuelve a pulsar → SALIDA → regla de oro.
  const T = {
    win:1.0,
    tap1:9.0, entrada:9.5,
    tap2:25.0, salida:25.5,
    regla:33.5,
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);

  // Fases del estado del terminal
  const entradaOn = t >= T.entrada && t < T.tap2;
  const salidaOn = t >= T.salida;
  const press1 = t >= T.tap1 && t < T.tap1+0.28;
  const press2 = t >= T.tap2 && t < T.tap2+0.28;

  let estado = 'idle';
  if (salidaOn) estado = 'salida';
  else if (entradaOn) estado = 'entrada';

  const disco = {
    idle:   { bg:'#0F172A', ring:'rgba(15,23,42,0.28)' },
    entrada:{ bg:'#10B981', ring:'rgba(16,185,129,0.4)' },
    salida: { bg:'#F59E0B', ring:'rgba(245,158,11,0.4)' },
  }[estado];

  const okP = estado==='entrada' ? clamp((t-T.entrada)/0.4,0,1)
            : estado==='salida'  ? clamp((t-T.salida)/0.4,0,1) : 0;
  const okE = Easing.easeOutBack(okP);

  const reglaP = clamp((t-T.regla)/0.8, 0, 1), reglaE = Easing.easeOutCubic(reglaP);

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="FICHAR" title={<span>Un botón. El sistema sabe si <span className="grad-text">entras o sales</span></span>}/>

      <div style={{position:'absolute', left:'50%', top:210, transform:'translateX(-50%)', width:1100, opacity:winP, transition:'opacity 300ms'}}>
        <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 30px 80px rgba(15,23,42,0.10)', overflow:'hidden', transform:`translateY(${(1-winE)*24}px)`}}>
          <BrowserChrome url="play.dinaup.com/BusinessApp/el-molino/Fichar" title="Fichaje — Dinaup"/>

          <div style={{display:'grid', gridTemplateColumns:'1fr 360px', gap:0}}>
            {/* Izquierda — identificador + botón */}
            <div style={{padding:'44px 50px', borderRight:'1px solid #EEF2F7'}}>
              <div className="f-plex" style={{fontSize:15, fontWeight:600, color:'#94A3B8', marginBottom:10}}>Identificador de empleado</div>
              <div style={{display:'flex', alignItems:'center', gap:12, background:'#F8FAFC', border:'2px solid #E2E8F0', borderRadius:12, padding:'16px 20px', marginBottom:26}}>
                <span className="f-mono" style={{fontSize:24, fontWeight:700, color:'#0F172A', letterSpacing:'4px'}}>MARÍA-JOSÉ</span>
                <span style={{marginLeft:'auto', width:2, height:26, background:'#0085FF', opacity:0.6+0.4*Math.sin(t*5)}}/>
              </div>
              <div style={{
                display:'flex', alignItems:'center', justifyContent:'center', gap:14,
                height:96, borderRadius:16,
                background: (press1||press2) ? '#0066CC' : 'linear-gradient(180deg,#0085FF,#0066CC)',
                boxShadow: (press1||press2) ? '0 4px 12px rgba(0,133,255,0.4)' : '0 14px 34px rgba(0,133,255,0.35)',
                transform:`translateY(${(press1||press2)?3:0}px)`, transition:'all 120ms',
              }}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M5 12 L10 17 L19 7" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#fff', letterSpacing:'0.5px'}}>Fichar</span>
              </div>
              <div className="f-mono" style={{textAlign:'center', marginTop:16, fontSize:13, color:'#94A3B8'}}>
                un tótem · una tablet · un móvil
              </div>
            </div>

            {/* Derecha — resultado */}
            <div style={{padding:'36px 30px', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', background:'#FBFCFE'}}>
              <div style={{
                width:250, height:250, borderRadius:28, background:disco.bg,
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:12,
                boxShadow:`0 24px 60px ${disco.ring}`, transition:'background 350ms',
                transform:`scale(${estado==='idle'?1:lerp(0.94,1,okE)})`,
              }}>
                {estado==='idle' && (
                  <React.Fragment>
                    <DinaupLogo mark size={40} style={{filter:'brightness(0) invert(1)', opacity:0.9}}/>
                    <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#fff'}}>Listo para fichar</span>
                    <span className="f-mono" style={{fontSize:11, color:'rgba(255,255,255,0.6)'}}>pulsa el botón</span>
                  </React.Fragment>
                )}
                {estado==='entrada' && (
                  <React.Fragment>
                    <svg width="60" height="60" viewBox="0 0 24 24" fill="none"><path d="M4 12 L10 18 L20 6" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span className="f-plex" style={{fontSize:24, fontWeight:800, color:'#fff'}}>¡Bienvenida!</span>
                    <span className="f-mono" style={{fontSize:13, color:'rgba(255,255,255,0.9)'}}>Entrada · 09:00</span>
                  </React.Fragment>
                )}
                {estado==='salida' && (
                  <React.Fragment>
                    <svg width="60" height="60" viewBox="0 0 24 24" fill="none"><path d="M14 4 H6 a2 2 0 0 0-2 2 v12 a2 2 0 0 0 2 2 h8 M10 12 H21 M17 8 l4 4 l-4 4" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span className="f-plex" style={{fontSize:24, fontWeight:800, color:'#fff'}}>¡Hasta pronto!</span>
                    <span className="f-mono" style={{fontSize:13, color:'rgba(255,255,255,0.9)'}}>Salida · 14:00</span>
                  </React.Fragment>
                )}
              </div>
              <div className="f-mono" style={{marginTop:20, fontSize:12, color:'#94A3B8', letterSpacing:'1px', height:16}}>
                {estado==='idle' ? 'SIN FICHAJE ABIERTO' : estado==='entrada' ? 'FICHAJE ABIERTO →' : 'FICHAJE CERRADO ✓'}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Regla */}
      {reglaP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:918, textAlign:'center', opacity:reglaE, transform:`translateY(${(1-reglaE)*14}px)`}}>
          <div className="f-plex" style={{fontSize:34, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
            Una pulsación = un significado. <span style={{color:'#64748B', fontWeight:500}}>Nunca abre y cierra a la vez.</span>
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCH02 });