// === Escena 01 — "Intro Dinaup → las facturas" · audio real 17.06s ===
// LOCUCIÓN: "Esto es Dinaup: el programa donde tu empresa lo lleva todo. La facturación, el
//   banco, las ventas, el equipo... en un solo sitio, sin teclear el mismo dato dos veces.
//   Y hoy venimos a enseñarte una sola cosa. Nuestra favorita."
// BEATS (lenguaje del deck, no portada estática): 4 MINI-VENTANAS de software entran al
//   nombrarlas → CONVERGEN en una sola ventana al decir "en un solo sitio" → un pulso-dato
//   recorre las secciones ("sin teclear dos veces") → la de facturación SE ELEVA a hero
//   "Las facturas." al decir "nuestra favorita".
function Escena01({ t }){
  const T = {
    logo:     0.0,   // "Esto es Dinaup"                        → logo entra
    eyebrow:  0.9,                                           // (apoyo) eyebrow
    head:     2.0,   // "el programa donde tu empresa"          → titular
    wins:     [4.7, 5.8, 6.7, 7.7],   // "La facturación" · "el banco" · "las ventas" · "el equipo"
    head2:    8.9,                                           // (apoyo) segundo titular
    conv:     9.2,   // "en un solo sitio"                     → convergen
    pulse:    10.5,   // "sin teclear el mismo dato dos veces"  → pulso
    fadeOut: 14.0,   // "Y hoy venimos a enseñarte una sola cosa" → fade
    bloom:   17.4,   // "Nuestra favorita"                     → hero Las facturas
  };
  const logoP = clamp((t-T.logo)/0.8, 0, 1), logoE = Easing.easeOutCubic(logoP);
  const eyeP  = clamp((t-T.eyebrow)/0.5, 0, 1);
  const l2P   = clamp((t-T.head2)/0.6, 0, 1), l2E = Easing.easeOutCubic(l2P);

  const convP = clamp((t-T.conv)/0.85, 0, 1), convE = Easing.easeInOutCubic(convP);
  const p1Out = clamp((t-T.fadeOut)/0.7, 0, 1), p1OutE = Easing.easeInOutCubic(p1Out);
  const bloomP = clamp((t-T.bloom)/0.65, 0, 1), bloomE = Easing.easeOutBack(bloomP);
  const glow = bloomP >= 1 ? 0.5 + 0.5*Math.sin((t-T.bloom)*1.6) : 0;
  const L1 = 'Toda tu empresa.';

  // Mini-ventanas: posición suelta → cuadrante dentro del marco único
  const WINS = [
    { k:'Facturación', dot:'#0085FF', from:{x:1014, y:292, r:-2},   to:{x:1046, y:436} },
    { k:'Banco',       dot:'#10B981', from:{x:1424, y:326, r:1.6},  to:{x:1384, y:436} },
    { k:'Ventas',      dot:'#8B5CF6', from:{x:1044, y:572, r:1.2},  to:{x:1046, y:652} },
    { k:'Equipo',      dot:'#F59E0B', from:{x:1428, y:588, r:-1.6}, to:{x:1384, y:652} },
  ];
  const winP = (i)=> clamp((t-T.wins[i])/0.5, 0, 1);

  // Contenido esquemático pero reconocible de cada sección (density = calidad)
  const inner = (i)=>{
    if (i === 0) return (
      <div style={{padding:'8px 10px'}}>
        {[['END-887421','288,47 €'],['VF-2025-11-002','120,00 €']].map((r,k)=>(
          <div key={k} style={{display:'flex', alignItems:'center', gap:7, padding:'4px 6px', borderBottom:'1px solid #F1F5F9'}}>
            <div style={{width:15, height:19, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:3, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center'}}><span className="f-mono" style={{fontSize:4.5, fontWeight:800, color:'#DC2626'}}>PDF</span></div>
            <span className="f-mono" style={{fontSize:8, color:'#64748B', flex:1}}>{r[0]}</span>
            <span className="f-mono" style={{fontSize:9, fontWeight:800, color:'#0085FF'}}>{r[1]}</span>
          </div>
        ))}
        <div style={{display:'flex', justifyContent:'flex-end', marginTop:5}}>
          <span className="f-mono" style={{fontSize:7, fontWeight:800, color:'#fff', background:'#10B981', borderRadius:4, padding:'2px 7px'}}>+ CONTABILIZAR</span>
        </div>
      </div>
    );
    if (i === 1) return (
      <div style={{padding:'8px 10px'}}>
        {[['TRF CAFETERIA','+1.210'],['RECIBO ENDESA','−288,47'],['DOMICIL VODAFONE','−120']].map((r,k)=>(
          <div key={k} style={{display:'flex', alignItems:'center', gap:6, padding:'3.5px 4px', borderBottom:'1px solid #F1F5F9'}}>
            <span className="f-mono" style={{fontSize:7, color:'#64748B', flex:1, whiteSpace:'nowrap', overflow:'hidden'}}>{r[0]}</span>
            <span className="f-mono" style={{fontSize:7.5, fontWeight:700, color: r[1][0]==='+'?'#059669':'#EF4444'}}>{r[1]}</span>
            <span style={{width:12, height:12, borderRadius:100, background:'rgba(16,185,129,0.14)', color:'#059669', fontSize:7, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>✓</span>
          </div>
        ))}
        <div className="f-mono" style={{fontSize:6.5, color:'#059669', fontWeight:700, marginTop:4}}>✓ conciliado</div>
      </div>
    );
    if (i === 2) return (
      <div style={{display:'flex', gap:6, padding:'8px 10px'}}>
        {[['Propuesta',2,'#94A3B8'],['Negociación',2,'#0085FF'],['Ganada',1,'#10B981']].map((c,k)=>(
          <div key={k} style={{flex:1}}>
            <div className="f-mono" style={{fontSize:5.5, color:'#94A3B8', textTransform:'uppercase', letterSpacing:'0.5px', marginBottom:3}}>{c[0]}</div>
            {Array.from({length:c[1]}).map((_,j)=>(
              <div key={j} style={{height:18, background:'#F8FAFC', border:'1px solid #E2E8F0', borderLeft:`2.5px solid ${c[2]}`, borderRadius:4, marginBottom:4, padding:'3px 5px'}}>
                <div style={{height:3, width:'72%', background:'#E2E8F0', borderRadius:2}}/>
                <div style={{height:3, width:'46%', background:'#EEF2F7', borderRadius:2, marginTop:3}}/>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
    return (
      <div style={{padding:'8px 10px'}}>
        {[['MJ','María J.','08:12'],['JL','Juan L.','08:14'],['AR','Ana R.','08:21']].map((p,k)=>(
          <div key={k} style={{display:'flex', alignItems:'center', gap:7, padding:'3.5px 4px', borderBottom:'1px solid #F1F5F9'}}>
            <span style={{width:15, height:15, borderRadius:100, background:'linear-gradient(135deg,#F59E0B,#F97316)', color:'#fff', fontSize:5.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{p[0]}</span>
            <span style={{fontSize:8, color:'#334155', flex:1, fontFamily:"'Open Sans',sans-serif"}}>{p[1]}</span>
            <span className="f-mono" style={{fontSize:7.5, color:'#64748B'}}>{p[2]}</span>
            <span style={{width:6, height:6, borderRadius:100, background:'#10B981'}}/>
          </div>
        ))}
      </div>
    );
  };

  // Pulso-dato: recorre los 4 cuadrantes convergidos (el dato viaja, no se reteclea)
  const QC = [ {x:1207, y:539}, {x:1545, y:539}, {x:1545, y:755}, {x:1207, y:755} ];
  const pulseP = clamp((t-T.pulse)/1.8, 0, 1);
  let pulsePos = null, pulseSeg = -1;
  if (pulseP > 0 && pulseP < 1){
    const s = pulseP * 3;                       // 3 tramos C1→C2→C3(dcha abajo)→C4
    pulseSeg = Math.min(2, Math.floor(s));
    const sp = Easing.easeInOutQuad(s - pulseSeg);
    const a = QC[pulseSeg], b = QC[pulseSeg+1];
    pulsePos = { x: lerp(a.x, b.x, sp), y: lerp(a.y, b.y, sp) - Math.sin(sp*Math.PI)*26 };
  }
  const visited = (i)=> pulseP >= 1 || (pulseSeg >= 0 && i <= pulseSeg) || (pulseP > 0 && i === 0);

  // Hero fase 2: la card de factura SALE del cuadrante de facturación y crece al centro
  const cardX = lerp(1207, 470, Easing.easeInOutCubic(bloomP));
  const cardY = lerp(539, 500, Easing.easeInOutCubic(bloomP));
  const cardS = lerp(0.30, 1, bloomE);

  return (
    <SlideCanvas variant="hero" particles={14}>
      <RuedaDivider style={{position:'absolute', top:0, left:'60%', right:80, height:4, overflow:'hidden'}}/>
      <div style={{position:'absolute', left:100, top:96, opacity:logoP, transform:`translateY(${(1-logoE)*30}px)`}}>
        <DinaupLogo size={54}/>
      </div>

      {/* ── Título (izquierda) ── */}
      <div style={{position:'absolute', left:100, width:860, top:320, opacity:1-p1OutE, transform:`translateY(${-p1OutE*40}px)`}}>
        <div className="f-plex" style={{fontSize:14, fontWeight:600, letterSpacing:'2px', color:'var(--dn-primary)', marginBottom:28, opacity:eyeP, transform:`translateY(${(1-eyeP)*10}px)`}}>DINAUP · LA PLATAFORMA</div>
        <h1 className="f-plex" style={{fontSize:88, fontWeight:800, letterSpacing:'-0.035em', lineHeight:1.04, color:'#0F172A', margin:0}}>
          <span style={{display:'block'}}>
            {L1.split('').map((ch,i)=>{
              const p = clamp((t-(T.head+i*0.025))/0.35, 0, 1);
              const e = Easing.easeOutCubic(p);
              return <span key={i} style={{display:'inline-block', opacity:p, transform:`translateY(${(1-e)*30}px)`, whiteSpace:'pre'}}>{ch}</span>;
            })}
          </span>
          <span className="grad-text" style={{display:'block', opacity:clamp(l2P*1.2,0,1), transform:`translateY(${(1-l2E)*30}px)`}}>En un solo sitio.</span>
        </h1>
        <div style={{marginTop:30, fontSize:23, color:'#64748B', lineHeight:1.4, opacity:clamp((t-T.pulse)/0.6,0,1)}}>
          Sin teclear el mismo dato <span style={{color:'#0F172A', fontWeight:600}}>dos veces.</span>
        </div>
      </div>

      {/* ── Marco único (aparece en la convergencia) ── */}
      <div style={{position:'absolute', left:1010, top:318, width:706, height:560, background:'#fff', borderRadius:14, border:'1px solid #E2E8F0', boxShadow:'0 36px 90px rgba(0,133,255,0.18)', opacity:convE*(1-p1OutE*0.82), transform:`scale(${lerp(0.96,1,convE)})`, overflow:'hidden'}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes" title="Dinaup — Tu empresa"/>
        <DinaupAppHeader breadcrumb={["Pymes","Inicio"]}/>
      </div>

      {/* ── Las 4 mini-ventanas (sueltas → cuadrantes del marco) ── */}
      {WINS.map((w,i)=>{
        const p = winP(i), e = Easing.easeOutBack(p);
        const x = lerp(w.from.x, w.to.x, convE);
        const y = lerp(w.from.y, w.to.y, convE);
        const rot = lerp(w.from.r, 0, convE);
        const lit = visited(i) && convP >= 1;
        return (
          <div key={i} style={{position:'absolute', left:x, top:y, width:322, height:206, background:'#fff', borderRadius:10, border:`1.5px solid ${lit?'rgba(0,133,255,0.4)':'#E2E8F0'}`, boxShadow: convP<1 ? '0 22px 55px rgba(15,23,42,0.16)' : lit ? '0 6px 20px rgba(0,133,255,0.14)' : '0 4px 14px rgba(15,23,42,0.06)', opacity:clamp(p*1.3,0,1)*(1-p1OutE*0.82), transform:`rotate(${rot}deg) scale(${lerp(0.6,1,e)})`, overflow:'hidden', zIndex:6}}>
            <div style={{height:26, background:'#F8FAFC', borderBottom:'1px solid #EEF2F7', display:'flex', alignItems:'center', gap:7, padding:'0 10px'}}>
              <span style={{width:8, height:8, borderRadius:100, background:w.dot}}/>
              <span className="f-plex" style={{fontSize:10.5, fontWeight:700, color:'#334155'}}>{w.k}</span>
              <div style={{flex:1}}/>
              <span className="f-mono" style={{fontSize:7, color:'#CBD5E1'}}>— □ ×</span>
            </div>
            {inner(i)}
          </div>
        );
      })}

      {/* Pulso-dato viajando por las secciones */}
      {pulsePos && (
        <div style={{position:'absolute', left:pulsePos.x-7, top:pulsePos.y-7, width:14, height:14, borderRadius:100, background:'#62B4FF', boxShadow:'0 0 18px 7px rgba(0,133,255,0.55)', zIndex:12, opacity:(1-p1OutE)}}/>
      )}

      {/* ── Fase 2 · hero "Las facturas." (la card sale de la plataforma) ── */}
      {bloomP > 0 && (
        <React.Fragment>
          {/* la card que crece desde el cuadrante de facturación */}
          <div style={{position:'absolute', left:cardX-82, top:cardY-104, width:164, height:206, zIndex:14, transform:`scale(${cardS}) rotate(${lerp(8,-4,bloomE)}deg)`}}>
            {[2,1,0].map(k=>(
              <div key={k} style={{position:'absolute', left:k*13, top:k*11, width:150, height:186, background:'#fff', borderRadius:12, border:'1px solid #E2E8F0', boxShadow: k===0?'0 28px 60px rgba(0,133,255,0.30)':'0 12px 28px rgba(15,23,42,0.12)', transform:`rotate(${(k-1)*-4}deg)`, opacity: k===0?1:clamp((bloomP-0.35-k*0.14)/0.4,0,1), padding:'15px 17px'}}>
                {k===0 && (
                  <React.Fragment>
                    <div className="f-plex" style={{fontSize:13, fontWeight:800, color:'#0F172A'}}>ENDESA</div>
                    <div className="f-mono" style={{fontSize:7.5, color:'#94A3B8', marginTop:2}}>END-887421 · 04/11/2025</div>
                    {[86,64,74,54].map((w,i)=><div key={i} style={{height:4, width:`${w}%`, background:'#EEF2F7', borderRadius:2, marginTop:9}}/>)}
                    <div className="f-mono" style={{position:'absolute', right:15, bottom:13, fontSize:15, fontWeight:800, color:'#0085FF'}}>288,47 €</div>
                  </React.Fragment>
                )}
              </div>
            ))}
          </div>
          {/* titular */}
          <div style={{position:'absolute', left:660, top:400, zIndex:14, opacity:clamp((bloomP-0.25)/0.5,0,1)}}>
            <div className="f-mono" style={{fontSize:15, letterSpacing:'4px', color:'var(--dn-primary)', marginBottom:22}}>Y DE TODO… NUESTRA FAVORITA</div>
            <div className="f-plex" style={{fontSize:106, fontWeight:800, letterSpacing:'-0.035em', lineHeight:1.0, color:'#0F172A', transform:`translateY(${(1-bloomE)*26}px)`, filter:`drop-shadow(0 0 ${16+glow*12}px rgba(0,133,255,${0.22+glow*0.2}))`}}>
              Las <span className="grad-text">facturas.</span>
            </div>
            <div style={{display:'inline-flex', alignItems:'center', gap:9, marginTop:22, padding:'8px 18px', background:'rgba(0,133,255,0.08)', border:'1px solid rgba(0,133,255,0.25)', borderRadius:100, opacity:clamp((bloomP-0.5)/0.4,0,1)}}>
              <span style={{color:'#F59E0B', fontSize:15}}>★</span>
              <span className="f-plex" style={{fontSize:16, fontWeight:600, color:'#334155'}}>La sección que más nos gusta enseñar</span>
            </div>
          </div>
        </React.Fragment>
      )}

      <div className="f-mono" style={{position:'absolute', left:100, bottom:56, fontSize:12, color:'#94A3B8', display:'flex', alignItems:'center', gap:10, opacity:clamp((t-4.2)/0.5,0,1)*(1-p1OutE)}}>
        <span className="pulse-dot" style={{width:8, height:8, borderRadius:100, background:'#10B981', display:'inline-block'}}/>
        TODO LO QUE VAS A VER SON PANTALLAS REALES
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { Escena01 });