// === Escena 09 — "Cierre: cabe en una pestaña" · audio real 30.30s ===
// LOCUCIÓN: "Así que vuelve a ese lunes del principio: el WhatsApp, el email, el excel, el
//   banco... y tu cabeza haciendo de pegamento. Ese negocio puede seguir dependiendo de tu
//   memoria... o puede caber en una pestaña, contigo de dueño de tus datos y delegando de
//   verdad. Y si prefieres que alguien te acompañe en el arranque, tenemos una red de partners
//   cerca de ti. Entra en dinaup punto com y pruébalo con tu empresa."
// BEATS: bookend de D1 (las 5 ventanas + nodo) · las ventanas VUELAN plegándose a la pestaña
//   del navegador · el nodo se libera (rojo→azul ✓) · chip de partners · cartel final + click.
function Escena09({ t }){
  const T = {
    wins0:0.8, winsStep:0.32,
    nodoRojo:6.3,
    tab:11.7, fly0:12.0, flyStep:0.55, flyDur:0.95,
    nodoAzul:16.4,
    partners:19.9, avatares:[20.4, 20.8, 21.2],
    cartel:23.7, logo:24.3, titular:24.9, url:25.7, click:27.2,
  };
  const WINS = [
    { l:'WhatsApp', c:'#075E54', x:250,  y:250, ic:'WA' },
    { l:'Email',    c:'#EA4335', x:1360, y:235, ic:'@'  },
    { l:'Excel',    c:'#185C37', x:230,  y:640, ic:'X'  },
    { l:'Facturas', c:'#64748B', x:1350, y:630, ic:'F3' },
    { l:'Banco',    c:'#072146', x:820,  y:720, ic:'B'  },
  ];
  const CX = 952, CY = 500;
  const TABX = 810, TABY = 592;                       // destino: la pestaña

  const winP = (i)=> clamp((t-(T.wins0+i*T.winsStep))/0.45, 0, 1);
  const nodoRojoOn = t >= T.nodoRojo && t < T.nodoAzul;
  const rojoPulse = nodoRojoOn ? 0.5+0.5*Math.sin((t-T.nodoRojo)*3.6) : 0;
  const nodoAzulP = clamp((t-T.nodoAzul)/0.5, 0, 1), nodoAzulE = Easing.easeOutBack(nodoAzulP);

  const tabP = clamp((t-T.tab)/0.5, 0, 1), tabE = Easing.easeOutCubic(tabP);
  const flyP = (i)=> clamp((t-(T.fly0+i*T.flyStep))/T.flyDur, 0, 1);
  const nFlown = WINS.reduce((a,_,i)=> a + (flyP(i)>=1?1:0), 0);
  const tabHit = WINS.some((_,i)=>{ const p=flyP(i); return p>0.92 && p<1; });

  const partP = clamp((t-T.partners)/0.5, 0, 1), partE = Easing.easeOutBack(partP);
  const avP = (i)=> clamp((t-T.avatares[i])/0.4, 0, 1);

  const cartelP = clamp((t-T.cartel)/0.8, 0, 1);
  const logoP = clamp((t-T.logo)/0.5, 0, 1), logoE = Easing.easeOutCubic(logoP);
  const titP = clamp((t-T.titular)/0.55, 0, 1), titE = Easing.easeOutCubic(titP);
  const urlP = clamp((t-T.url)/0.5, 0, 1);
  const clicked = t >= T.click;
  const ringP = clamp((t-T.click)/0.5, 0, 1);
  const glow = 0.5+0.5*Math.sin(Math.max(0, t-T.url)*2.4);

  return (
    <SlideCanvas variant="problem">

      {/* ===== FASE A · Bookend ===== */}
      <div style={{position:'absolute', inset:0, opacity:1-cartelP}}>
        <div style={{position:'absolute', top:56, left:0, right:0, textAlign:'center', zIndex:8}}>
          <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#64748B', marginBottom:8}}>EL MISMO LUNES</div>
          <div className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>¿Tu memoria... o una pestaña?</div>
        </div>

        {/* Mini-ventanas del caos (siluetas reconocibles) que VUELAN a la pestaña */}
        {WINS.map((w,i)=>{
          const p = winP(i);
          const f = flyP(i);
          if (p <= 0 || f >= 1) return null;
          const fe = Easing.easeInOutCubic(f);
          const x = lerp(w.x, TABX, fe), y = lerp(w.y, TABY, fe) - Math.sin(f*Math.PI)*90;
          const sc = lerp(1, 0.08, fe);
          return (
            <div key={i} style={{position:'absolute', left:x, top:y, width:280, height:150, borderRadius:9, overflow:'hidden', background:'#fff', boxShadow:'0 20px 50px rgba(0,0,0,0.4)', opacity:clamp(p*1.3,0,1)*(f>0.85?(1-f)/0.15:1)*0.94, transform:`scale(${sc}) rotate(${lerp(i%2?2.5:-2.5, 0, fe)}deg)`, transformOrigin:'top left', zIndex:4}}>
              <div style={{height:34, background:w.c, display:'flex', alignItems:'center', gap:8, padding:'0 12px'}}>
                <span className="f-mono" style={{width:20, height:20, borderRadius:5, background:'rgba(255,255,255,0.2)', color:'#fff', fontSize:9, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{w.ic}</span>
                <span style={{fontSize:11.5, fontWeight:700, color:'#fff'}}>{w.l}</span>
              </div>
              <div style={{padding:10, display:'flex', flexDirection:'column', gap:6}}>
                {[0.9,0.65,0.8].map((wd,ri)=><div key={ri} style={{height:11, width:`${wd*100}%`, borderRadius:4, background:'#E2E8F0'}}/>)}
              </div>
            </div>
          );
        })}

        {/* Nodo TU CABEZA: rojo cansado → azul liberado */}
        <div style={{position:'absolute', left:CX, top:280, transform:'translate(-50%,-50%)', zIndex:6}}>
          <div style={{display:'flex', alignItems:'center', gap:11, padding:'14px 24px', background:'rgba(15,23,42,0.95)', border:`2px solid ${nodoAzulP>0?'rgba(0,133,255,0.75)':nodoRojoOn?`rgba(239,68,68,${0.4+rojoPulse*0.35})`:'rgba(255,255,255,0.14)'}`, borderRadius:100, boxShadow:`0 18px 50px rgba(0,0,0,0.5)${nodoRojoOn?`, 0 0 ${rojoPulse*26}px rgba(239,68,68,0.25)`:nodoAzulP>0?', 0 0 32px rgba(0,133,255,0.35)':''}`, transform:`scale(${1+ (nodoAzulP>0?lerp(0,0.06,nodoAzulE):rojoPulse*0.04)})`, transition:'border 400ms'}}>
            <span style={{width:11, height:11, borderRadius:100, background: nodoAzulP>0?'#0085FF':nodoRojoOn?'#EF4444':'#F59E0B', boxShadow:`0 0 12px ${nodoAzulP>0?'#0085FF':'#EF4444'}`, transition:'background 400ms'}}/>
            <span className="f-mono" style={{fontSize:16, fontWeight:800, color:'#fff', letterSpacing:'2px'}}>TU CABEZA</span>
            {nodoAzulP > 0 && <span style={{color:'#56E16A', fontSize:15, fontWeight:800, opacity:clamp(nodoAzulP*1.4,0,1)}}>✓ libre</span>}
          </div>
        </div>

        {/* La pestaña destino (browser flotante minimal) */}
        {tabP > 0 && (
          <div style={{position:'absolute', left:660, top:566, width:600, opacity:tabP, transform:`translateY(${(1-tabE)*24}px)`, zIndex:5}}>
            <div style={{background:'#DEE1E6', borderRadius:'12px 12px 0 0', padding:'8px 10px 0', boxShadow:'0 30px 80px rgba(0,133,255,0.25)'}}>
              <div style={{height:38, width:290, background:'#F4F5F7', borderRadius:'9px 9px 0 0', display:'flex', alignItems:'center', gap:9, padding:'0 14px', transform:`scale(${tabHit?1.05:1})`, boxShadow: tabHit?'0 0 0 4px rgba(0,133,255,0.4)':'none', transition:'all 180ms'}}>
                <DinaupLogo mark size={16}/>
                <span style={{fontSize:12, fontWeight:600, color:'#202124'}}>Dinaup — Tu empresa</span>
                <span className="f-mono" style={{marginLeft:'auto', fontSize:9.5, fontWeight:800, color:'#0085FF'}}>{nFlown}/5</span>
              </div>
            </div>
            <div style={{height:130, background:'#fff', borderRadius:'0 0 12px 12px', border:'1px solid #E2E8F0', borderTop:'none', display:'flex', alignItems:'center', justifyContent:'center', gap:14}}>
              {WINS.map((w,i)=>(
                <div key={i} style={{width:52, height:52, borderRadius:11, background: flyP(i)>=1?w.c:'#F1F5F9', border:'1px solid #E2E8F0', display:'flex', alignItems:'center', justifyContent:'center', transform:`scale(${flyP(i)>=1?lerp(0.6,1,Easing.easeOutBack(clamp((t-(T.fly0+i*T.flyStep+T.flyDur))/0.4,0,1))):1})`, transition:'background 250ms'}}>
                  <span className="f-mono" style={{fontSize:12, fontWeight:800, color: flyP(i)>=1?'#fff':'#CBD5E1'}}>{w.ic}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Chip de partners */}
        {partP > 0 && (
          <div style={{position:'absolute', bottom:110, left:'50%', transform:`translateX(-50%) scale(${lerp(0.7,1,partE)})`, display:'flex', alignItems:'center', gap:14, background:'rgba(15,23,42,0.94)', border:'1px solid rgba(255,255,255,0.14)', borderRadius:100, padding:'12px 26px', opacity:clamp(partP*1.3,0,1), boxShadow:'0 18px 44px rgba(0,0,0,0.4)', zIndex:7}}>
            <div style={{display:'flex'}}>
              {['JM','RC','LT'].map((ini,i)=>(
                <span key={i} style={{width:32, height:32, borderRadius:100, background:['#0085FF','#8B5CF6','#10B981'][i], color:'#fff', fontSize:10.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', border:'2.5px solid #0F172A', marginLeft: i>0?-9:0, opacity:clamp(avP(i)*1.4,0,1), transform:`scale(${lerp(0.5,1,Easing.easeOutBack(avP(i)))})`}}>{ini}</span>
              ))}
            </div>
            <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#fff'}}>Red de partners cerca de ti</span>
            <span className="f-mono" style={{fontSize:10, color:'#94A3B8'}}>si quieres que te acompañen</span>
          </div>
        )}
      </div>

      {/* ===== FASE B · Cartel final ===== */}
      {cartelP > 0 && (
        <div style={{position:'absolute', inset:0, background:'#F8FAFC', opacity:cartelP, zIndex:12, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:0}}>
          <div style={{opacity:logoP, transform:`translateY(${(1-logoE)*16}px)`}}>
            <DinaupLogo size={52}/>
          </div>
          <RuedaDivider style={{width:280, margin:'26px 0 34px', opacity:clamp((t-T.logo-0.3)/0.5,0,1)}}/>
          <h1 className="f-plex" style={{fontSize:64, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', margin:0, opacity:titP, transform:`translateY(${(1-titE)*18}px)`}}>
            Pruébalo con <span className="grad-text">tu empresa</span>
          </h1>
          <div style={{position:'relative', marginTop:36, opacity:urlP}}>
            <span className="f-mono" style={{fontSize:30, fontWeight:700, color:'#0085FF', padding:'14px 34px', background:'#fff', border:'2px solid rgba(0,133,255,0.4)', borderRadius:100, boxShadow:`0 ${14+glow*10}px ${40+glow*16}px rgba(0,133,255,${0.16+glow*0.1})`, display:'inline-block', transform:`scale(${clicked?lerp(1,0.97,Math.min(1,ringP*2)) :1})`}}>dinaup.com</span>
            {/* Anillo del click */}
            {clicked && ringP < 1 && (
              <span style={{position:'absolute', left:'50%', top:'50%', width:70, height:70, borderRadius:100, border:'3px solid rgba(0,133,255,0.8)', transform:`translate(-50%,-50%) scale(${lerp(0.5,2.4,Easing.easeOutCubic(ringP))})`, opacity:1-ringP}}/>
            )}
          </div>
          {/* Cursor que hace el click — aterriza en el centro real del pill (960,656) */}
          <CineCursor x={960 + lerp(280, 5, Easing.easeInOutCubic(clamp((t-T.url-0.2)/1.1,0,1)))} y={656 + lerp(130, 4, Easing.easeInOutCubic(clamp((t-T.url-0.2)/1.1,0,1)))} clicking={t>=T.click && t<T.click+0.3}/>
        </div>
      )}

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