// === Escena 10 — "Cierre" · audio real 17.89s (+cola fija) ===
// LOCUCIÓN: "Así que vuelve a esa pila de facturas del principio. El mes que viene puede
//   seguir costándote días... o puede entrar sola mientras tú das el okey. Pide que te lo
//   enseñemos con tus facturas... las tuyas... en dinaup punto com."
// BEATS: bookend — la pila de la E01 reaparece · la elección: quedarse gris ("días") o VOLAR
//   hacia Dinaup mientras ACEPTAR late · cartel patrón master con click en la URL.
function Escena11({ t }){
  const T = {
    pila:     0.7,   // "vuelve a esa pila de facturas"        → pila
    dias:     4.1,   // "puede seguir costándote días"         → días
    fly0:     6.2,   // "puede entrar sola"                    → vuelan
    flyStep: 0.24,                                           // (incremento, no instante)
    cartel:  8.8,   // "Pide que te lo enseñemos"             → cartel
    titular: 10.0,   // "con tus facturas"                     → titular
    url:     12.4,   // "en dinaup punto com"                  → url
    click:   14.5,                                           // (apoyo) click final
  };

  const N = 18;
  const pilaP = (i)=> clamp((t-(T.pila+i*0.05))/0.3, 0, 1);
  const diasP = clamp((t-T.dias)/0.6, 0, 1);

  // Posición en la pila (grid 6×3, zona izquierda-centro)
  const slot = (i)=> ({ x: 330 + (i%6)*88, y: 430 + Math.floor(i/6)*104, r: (i%5-2)*2.5 });
  const DEST = { x:1435, y:520 };
  const flyStart = (i)=> T.fly0 + i*T.flyStep;
  const flyP = (i)=> clamp((t-flyStart(i))/0.6, 0, 1);
  const nIn = Array.from({length:N}).reduce((a,_,i)=> a + (flyP(i) >= 1 ? 1 : 0), 0);
  const anyLanding = Array.from({length:N}).some((_,i)=> flyP(i) > 0.8 && flyP(i) < 1);
  const beat = anyLanding ? 1 : 0;

  const cartelP = clamp((t-T.cartel)/0.9, 0, 1), cartelE = Easing.easeInOutCubic(cartelP);
  const titP = clamp((t-T.titular)/0.55, 0, 1), titE = Easing.easeOutBack(titP);
  const urlP = clamp((t-T.url)/0.5, 0, 1);
  const clicking = t >= T.click && t < T.click+0.22;
  const ringP = clamp((t-T.click)/0.5, 0, 1);

  // Cursor hacia la URL en el cartel
  const curP = clamp((t-(T.click-1.1))/1.1, 0, 1);
  const curE = Easing.easeInOutCubic(Math.pow(curP, 0.85));
  const A = {x:1620, y:990}, B = {x:1052, y:678};
  const len = Math.hypot(B.x-A.x, B.y-A.y) || 1;
  const C = { x:(A.x+B.x)/2 - (B.y-A.y)/len*-110, y:(A.y+B.y)/2 + (B.x-A.x)/len*-110 };
  const v = 1-curE;
  const cur = { x: v*v*A.x + 2*v*curE*C.x + curE*curE*B.x, y: v*v*A.y + 2*v*curE*C.y + curE*curE*B.y };

  return (
    <SlideCanvas variant="problem">
      {/* Rótulo bookend */}
      <div style={{position:'absolute', top:96, left:0, right:0, textAlign:'center', opacity:(1-cartelP)}}>
        <div className="f-mono" style={{fontSize:12.5, letterSpacing:'3px', color:'#64748B', marginBottom:8}}>LA PILA DEL PRINCIPIO</div>
        <div className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>El mes que viene, tú eliges</div>
      </div>

      {/* Etiquetas de la elección */}
      {diasP > 0 && cartelP < 1 && (
        <div style={{position:'absolute', top:314, left:330, opacity:diasP*(1-cartelP)}}>
          <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#94A3B8', position:'relative'}}>
            días de teclear
            <span style={{position:'absolute', left:-3, right:-3, top:'54%', height:3, background:'#EF4444', borderRadius:2, transform:`scaleX(${clamp((t-T.fly0+0.8)/0.5,0,1)})`, transformOrigin:'0 50%'}}/>
          </span>
        </div>
      )}

      {/* La pila (bookend de la E01) */}
      {cartelP < 1 && Array.from({length:N}).map((_,i)=>{
        const s = slot(i);
        const fp = flyP(i);
        if (fp >= 1) return null;
        const e = Easing.easeInOutCubic(fp);
        const x = lerp(s.x, DEST.x, e), y = lerp(s.y, DEST.y, e) - Math.sin(fp*Math.PI)*120;
        const entered = pilaP(i);
        const gray = diasP > 0 && fp === 0;
        return (
          <div key={i} style={{position:'absolute', left:x, top:y, width:52, height:66, background: gray?'#B9C2CF':'#fff', borderRadius:6, border:'1px solid #CBD5E1', boxShadow: fp>0?'0 18px 40px rgba(0,0,0,0.4)':'0 8px 18px rgba(0,0,0,0.28)', opacity: clamp(entered*1.4,0,1)*(1-cartelP), transform:`rotate(${lerp(s.r, 0, e)}deg) scale(${lerp(1, 0.55, e)})`, display:'flex', alignItems:'center', justifyContent:'center', zIndex: fp>0?9:3}}>
            <span className="f-mono" style={{fontSize:10, fontWeight:800, color: gray?'#7C8698':'#EF4444'}}>PDF</span>
          </div>
        );
      })}

      {/* Mini-ventana Dinaup que recibe (la elección buena) */}
      {cartelP < 1 && (
        <div style={{position:'absolute', left:1210, top:388, width:450, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 34px 80px rgba(0,133,255,0.30)', opacity:clamp((t-2.2)/0.6,0,1)*(1-cartelP)}}>
          <div style={{height:34, background:'#F8FAFC', borderBottom:'1px solid #EEF2F7', display:'flex', alignItems:'center', gap:9, padding:'0 13px'}}>
            <DinaupLogo size={16} mark/>
            <span className="f-mono" style={{fontSize:9.5, color:'#64748B'}}>play.dinaup.com — Facturas recibidas</span>
          </div>
          <div style={{padding:'16px 18px', display:'flex', alignItems:'center', gap:16}}>
            <div style={{flex:1}}>
              <div className="f-mono" style={{fontSize:30, fontWeight:700, color:'#0085FF', lineHeight:1}}>{nIn}<span style={{fontSize:14, color:'#94A3B8'}}> / {N}</span></div>
              <div className="f-mono" style={{fontSize:9, color:'#94A3B8', letterSpacing:'1.5px', marginTop:3}}>ENTRAN SOLAS</div>
            </div>
            <div style={{display:'flex', alignItems:'center', gap:8, background:'linear-gradient(180deg,#10B981,#059669)', color:'#fff', borderRadius:100, padding:'10px 20px', boxShadow:`0 8px 22px rgba(16,185,129,0.4)`, transform:`scale(${beat?0.94:1})`}}>
              <span style={{fontWeight:800, fontSize:12}}>✓</span>
              <span className="f-plex" style={{fontSize:13.5, fontWeight:700}}>ACEPTAR</span>
            </div>
          </div>
          <div style={{height:6, background:'#F1F5F9'}}>
            <div style={{width:`${(nIn/N)*100}%`, height:'100%', background:'linear-gradient(90deg,#0085FF,#00C6FF)'}}/>
          </div>
        </div>
      )}
      {diasP > 0 && cartelP < 1 && (
        <div style={{position:'absolute', top:314, left:1210, opacity:clamp((t-T.fly0)/0.5,0,1)*(1-cartelP)}}>
          <span className="f-plex" style={{fontSize:19, fontWeight:800, color:'#34D399'}}>tú solo das el OK</span>
        </div>
      )}

      {/* ── Cartel final (patrón master) ── */}
      {cartelP > 0 && (
        <div style={{position:'absolute', inset:0, background:'#F8FAFC', opacity:cartelE, zIndex:20, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:0}}>
          <div style={{opacity:clamp((cartelP-0.5)*2.4,0,1)}}><DinaupLogo size={54}/></div>
          <RuedaDivider style={{margin:'26px 0 30px', opacity:titP}}/>
          <div className="f-plex" style={{fontSize:64, fontWeight:800, color:'#0F172A', letterSpacing:'-0.035em', opacity:clamp(titP*1.3,0,1), transform:`translateY(${(1-titE)*26}px)`}}>
            Míralo con <span className="grad-text">tus facturas</span>
          </div>
          <div style={{fontSize:20, color:'#64748B', marginTop:16, opacity:clamp((titP-0.4)*2,0,1)}}>Las tuyas de verdad — no las de una demo.</div>
          <div style={{position:'relative', marginTop:44, opacity:urlP}}>
            <span className="f-mono" style={{fontSize:27, fontWeight:700, color:'#0085FF', background:'rgba(0,133,255,0.07)', border:'1.5px solid rgba(0,133,255,0.3)', borderRadius:100, padding:'13px 40px', display:'inline-block', transform: clicking?'scale(0.96)':'scale(1)'}}>dinaup.com</span>
            {ringP > 0 && ringP < 1 && <div style={{position:'absolute', inset:-8, borderRadius:100, border:'3px solid rgba(0,133,255,0.6)', opacity:1-ringP, transform:`scale(${lerp(0.9,1.3,Easing.easeOutCubic(ringP))})`}}/>}
          </div>
        </div>
      )}

      {cartelP > 0.9 && curP > 0 && <CineCursor x={cur.x} y={cur.y} clicking={clicking}/>}

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