// === Escena 09 — "Resumen" · audio real 25.70s ===
// LOCUCIÓN: "Te resumo. Tu programa de siempre no se toca... esto convive con él. Los procesos
//   que hoy van por excel, WhatsApp y papel entran en Dinaup: cada dato una vez, con listados,
//   permisos, avisos y copias que ya vienen hechos. Para tu gente y tus clientes, su app o su
//   portal... y solo se desarrolla esa pantalla. Y se empieza por uno: el que más duela."
// UI: recapitulación con 5 mini-cards ECO (miniaturas de lo visto) + convergencia al logo.
// La card 4 lleva el concepto nuevo (app/portal) y la 5 la separación (solo se diseña la punta).
function Escena09({ t }){
  const T = {
    title:  0.3,     // "Te resumo"                            → titular
    cards:  [1.3, 9.2, 10.6, 16.3, 22.6],   // "Tu programa de siempre no se toca" · "entran en Dinaup" · "cada dato una vez" · "Para tu gente y tus clientes" · "se empieza por uno"
    pulsa: 24.1,    // "el que más duela"                     → pulso
    logo:  24.5,                                            // (apoyo) logo
    rueda: 24.9,                                            // (apoyo) rueda
  };
  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;

  const minis = [
    // 1 · GestWin intacto
    (<div style={{display:'flex', alignItems:'center', gap:9}}>
      <div style={{position:'relative', width:56, height:38}}>
        <div style={{position:'absolute', inset:0, background:'#F1F3F5', border:'1px solid #C9CDD3', borderRadius:5}}>
          <div style={{height:9, background:'#D7DADF', borderRadius:'5px 5px 0 0'}}/>
        </div>
        <div style={{position:'absolute', inset:-5, border:'1.5px dashed #10B981', borderRadius:8}}/>
      </div>
      <span className="f-mono" style={{fontSize:9, color:'#059669', fontWeight:700}}>convive ✓</span>
    </div>),
    // 2 · Huérfanos → EN DINAUP (el backoffice)
    (<div style={{display:'flex', alignItems:'center', gap:6}}>
      {['⏱','✍','📋'].map((ic,i)=>(
        <span key={i} style={{width:22, height:22, borderRadius:6, background:'#F1F5F9', border:'1px solid #E2E8F0', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11}}>{ic}</span>
      ))}
      <span style={{fontSize:12, color:'#0085FF'}}>→</span>
      <span className="f-mono" style={{fontSize:9.5, fontWeight:800, color:'#0085FF', background:'rgba(0,133,255,0.08)', border:'1px solid rgba(0,133,255,0.3)', borderRadius:6, padding:'3px 9px'}}>Dinaup</span>
    </div>),
    // 3 · UNA VEZ
    (<div style={{display:'flex', alignItems:'center', gap:8}}>
      <span className="f-mono" style={{fontSize:10, fontWeight:800, color:'#fff', background:'#0085FF', borderRadius:100, padding:'3px 12px', letterSpacing:'1.5px', transform:'rotate(-2deg)'}}>UNA VEZ</span>
      <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8', textDecoration:'line-through'}}>2,5h · 2h y pico · ¿3h?</span>
    </div>),
    // 4 · App / portal para tu gente (el concepto nuevo)
    (<div style={{display:'flex', alignItems:'center', gap:9}}>
      <div style={{width:26, height:40, borderRadius:6, border:'2px solid #0085FF', background:'#fff', padding:'3px 3px', display:'flex', flexDirection:'column', gap:2}}>
        <div style={{height:5, background:'#0085FF', borderRadius:2, opacity:0.5}}/>
        <div style={{height:4, background:'#DCFCE7', borderRadius:2}}/>
        <div style={{height:4, background:'#FEE2E2', borderRadius:2}}/>
        <div style={{height:4, background:'#DCFCE7', borderRadius:2}}/>
      </div>
      <span className="f-mono" style={{fontSize:9, color:'#94A3B8'}}>app empleados<br/>o portal clientes</span>
    </div>),
    // 5 · Solo se diseña esa pantalla (punta sobre DINAUP)
    (<div style={{display:'flex', flexDirection:'column', gap:3, width:150}}>
      <div style={{height:12, border:'1.5px dashed rgba(0,133,255,0.6)', borderRadius:4, background:'rgba(0,133,255,0.04)'}}/>
      {[1,2].map((i)=><div key={i} style={{height:9, background:'#E2EBF5', border:'1px solid #C9D6E6', borderRadius:3}}/>)}
      <span className="f-mono" style={{fontSize:8, color:'#059669', fontWeight:700, marginTop:2}}>arriba se dibuja · abajo es Dinaup</span>
    </div>),
  ];

  const CARDS = [
    { l:'Tu programa, intacto' },
    { l:'Los huérfanos → en Dinaup' },
    { l:'Cada dato, una vez' },
    { l:'App o portal para tu gente' },
    { l:'Solo se diseña esa pantalla' },
  ];

  return (
    <SlideCanvas variant="light">
      <div style={{position:'absolute', top:100, 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>

      {/* 5 cards: fila de 3 + fila de 2 centrada */}
      <div style={{position:'absolute', top:300, left:250, right:250}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:20}}>
          {CARDS.slice(0,3).map((c,i)=>{
            const p = cardP(i), e = cardE(i);
            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})`, boxShadow: p>0?'0 16px 40px rgba(0,133,255,0.1)':'none', transition:'border 300ms, opacity 300ms', position:'relative'}}>
                <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'}}>{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:44, display:'flex', alignItems:'center', opacity: p>0?1:0.35, filter: p>0?'none':'grayscale(1)'}}>{minis[i]}</div>
                {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)*56}px)`}}/>
                )}
              </div>
            );
          })}
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:20, padding:'0 170px'}}>
          {CARDS.slice(3).map((c,ii)=>{
            const i = ii+3;
            const p = cardP(i), e = cardE(i);
            const isLast = i===4;
            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?1+pulsa*0.04:1)})`, boxShadow: p>0?`0 16px 40px rgba(0,133,255,${0.1+(hot?pulsa*0.08:0)})`:'none', transition:'border 300ms, opacity 300ms', position:'relative'}}>
                <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'}}>{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:44, display:'flex', alignItems:'center', opacity: p>0?1:0.35, filter: p>0?'none':'grayscale(1)'}}>{minis[i]}</div>
                {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)*56}px)`}}/>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Logo + rueda al pie */}
      {logoP > 0 && (
        <div style={{position:'absolute', bottom:88, 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, { Escena09 });