// === Escena 10 — "La red" · audio real 31.63s ===
// LOCUCIÓN: "¿Te acuerdas del sin errores? No es que la IA sea perfecta. Es que damos por
//   hecho que se equivoca. Por eso el original está siempre a la vista. Por eso el proveedor
//   se comprueba contra Hacienda. Por eso las repetidas no entran... y las que faltan, avisan.
//   Y por eso nada se contabiliza hasta que tú le das a Aceptar. La IA hace el trabajo, el
//   sistema vigila... y la última palabra es tuya."
// BEATS: callback del claim de la E02 · cada "por eso" enciende su card (mini-thumbnail REAL
//   de lo visto) · pulsos convergen en el botón ✓ ACEPTAR que late · tríada final una a una.
function Escena10({ t }){
  const T = {
    head:    0.5,   // "Te acuerdas del sin errores"           → cabecera
    title:   5.9,   // "damos por hecho que se equivoca"       → titular
    cards:   [8.3, 11.4, 14.8, 19.9],   // "el original está siempre a la vista" · "el proveedor se comprueba contra Hacienda" · "las repetidas no entran" · "nada se contabiliza hasta que tú le das a Aceptar"
    pulsos: 21.3,                                            // (apoyo) pulsos
    ring:   22.0,                                            // (apoyo) anillo
    triada: [23.2, 24.8, 26.7],   // "La IA hace el trabajo" · "el sistema vigila" · "la última palabra es tuya"
  };
  const CX = [420, 800, 1180, 1560];          // centros de las 4 cards
  const BTN = { x:960, y:668 };

  const headP = clamp((t-T.head)/0.5, 0, 1);
  const cardP = (i)=> clamp((t-T.cards[i])/0.5, 0, 1);
  const ringOn = t >= T.ring;
  const beat = ringOn ? 0.5 + 0.5*Math.sin((t-T.ring)*2.4) : 0;

  // Mini-thumbnails (ecos de lo visto)
  const thumb = (i, on)=>{
    const common = { borderRadius:8, height:104, border:'1px solid #EEF2F7', background:'#F8FAFC', position:'relative', overflow:'hidden', opacity:on?1:0.4 };
    if (i === 0) return (
      <div style={common}>
        <div style={{position:'absolute', left:10, top:10, bottom:10, width:'44%', display:'flex', flexDirection:'column', gap:5}}>
          {[0,1,2].map(k=><div key={k} style={{height:14, background:'#fff', border:'1px solid #E2E8F0', borderRadius:4}}/>)}
        </div>
        <div style={{position:'absolute', right:10, top:10, bottom:10, width:'44%', background:'#fff', border:'1px solid #E2E8F0', borderRadius:4, padding:'6px 7px'}}>
          <div style={{fontSize:6.5, fontWeight:800, color:'#0F172A', fontFamily:"'IBM Plex Sans',sans-serif"}}>ENDESA</div>
          {[82,64,74].map((w,k)=><div key={k} style={{height:3, width:`${w}%`, background:'#EEF2F7', borderRadius:2, marginTop:4}}/>)}
          <div className="f-mono" style={{position:'absolute', right:7, bottom:5, fontSize:7, fontWeight:800, color:'#0F172A'}}>288,47 €</div>
        </div>
        {on && <div style={{position:'absolute', left:'46%', top:'40%', width:16, height:2.5, background:'#10B981', transform:'rotate(0deg)'}}/>}
      </div>
    );
    if (i === 1) return (
      <div style={{...common, display:'flex', alignItems:'center', justifyContent:'center', gap:10}}>
        <span className="f-mono" style={{fontSize:15, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.12)', border:'2px solid rgba(16,185,129,0.5)', borderRadius:100, padding:'6px 16px'}}>✓ 6/6</span>
        <div>
          <div className="f-mono" style={{fontSize:8.5, color:'#64748B'}}>Censo AEAT ✓</div>
          <div className="f-mono" style={{fontSize:8.5, color:'#64748B'}}>VIES ✓ · NIF ✓</div>
        </div>
      </div>
    );
    if (i === 2) return (
      <div style={{...common, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 12px'}}>
        <div style={{background:'#FFFBEB', border:'1.5px solid #FCD34D', borderRadius:8, padding:'9px 13px', width:'100%'}}>
          <div className="f-plex" style={{fontSize:10.5, fontWeight:700, color:'#92400E'}}>⚠ Ya está registrada</div>
          <div className="f-mono" style={{fontSize:7.5, color:'#B45309', marginTop:2}}>END-887421 · no entra dos veces</div>
        </div>
      </div>
    );
    return (
      <div style={{...common, display:'flex', alignItems:'center', justifyContent:'center', gap:8}}>
        {['✓','✓','✓','✕','✓'].map((c,k)=>(
          <div key={k} style={{width:26, height:26, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', fontSize:c==='✕'?13:10, fontWeight:800, color: c==='✕'?'#EF4444':'#10B981', background: c==='✕'?'rgba(239,68,68,0.16)':'rgba(16,185,129,0.12)', border:`1.5px solid ${c==='✕'?'rgba(239,68,68,0.5)':'rgba(16,185,129,0.35)'}`, transform: c==='✕'&&on?'scale(1.15)':'scale(1)'}}>{c}</div>
        ))}
      </div>
    );
  };

  const CARDS = [
    { l:'El original, a la vista' },
    { l:'Proveedor comprobado' },
    { l:'Repetidas: no entran' },
    { l:'Faltantes: avisan' },
  ];
  const TRIADA = ['La IA trabaja', 'El sistema vigila', 'Tú decides'];

  return (
    <SlideCanvas variant="light-soft">
      <div style={{position:'absolute', top:104, left:0, right:0, textAlign:'center'}}>
        <div className="f-mono" style={{fontSize:12.5, letterSpacing:'3px', color:'#0085FF', marginBottom:8, opacity:headP}}>¿TE ACUERDAS DEL «SIN ERRORES»?</div>
        <div className="f-plex" style={{fontSize:38, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em', opacity:clamp((t-T.title)/0.5,0,1), transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-T.title)/0.5,0,1)))*14}px)`}}>Damos por hecho que se equivoca</div>
      </div>

      {/* Las 4 cards-eco */}
      {CARDS.map((c,i)=>{
        const p = cardP(i), e = Easing.easeOutBack(p);
        const on = p >= 0.6;
        return (
          <div key={i} style={{position:'absolute', left:CX[i]-172, top:316, width:344, background:'#fff', border:`1.5px solid ${on?'rgba(0,133,255,0.35)':'#E2E8F0'}`, borderRadius:14, padding:'14px 15px 13px', boxShadow: on?'0 20px 48px rgba(0,133,255,0.14)':'0 10px 26px rgba(15,23,42,0.06)', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*30}px) scale(${lerp(0.85,1,e)})`}}>
            {thumb(i, on)}
            <div style={{display:'flex', alignItems:'center', gap:9, marginTop:12}}>
              <span className="f-mono" style={{fontSize:10, fontWeight:800, color:'#0085FF'}}>{i+1}</span>
              <span className="f-plex" style={{fontSize:15.5, fontWeight:700, color:'#0F172A'}}>{c.l}</span>
            </div>
          </div>
        );
      })}

      {/* Pulsos convergiendo al botón */}
      {CARDS.map((_,i)=>{
        const p0 = T.pulsos + i*0.14;
        const p = clamp((t-p0)/0.75, 0, 1);
        if (p <= 0 || p >= 1) return null;
        const e = Easing.easeInOutQuad(p);
        const a = { x:CX[i], y:522 };
        const x = lerp(a.x, BTN.x, e), y = lerp(a.y, BTN.y - 30, e) - Math.sin(p*Math.PI)*46;
        return <div key={i} style={{position:'absolute', left:x-6, top:y-6, width:12, height:12, borderRadius:100, background:'#62B4FF', boxShadow:'0 0 16px 6px rgba(0,133,255,0.5)', zIndex:12}}/>;
      })}

      {/* El botón ACEPTAR (el gesto final) */}
      <div style={{position:'absolute', left:BTN.x-138, top:BTN.y-36, width:276, display:'flex', alignItems:'center', justifyContent:'center', gap:10, background:'linear-gradient(180deg,#10B981,#059669)', color:'#fff', borderRadius:100, padding:'17px 0', boxShadow:`0 14px 36px rgba(16,185,129,0.38)${ringOn?`, 0 0 0 ${5+beat*8}px rgba(16,185,129,${0.20-beat*0.07})`:''}`, opacity:clamp((t-1.2)/0.6,0,1), transform:`scale(${ringOn?1+beat*0.018:1})`}}>
        <span style={{fontWeight:800, fontSize:16}}>✓</span>
        <span className="f-plex" style={{fontSize:19, fontWeight:700}}>ACEPTAR</span>
      </div>
      <div className="f-mono" style={{position:'absolute', left:0, right:0, top:BTN.y+52, textAlign:'center', fontSize:11.5, color:'#94A3B8', opacity:clamp((t-T.ring)/0.6,0,1)}}>nada se contabiliza sin esto</div>

      {/* Tríada final */}
      <div style={{position:'absolute', bottom:186, left:0, right:0, display:'flex', justifyContent:'center', gap:20}}>
        {TRIADA.map((f,i)=>{
          const p = clamp((t-T.triada[i])/0.5, 0, 1), e = Easing.easeOutBack(p);
          const last = i === 2;
          return (
            <span key={i} className="f-plex" style={{fontSize:21, fontWeight: last?800:600, color: last?'#0085FF':'#475569', background:'#fff', border:`1.5px solid ${last?'rgba(0,133,255,0.4)':'#E2E8F0'}`, borderRadius:100, padding:'10px 26px', boxShadow:'0 10px 26px rgba(15,23,42,0.07)', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*20}px) scale(${lerp(0.85,1,e)})`}}>{f}</span>
          );
        })}
      </div>

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