// === Slide 02 — "Esto es Dinaup: todo en uno" — la resolución del caos ===
// LOCUCIÓN (bloque 2, audio real 16.11s): «Esto es Dinaup: los cinco sitios, en uno» [0.0] →
//   ventana Dinaup · «una sola pestaña» [4.06] · «una sola versión de cada dato» [5.61] → sello ·
//   «replicada, con copia de seguridad... no a merced de un Excel sin guardar» [11.01-13.73] →
//   badge replicado + Excel tachado. (El «dos partes» se movió a la diapositiva El mapa.)
function SlideCaos({ t }){
  const T = { win:0.3, tab:4.06, version:5.61, replica:11.01, tachaExcel:13.73 };
  const winP = clamp((t-T.win)/0.7, 0, 1), winE = Easing.easeOutBack(winP);
  const versionP = clamp((t-T.version)/0.5, 0, 1), versionE = Easing.easeOutBack(versionP);
  const replicaP = clamp((t-T.replica)/0.5, 0, 1), replicaE = Easing.easeOutBack(replicaP);
  const tachaP = clamp((t-T.tachaExcel)/0.5, 0, 1);
  const tabHot = t >= T.tab && t < T.tab+1.4;

  const items = [
    { i:'📥', l:'Facturas',  s:'al día' },
    { i:'🏦', l:'Banco',     s:'conciliado' },
    { i:'🤝', l:'Ventas',    s:'una sola cifra' },
    { i:'👥', l:'Equipo',    s:'fichado' },
    { i:'🛒', l:'Local',     s:'vendiendo' },
    { i:'📒', l:'Contabilidad', s:'cuadrada' },
  ];

  return (
    <SlideCanvas variant="promise">
      {/* Header */}
      <div style={{position:'absolute', top:64, left:0, right:0, textAlign:'center', zIndex:5, opacity:clamp((t-0.1)/0.5,0,1)}}>
        <div className="f-plex" style={{fontSize:14, fontWeight:600, letterSpacing:'2px', color:'#059669'}}>ESTO ES DINAUP</div>
        <h2 className="f-plex" style={{fontSize:52, fontWeight:700, letterSpacing:'-0.03em', margin:'12px 0 0', color:'#0F172A'}}>
          Los cinco sitios. <span className="grad-text">En uno.</span>
        </h2>
      </div>

      {/* Ventana Dinaup — todo dentro, una pestaña */}
      <div style={{position:'absolute', left:480, top:240, width:960, background:'#fff', borderRadius:14, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:`0 40px 100px rgba(0,133,255,0.22), 0 10px 26px rgba(15,23,42,0.10)${tabHot?', 0 0 0 4px rgba(0,133,255,0.14)':''}`, opacity:winP, transform:`translateY(${(1-winE)*26}px) scale(${lerp(0.95,1,winE)})`}}>
        <BrowserChrome url="play.dinaup.com/App" title="Dinaup — Tu empresa"/>
        <DinaupAppHeader breadcrumb={["Inicio"]}/>
        <div style={{padding:'22px 28px', background:'#F8FAFC'}}>
          <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
            <span className="f-mono" style={{fontSize:11.5, fontWeight:700, color: tabHot?'#0085FF':'#64748B', background: tabHot?'rgba(0,133,255,0.10)':'#EEF2F7', border:`1px solid ${tabHot?'rgba(0,133,255,0.4)':'#E2E8F0'}`, borderRadius:100, padding:'5px 13px'}}>● 1 pestaña · todo dentro</span>
            {versionP > 0 && (
              <span className="f-mono" style={{fontSize:11.5, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.10)', border:'1.5px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'5px 13px', opacity:clamp(versionP*1.3,0,1), transform:`scale(${lerp(0.7,1,versionE)})`, display:'inline-block'}}>✓ una sola versión de cada dato</span>
            )}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:13}}>
            {items.map((it,j)=>{
              const ip = clamp((t-(0.9+j*0.12))/0.4, 0, 1), ie = Easing.easeOutBack(ip);
              return (
                <div key={j} style={{display:'flex', alignItems:'center', gap:12, padding:'15px 16px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:11, opacity:clamp(ip*1.3,0,1), transform:`scale(${lerp(0.85,1,ie)})`}}>
                  <span style={{fontSize:22}}>{it.i}</span>
                  <div>
                    <div className="f-plex" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>{it.l}</div>
                    <div style={{fontSize:11.5, color:'#059669', fontWeight:600}}>✓ {it.s}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Badge replicado + copia vs Excel sin guardar tachado */}
      {replicaP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:812, display:'flex', justifyContent:'center', gap:16, zIndex:6}}>
          <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:9, fontSize:14, fontWeight:800, color:'#059669', background:'#ECFDF5', border:'1.5px solid #A7F3D0', borderRadius:100, padding:'11px 22px', boxShadow:'0 12px 30px rgba(16,185,129,0.16)', opacity:clamp(replicaP*1.3,0,1), transform:`translateY(${(1-replicaE)*16}px)`}}>
            🛡️ Replicado · con copia de seguridad
          </span>
          {tachaP > 0 && (
            <span className="f-mono" style={{position:'relative', display:'inline-flex', alignItems:'center', fontSize:14, fontWeight:600, color:'#94A3B8', background:'#F1F5F9', border:'1.5px solid #E2E8F0', borderRadius:100, padding:'11px 22px', opacity:clamp(tachaP*1.3,0,1)}}>
              Excel sin guardar
              <span style={{position:'absolute', left:12, right:12, top:'52%', height:2.5, background:'#EF4444', borderRadius:2, transform:`scaleX(${Easing.easeInOutCubic(tachaP)})`, transformOrigin:'0 50%'}}/>
            </span>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { SlideCaos });