// === escena-03 — El tiempo: dos campos, y uno se confunde siempre ===
function EscenaIU03({ t }){

  const T = {
    bloque:   0.10,   // "El segundo bloque es el tiempo"
    vida:     3.75,   // "La vida del activo"
    ocho:     5.78,   // "ocho para un torno"
    inicio:  11.04,   // "fecha de inicio de actividad"
    noes:    14.21,   // "no es la fecha de la compra"
    septi:   24.40,   // "la fecha buena es septiembre"
    salida:  27.89,   // "el tercer bloque"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const VIDAS = [['Torno','8 años'],['Furgoneta','6 años'],['Ordenador','4 años']];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="BLOQUE 2 · EL TIEMPO" title="Dos campos" />

      {/* La vida del activo */}
      <div style={{position:'absolute', left:150, top:280, width:740, opacity: ap(T.vida, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 18px 46px rgba(15,23,42,0.08)', padding:'28px 32px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>CAMPO 1</div>
          <div className="f-plex" style={{fontSize:34, fontWeight:600, color:'#0F172A', marginTop:6}}>
            Vida del activo, en años
          </div>
          <div style={{marginTop:20}}>
            {VIDAS.map((v,i)=>{
              const p = ap(T.ocho + i*0.5, 0.45, Easing.easeOutBack);
              return (
                <div key={v[0]} style={{
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  padding:'16px 18px', marginTop:10, borderRadius:12,
                  background:'#F8FAFC', border:'1px solid #EEF2F7',
                  opacity:p, transform:`translateY(${(1-p)*12}px)`,
                }}>
                  <span style={{fontSize:24, color:'#0F172A'}}>{v[0]}</span>
                  <span className="f-mono" style={{fontSize:26, color:'#0085FF', fontWeight:700}}>{v[1]}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* El inicio de actividad — el campo que más se confunde */}
      <div style={{position:'absolute', left:960, top:280, width:820, opacity: ap(T.inicio, 0.6),
                   transform:`translateY(${(1-ap(T.inicio,0.6))*20}px)`}}>
        <div style={{background:'#fff', borderRadius:18,
                     border:`2px solid ${t >= T.noes ? 'rgba(251,140,0,0.55)' : '#E2E8F0'}`,
                     boxShadow: t >= T.noes ? '0 22px 56px rgba(251,140,0,0.16)':'0 18px 46px rgba(15,23,42,0.08)',
                     padding:'28px 32px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>CAMPO 2</div>
          <div className="f-plex" style={{fontSize:34, fontWeight:600, color:'#0F172A', marginTop:6}}>
            Fecha de inicio de actividad
          </div>

          {/* Las tres fechas del mismo bien: dos tachadas, una buena */}
          <div style={{marginTop:22}}>
            {[
              { l:'Fecha de compra',    v:'12/07/2026', mala:true,  b:T.noes },
              { l:'Fecha de la factura',v:'14/07/2026', mala:true,  b:T.noes + 1.2 },
              { l:'Puesta en marcha',   v:'01/09/2026', mala:false, b:T.septi },
            ].map(f=>{
              const p = ap(f.b, 0.5);
              const buena = f.mala === false && t >= T.septi;
              return (
                <div key={f.l} style={{
                  display:'grid', gridTemplateColumns:'1fr 220px', gap:16, alignItems:'center',
                  padding:'16px 18px', marginTop:10, borderRadius:12,
                  background: buena ? 'rgba(16,185,129,0.09)' : '#F8FAFC',
                  border:`1px solid ${buena ? 'rgba(16,185,129,0.5)' : '#EEF2F7'}`,
                  opacity: p * (f.mala && t >= T.septi ? 0.42 : 1),
                  textDecoration: f.mala && t >= T.septi ? 'line-through' : 'none',
                }}>
                  <span style={{fontSize:23, color:'#0F172A'}}>{f.l}</span>
                  <span className="f-mono" style={{fontSize:24, color:'#0F172A', textAlign:'right'}}>{f.v}</span>
                </div>
              );
            })}
          </div>

          <div style={{fontSize:21, color:'#64748B', marginTop:18, opacity: ap(T.septi + 1.0, 0.6)}}>
            Es desde cuándo la máquina está funcionando.
          </div>
        </div>
      </div>

      <div style={{
        position:'absolute', left:0, right:0, bottom:50, textAlign:'center',
        fontSize:26, color:'#0F172A', opacity: ap(T.salida, 0.6),
      }}>Y ahora sí, el tercer bloque</div>

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