// === Escena 08 — "La puerta" · audio real 22.13s ===
// LOCUCIÓN: "Y una cosa más, solo por decirla una vez: si algún día... algún día... decides
//   jubilar tu programa de siempre, la facturación y la contabilidad ya viven aquí, esperando.
//   Cuando tú digas. O nunca. Nadie te va a empujar: lo que nos trae aquí son los huérfanos."
// BEATS: escena serena y casi vacía · chips dormidos con fade LENTO (sin rebote — no venden) ·
//   una sola respiración · "cuando tú digas. O nunca." = NADA se mueve · el foco vuelve a las apps.
function Escena08({ t }){
  const T = {
    esc:   0.2,      // "Y una cosa más"                       → escena
    chips: 7.7,     // "la facturación y la contabilidad ya viven aquí" → chips
    resp: 12.1,      // "Cuando tú digas"                      → respiración
    foco: 15.6,      // "lo que nos trae aquí son los huérfanos" → foco
    dim:  15.6,                                             // (apoyo) atenúa
  };
  const escP = clamp((t-T.esc)/0.8, 0, 1);
  const chipsP = clamp((t-T.chips)/2.0, 0, 1);              // fade LENTO deliberado
  const resp = (t >= T.resp && t < T.resp+2.0) ? Math.sin((t-T.resp)/2.0*Math.PI) : 0;
  const focoOn = t >= T.foco && t < T.foco+1.2;
  const foco = focoOn ? Math.sin((t-T.foco)/1.2*Math.PI) : 0;
  const dimP = clamp((t-T.dim)/1.2, 0, 1);
  const chipOp = (0.42 + resp*0.22) * (1 - dimP*0.45);

  const APPS = [
    { n:'Tiempos',        ic:'⏱', c:'#0085FF' },
    { n:'Autorizaciones', ic:'✍', c:'#8B5CF6' },
    { n:'Partes',         ic:'📋', c:'#10B981' },
    { n:'Checklist',      ic:'✓',  c:'#F59E0B' },
    { n:'Turnos',         ic:'📅', c:'#FF6751' },
  ];

  return (
    <SlideCanvas variant="light">
      <div style={{position:'absolute', top:96, left:0, right:0, textAlign:'center', zIndex:5, opacity:escP}}>
        <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#94A3B8', marginBottom:10}}>UNA COSA MÁS · SOLO POR DECIRLA UNA VEZ</div>
        <h2 className="f-plex" style={{fontSize:46, fontWeight:800, letterSpacing:'-0.03em', margin:0, color:'#0F172A'}}>Cuando tú digas. <span style={{color:'#94A3B8'}}>O nunca.</span></h2>
      </div>

      <div style={{position:'absolute', left:170, right:170, top:330, display:'grid', gridTemplateColumns:'1fr 340px 1fr', gap:40, alignItems:'center', opacity:escP}}>

        {/* Izquierda: tus apps, vivas */}
        <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, padding:'20px 24px', boxShadow:`0 20px 55px rgba(0,133,255,${0.08+foco*0.08})`, transform:`scale(${1+foco*0.012})`}}>
          <div style={{display:'flex', alignItems:'center', gap:9, marginBottom:14}}>
            <DinaupLogo mark size={20}/>
            <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>Tus apps</span>
            <span className="f-mono" style={{marginLeft:'auto', fontSize:9, color:'#059669'}}>en marcha</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:9}}>
            {APPS.map((a,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:9, background:'#F8FAFC', border:`1px solid ${a.c}33`, borderRadius:10, padding:'9px 12px'}}>
                <span style={{fontSize:13}}>{a.ic}</span>
                <span className="f-plex" style={{fontSize:11.5, fontWeight:700, color:'#334155'}}>{a.n}</span>
                <span style={{marginLeft:'auto', width:7, height:7, borderRadius:100, background:'#10B981', opacity:0.5+0.5*Math.sin(t*3+i)}}/>
              </div>
            ))}
          </div>
        </div>

        {/* Centro: los dos chips dormidos */}
        <div style={{display:'flex', flexDirection:'column', gap:14, alignItems:'center'}}>
          {['Facturación','Contabilidad'].map((n,i)=>(
            <div key={i} style={{width:'100%', display:'flex', alignItems:'center', gap:12, background:'#F8FAFC', border:'1.5px dashed #CBD5E1', borderRadius:14, padding:'16px 20px', opacity:chipsP*chipOp + (chipsP<1?0:0)}}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" style={{flexShrink:0, opacity:0.6}}>
                <rect x="5" y="11" width="14" height="9" rx="2" stroke="#94A3B8" strokeWidth="1.8" fill="none"/>
                <path d="M8 11 V8 a4 4 0 0 1 8 0 v3" stroke="#94A3B8" strokeWidth="1.8" fill="none"/>
              </svg>
              <div>
                <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#64748B'}}>{n}</div>
                <div className="f-mono" style={{fontSize:9, color:'#B6C2D2', letterSpacing:'1.5px'}}>INCLUIDA · ESPERANDO</div>
              </div>
            </div>
          ))}
          <div className="f-mono" style={{fontSize:9.5, color:'#B6C2D2', letterSpacing:'1px', opacity:chipsP*0.9}}>nadie te va a empujar</div>
        </div>

        {/* Derecha: GestWin intacto con su aro */}
        <div style={{position:'relative'}}>
          <svg style={{position:'absolute', inset:-16}} width="calc(100% + 32px)" height="calc(100% + 32px)" viewBox="0 0 420 260" preserveAspectRatio="none">
            <rect x="4" y="4" width="412" height="252" rx="16" fill="none" stroke="#10B981" strokeWidth="2" strokeDasharray="12 9" opacity={0.8*(1-dimP*0.3)}/>
          </svg>
          <div className="f-mono" style={{position:'absolute', top:-32, left:'50%', transform:'translateX(-50%)', background:'#059669', color:'#fff', fontSize:9.5, fontWeight:800, letterSpacing:'2px', borderRadius:100, padding:'5px 15px', whiteSpace:'nowrap', opacity:1-dimP*0.25}}>ESTO NO SE TOCA</div>
          <div style={{background:'#F1F3F5', borderRadius:10, overflow:'hidden', border:'1px solid #C9CDD3', boxShadow:'0 18px 44px rgba(15,23,42,0.14)'}}>
            <div style={{height:30, background:'linear-gradient(180deg,#E8EAED,#D7DADF)', display:'flex', alignItems:'center', gap:8, padding:'0 11px'}}>
              <div style={{width:16, height:16, borderRadius:4, background:'#5B6472', color:'#fff', fontSize:8.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>G</div>
              <span style={{fontSize:11, fontWeight:700, color:'#3F4854'}}>GestWin — Facturación</span>
            </div>
            <div style={{padding:14}}>
              {[0.9, 0.72, 0.84, 0.6].map((w,i)=>(
                <div key={i} style={{height:15, width:`${w*100}%`, background:'#E5E7EB', borderRadius:4, marginBottom:8}}/>
              ))}
              <div className="f-mono" style={{fontSize:9, color:'#9CA3AF'}}>tu programa de siempre · sigue aquí</div>
            </div>
          </div>
        </div>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { Escena08 });