// === Escena 08 — "Lo que acabas de ver" (resumen) · audio real 28.21s ===
// LOCUCIÓN: "Te resumo lo que has visto. Presupuesto, venta y factura: la misma historia, sin
//   reescribir nada. El cliente, respondido en diez segundos. El trabajo, repartido sin
//   reuniones. Los fichajes, solos y con validez legal. Compras, gastos y banco dentro... el iva
//   a la vista antes de que te lo cuenten. Y los datos, en tu casa: el asesor entra a verlos, no
//   se los llevan."
// UI: recapitulación con 6 mini-cards ECO (miniaturas reales de lo visto, no iconos abstractos);
//   cada una enciende con su frase; convergen en el logo + rueda al final.
function Escena08({ t }){
  const T = {
    title:0.5,
    cards:[3.0, 7.5, 10.4, 13.1, 16.3, 21.8],
    pulsa:24.0, logo:26.0, rueda:26.6,
  };
  const titleP = clamp((t-T.title)/0.5, 0, 1);
  const cardP = (i)=> clamp((t-T.cards[i])/0.5, 0, 1);
  const cardE = (i)=> Easing.easeOutBack(cardP(i));
  const pulsaOn = t >= T.pulsa && t < T.pulsa+1.0;
  const pulsa = pulsaOn ? Math.sin((t-T.pulsa)/1.0*Math.PI) : 0;
  const logoP = clamp((t-T.logo)/0.6, 0, 1), logoE = Easing.easeOutBack(logoP);
  const convOn = t >= T.logo-0.3;

  // Miniaturas reales (ecos de las escenas)
  const minis = [
    // 1 · Cadena
    (<div style={{display:'flex', alignItems:'center', gap:5}}>
      {['P','V','F'].map((d,i)=>(
        <React.Fragment key={d}>
          <span className="f-mono" style={{width:26, height:30, borderRadius:5, background:'rgba(0,133,255,0.1)', border:'1px solid rgba(0,133,255,0.4)', color:'#0085FF', fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{d}</span>
          {i<2 && <span style={{width:14, height:2, background:'#0085FF', opacity:0.5}}/>}
        </React.Fragment>
      ))}
      <span style={{marginLeft:6, fontSize:9, color:'#059669', fontWeight:800}}>0 teclas</span>
    </div>),
    // 2 · Cliente 10s
    (<div style={{display:'flex', alignItems:'center', gap:8}}>
      <span className="f-mono" style={{fontSize:10, fontWeight:800, background:'linear-gradient(180deg,#FDFEFF,#E8EDF4)', border:'1px solid #C6CFDB', borderBottom:'3px solid #AAB6C6', borderRadius:6, padding:'4px 9px', color:'#0F172A'}}>F2</span>
      <span className="f-mono" style={{fontSize:11, fontWeight:800, color:'#D97706'}}>1.840 €</span>
      <span className="f-mono" style={{fontSize:9, color:'#059669', fontWeight:700}}>en 10 s</span>
    </div>),
    // 3 · Kanban
    (<div style={{display:'flex', gap:5}}>
      {[2,2,1].map((n,ci)=>(
        <div key={ci} style={{width:34, background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:5, padding:3, display:'flex', flexDirection:'column', gap:3}}>
          {Array.from({length:n},(_,i)=><div key={i} style={{height:8, borderRadius:3, background:['#F59E0B','#0085FF','#10B981'][ci], opacity:0.75}}/>)}
        </div>
      ))}
      <span style={{alignSelf:'center', marginLeft:4, fontSize:12}}>🎯</span>
    </div>),
    // 4 · Log legal
    (<div style={{display:'flex', alignItems:'center', gap:7, background:'#0F172A', borderRadius:100, padding:'5px 12px'}}>
      <span style={{fontSize:10}}>🔒</span>
      <span className="f-mono" style={{fontSize:8.5, fontWeight:700, color:'#56E16A', letterSpacing:'1px'}}>08:12 · hash ab8f…</span>
    </div>),
    // 5 · IVA
    (<div style={{display:'flex', alignItems:'baseline', gap:7}}>
      <span className="f-mono" style={{fontSize:19, fontWeight:800, color:'#0F172A'}}>4.812 €</span>
      <span style={{fontSize:11}}>👁</span>
      <span className="f-mono" style={{fontSize:8.5, color:'#94A3B8'}}>cuando quieras</span>
    </div>),
    // 6 · Casa
    (<div style={{display:'flex', alignItems:'center', gap:9}}>
      <svg width="34" height="30" viewBox="0 0 110 96" fill="none">
        <path d="M8 46 L55 10 L102 46 M18 42 V86 H92 V42" stroke="#0085FF" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      <div style={{width:22, height:22, borderRadius:100, background:'#7C3AED', color:'#fff', fontSize:8, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', border:'2px dashed rgba(124,58,237,0.5)'}}>GL</div>
      <span className="f-mono" style={{fontSize:8.5, color:'#94A3B8'}}>entra a verlos</span>
    </div>),
  ];

  const CARDS = [
    { l:'La cadena, sin reescribir' },
    { l:'El cliente, en 10 segundos' },
    { l:'El trabajo, repartido solo' },
    { l:'Fichaje con validez legal' },
    { l:'El IVA, a la vista' },
    { l:'Los datos, en tu casa' },
  ];

  return (
    <SlideCanvas variant="light">
      <div style={{position:'absolute', top:96, left:0, right:0, textAlign:'center', opacity:titleP, zIndex:5}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#0085FF', marginBottom:10}}>EN TREINTA SEGUNDOS</div>
        <h2 className="f-plex" style={{fontSize:52, fontWeight:800, letterSpacing:'-0.03em', margin:0, color:'#0F172A'}}>Lo que acabas de ver</h2>
      </div>

      {/* Grid 3×2 de mini-cards eco */}
      <div style={{position:'absolute', top:270, left:230, right:230, display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22}}>
        {CARDS.map((c,i)=>{
          const p = cardP(i), e = cardE(i);
          const isLast = i===5;
          const hot = isLast && pulsaOn;
          return (
            <div key={i} style={{background:'#fff', border:`1.5px solid ${p>0?'rgba(0,133,255,0.4)':'#E2E8F0'}`, borderRadius:14, padding:'18px 20px', opacity: p>0?1:0.28, transform:`scale(${p>0?lerp(0.86,1,e):0.96} ) ${hot?`scale(${1+pulsa*0.04})`:''}`, boxShadow: p>0?`0 16px 40px rgba(0,133,255,${0.1+(hot?pulsa*0.08:0)})`:'none', transition:'border 300ms, opacity 300ms'}}>
              <div style={{display:'flex', alignItems:'center', gap:9, marginBottom:12}}>
                <span className="f-mono" style={{width:22, height:22, borderRadius:100, background: p>0?'#0085FF':'#CBD5E1', color:'#fff', fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', transition:'background 300ms'}}>{i+1}</span>
                <span className="f-plex" style={{fontSize:14.5, fontWeight:700, color: p>0?'#0F172A':'#94A3B8', transition:'color 300ms'}}>{c.l}</span>
                {p>0 && <span style={{marginLeft:'auto', color:'#10B981', fontWeight:800, fontSize:13, opacity:clamp((p-0.5)/0.4,0,1)}}>✓</span>}
              </div>
              <div style={{height:40, display:'flex', alignItems:'center', opacity: p>0?1:0.35, filter: p>0?'none':'grayscale(1)'}}>
                {minis[i]}
              </div>
              {/* Pulso convergente hacia el logo */}
              {convOn && p>0 && (
                <div style={{position:'absolute', left:'50%', bottom:0, width:8, height:8, borderRadius:100, background:'#0085FF', opacity:(1-((t-T.logo+0.3)%0.9)/0.9)*0.7, transform:`translate(-50%, ${(((t-T.logo+0.3)%0.9)/0.9)*60}px)`}}/>
              )}
            </div>
          );
        })}
      </div>

      {/* Logo + rueda al pie */}
      {logoP > 0 && (
        <div style={{position:'absolute', bottom:96, left:0, right:0, display:'flex', flexDirection:'column', alignItems:'center', gap:16, opacity:clamp(logoP*1.3,0,1), transform:`scale(${lerp(0.8,1,logoE)})`}}>
          <DinaupLogo size={40}/>
          <RuedaDivider style={{width:260, opacity:clamp((t-T.rueda)/0.5,0,1)}}/>
        </div>
      )}

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