// === Escena 07 — "Tu asesor" · audio real 22.73s ===
// LOCUCIÓN: "¿Qué pasa con él? Dos opciones. Una: exportas el trimestre y se lo mandas... un
//   clic, y le llega todo ordenado. O mejor: le das un usuario a tu asesor, y entra él. Ve las
//   facturas, descarga lo que necesite, cuando quiera. Se acabó el mándame las facturas de
//   octubre. Tu gestoría deja de perseguirte... y tú dejas de hacer de mensajero."
// UI: herencia de slide-trimestre.jsx + su 2ª vía pendiente (acceso con usuario propio).
// BEATS: carril A (libros→email→enviado) · carril B (toggle acceso→portal en vivo→descarga) ·
//   remate literal del master centrado.
function Escena09({ t }){
  const T = {
    lanes:    [2.9, 3.3],                                    // (apoyo) los dos carriles
    books0:    4.2,  // "exportas el trimestre"                → libros
    bookStep: 0.38,                                          // (incremento, no instante)
    arrow:     5.5,                                          // (apoyo) flecha
    para:      5.9,                                          // (apoyo) para:
    asunto:    6.4,                                          // (apoyo) asunto:
    send:      7.1,  // "un clic"                              → enviar
    sent:      7.6,                                          // (apoyo) enviado
    confirm:   8.1,  // "le llega todo ordenado"               → confirmación
    focoB:     10.5,  // "le das un usuario a tu asesor"        → foco opción B
    toggle:    12.5,                                          // (apoyo) toggle
    portal:   13.6,  // "Ve las facturas"                      → portal del asesor
    dl:       14.7,  // "descarga lo que necesite"             → descarga
    toast:    15.2,                                          // (apoyo) toast
    remate:   17.4,  // "Se acabó el mándame las facturas"     → remate
    calm:     23.3,  // "dejas de hacer de mensajero"          → calma final
  };
  const BOOKS = ['Libro Facturas Emitidas.xlsx','Libro Facturas Recibidas.xlsx','Libro de IVA.xlsx','Extracto Bancario.xlsx'];
  const SIZES = ['142 KB','198 KB','84 KB','64 KB'];

  const laneP = (i)=> clamp((t-T.lanes[i])/0.55, 0, 1);
  const focoP = clamp((t-T.focoB)/0.6, 0, 1);
  const sent = t >= T.sent;
  const confirmP = clamp((t-T.confirm)/0.45, 0, 1);
  const togP = clamp((t-T.toggle)/0.4, 0, 1), togE = Easing.easeInOutCubic(togP);
  const portalOn = t >= T.portal;
  const livePulse = 0.5 + 0.5*Math.sin(t*3.2);
  const dlP = clamp((t-T.dl)/0.4, 0, 1);
  const toastP = clamp((t-T.toast)/0.4, 0, 1);
  const remP = clamp((t-T.remate)/0.6, 0, 1), remE = Easing.easeOutBack(remP);

  const laneStyle = (i)=>({
    position:'absolute', top:212, width:770, height:560,
    opacity: laneP(i) * (i===0 && focoP>0 ? lerp(1, 0.55, focoP) : 1) * (remP>0 ? 0.85 : 1),
    transform:`translateY(${(1-Easing.easeOutCubic(laneP(i)))*30}px) scale(${i===1?lerp(1,1.02,focoP):1})`,
  });
  // Los dos carriles a escala de lienzo (composición): wrapper con zoom suave
  const zoomWrap = { position:'absolute', inset:0, transform:'scale(1.14) translateY(26px)', transformOrigin:'50% 30%' };

  return (
    <SlideCanvas variant="light-soft">
      <div style={{position:'absolute', top:76, left:0, right:0, textAlign:'center'}}>
        <div className="f-mono" style={{fontSize:12.5, letterSpacing:'3px', color:'#0085FF', marginBottom:6, opacity:clamp((t-0.3)/0.5,0,1)}}>¿Y TU GESTOR?</div>
        <div className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em', opacity:clamp((t-0.6)/0.5,0,1)}}>Dos opciones</div>
      </div>

      <div style={zoomWrap}>
      {/* ── Carril A: exportar y enviar ── */}
      <div style={{...laneStyle(0), left:150}}>
        <div className="f-mono" style={{fontSize:12, fontWeight:800, color:'#64748B', marginBottom:10}}>1 · SE LO MANDAS</div>
        <div style={{display:'flex', gap:16, alignItems:'flex-start'}}>
          {/* Dinaup genera */}
          <div style={{flex:1, background:'#fff', border:'1px solid #E2E8F0', borderRadius:13, padding:'15px 17px', boxShadow:'0 18px 46px rgba(0,133,255,0.12)'}}>
            <div className="f-mono" style={{fontSize:10, color:'#94A3B8', marginBottom:11}}>Dinaup genera · Q4 2025</div>
            {BOOKS.map((b,i)=>{
              const p = clamp((t-(T.books0+i*T.bookStep))/0.5, 0, 1);
              const building = p > 0 && p < 0.85;
              const ready = p >= 0.85;
              return (
                <div key={i} style={{display:'flex', alignItems:'center', gap:9, padding:'7px 9px', border:`1px solid ${ready?'rgba(16,185,129,0.4)':'#EEF2F7'}`, borderRadius:8, marginBottom:6, opacity:clamp(p*1.5,0,1), transform:`translateX(${(1-Easing.easeOutCubic(p))*-14}px)`}}>
                  <div style={{width:24, height:28, background:'#DCFCE7', border:'1px solid #86EFAC', borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}><span className="f-mono" style={{fontSize:6.5, fontWeight:800, color:'#16A34A'}}>XLS</span></div>
                  <span style={{fontSize:11, color:'#334155', flex:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', fontFamily:"'Open Sans',sans-serif"}}>{b}</span>
                  {building && <span style={{width:11, height:11, border:'2px solid rgba(0,133,255,0.25)', borderTopColor:'#0085FF', borderRadius:100, display:'inline-block', transform:`rotate(${(t*500)%360}deg)`, flexShrink:0}}/>}
                  {ready && <span className="f-mono" style={{fontSize:8.5, fontWeight:700, color:'#059669', flexShrink:0}}>✓ {SIZES[i]}</span>}
                </div>
              );
            })}
            <div style={{fontSize:9.5, color:'#94A3B8', marginTop:8, fontStyle:'italic'}}>Salen de lo que ya hiciste. Nada que buscar.</div>
          </div>

          {/* Flecha */}
          <svg width="30" height="30" viewBox="0 0 24 24" style={{marginTop:120, opacity:clamp((t-T.arrow)/0.5,0,1), flexShrink:0}} fill="none" stroke="#0085FF" strokeWidth="2.4"><path d="M4 12h14M13 6l6 6-6 6"/></svg>

          {/* Email */}
          <div style={{flex:1.1, background:'#fff', borderRadius:13, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 18px 46px rgba(139,92,246,0.14)', opacity:clamp((t-T.arrow-0.2)/0.5,0,1)}}>
            <div style={{height:30, background:'#1E293B', display:'flex', alignItems:'center', padding:'0 12px', justifyContent:'space-between'}}>
              <span className="f-mono" style={{fontSize:9.5, color:'#CBD5E1'}}>Nuevo mensaje</span>
              <span className="f-mono" style={{fontSize:9.5, color:'#64748B'}}>— □ ×</span>
            </div>
            <div style={{padding:'11px 14px'}}>
              <div style={{borderBottom:'1px solid #EEF2F7', padding:'4px 0', fontSize:11}}>
                <span className="f-mono" style={{color:'#94A3B8', fontSize:9.5}}>Para: </span>
                <span className="f-mono" style={{color:'#0F172A', fontSize:10.5}}><Typewriter text="asesor@gestoria-lopez.com" start={T.para} cps={34} t={t}/></span>
              </div>
              <div style={{borderBottom:'1px solid #EEF2F7', padding:'4px 0', fontSize:11}}>
                <span className="f-mono" style={{color:'#94A3B8', fontSize:9.5}}>Asunto: </span>
                <span className="f-mono" style={{color:'#0F172A', fontSize:10.5}}><Typewriter text="Libros Q4 2025" start={T.asunto} cps={34} t={t}/></span>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:5, margin:'9px 0'}}>
                {BOOKS.map((b,i)=>{
                  const p = clamp((t-(5.4+i*0.18))/0.3, 0, 1);
                  return <div key={i} className="f-mono" style={{fontSize:8, color:'#475569', background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:5, padding:'3px 7px', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', opacity:p}}>📎 {b}</div>;
                })}
              </div>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{background: sent?'#10B981':'#0085FF', color:'#fff', borderRadius:8, padding:'7px 16px', fontSize:11.5, fontWeight:700, transform: t>=T.send&&t<T.send+0.2?'scale(0.93)':'scale(1)', fontFamily:"'IBM Plex Sans',sans-serif"}}>{sent?'✓ Enviado':'Enviar ✉'}</div>
                {confirmP > 0 && <span className="f-plex" style={{fontSize:10.5, fontWeight:700, color:'#059669', opacity:clamp(confirmP*1.3,0,1), transform:`translateX(${(1-Easing.easeOutBack(confirmP))*12}px)`}}>✓ El asesor ya tiene todo el trimestre</span>}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Carril B: acceso del asesor ── */}
      <div style={{...laneStyle(1), left:1000, width:770}}>
        <div className="f-mono" style={{fontSize:12, fontWeight:800, color: focoP>0?'#0085FF':'#64748B', marginBottom:10}}>2 · ENTRA ÉL</div>
        <div style={{background:'#fff', border:`1.5px solid ${focoP>0?'rgba(0,133,255,0.4)':'#E2E8F0'}`, borderRadius:13, padding:'15px 17px', boxShadow: focoP>0?'0 22px 56px rgba(0,133,255,0.18)':'0 18px 46px rgba(15,23,42,0.08)'}}>
          {/* Usuario del asesor + toggle */}
          <div style={{display:'flex', alignItems:'center', gap:12, paddingBottom:13, borderBottom:'1px solid #EEF2F7'}}>
            <div style={{width:40, height:40, borderRadius:100, background:'linear-gradient(135deg,#8B5CF6,#6D28D9)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:14, fontFamily:"'IBM Plex Sans',sans-serif"}}>MV</div>
            <div style={{flex:1}}>
              <div className="f-plex" style={{fontSize:14.5, fontWeight:700, color:'#0F172A'}}>M. Vega · Gestoría López</div>
              <div style={{display:'flex', gap:6, marginTop:3}}>
                <span className="f-mono" style={{fontSize:9, fontWeight:700, color:'#6D28D9', background:'rgba(139,92,246,0.10)', border:'1px solid rgba(139,92,246,0.3)', borderRadius:100, padding:'1px 9px'}}>Asesoría</span>
                <span className="f-mono" style={{fontSize:9, color:'#64748B', background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:100, padding:'1px 9px'}}>su propio usuario</span>
              </div>
            </div>
            {/* Toggle */}
            <div style={{width:52, height:28, borderRadius:100, background: togP>0.5?'#10B981':'#CBD5E1', position:'relative', boxShadow: togP>=1&&t<T.toggle+1.0?'0 0 0 5px rgba(16,185,129,0.2)':'none'}}>
              <div style={{position:'absolute', top:3, left:lerp(3, 27, togE), width:22, height:22, borderRadius:100, background:'#fff', boxShadow:'0 2px 6px rgba(0,0,0,0.2)'}}/>
            </div>
          </div>

          {/* Mini-viewport: el portal visto por ella */}
          <div style={{marginTop:13, border:'1px solid #E2E8F0', borderRadius:10, overflow:'hidden', opacity: portalOn?1:0.35, filter: portalOn?'none':'grayscale(0.6)'}}>
            <div style={{height:26, background:'#F8FAFC', borderBottom:'1px solid #EEF2F7', display:'flex', alignItems:'center', gap:8, padding:'0 11px'}}>
              <DinaupLogo size={13} mark/>
              <span className="f-mono" style={{fontSize:8.5, color:'#64748B'}}>play.dinaup.com — sesión de M. Vega</span>
              <div style={{flex:1}}/>
              {portalOn && (
                <span className="f-mono" style={{fontSize:8.5, fontWeight:700, color:'#059669', display:'flex', alignItems:'center', gap:5}}>
                  <span style={{width:7, height:7, borderRadius:100, background:'#10B981', boxShadow:`0 0 0 ${2+livePulse*3}px rgba(16,185,129,0.18)`}}/>
                  conectada ahora
                </span>
              )}
            </div>
            <div style={{padding:'9px 12px', background:'#fff'}}>
              {[['Endesa · END-887421','288,47 €'],['Vodafone · VF-2025-11-002','120,00 €'],['Movistar · FM-112334','79,99 €']].map((r,i)=>(
                <div key={i} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'6px 4px', borderBottom:'1px solid #F8FAFC'}}>
                  <span className="f-mono" style={{fontSize:10, color:'#475569'}}>{r[0]}</span>
                  <div style={{display:'flex', alignItems:'center', gap:9}}>
                    <span className="f-mono" style={{fontSize:10, fontWeight:700, color:'#0F172A'}}>{r[1]}</span>
                    <span style={{fontSize:9, color:'#0085FF', opacity: i===2&&dlP>0?1:0.5, transform: i===2&&dlP>0&&dlP<1?`translateY(${Math.sin(dlP*Math.PI)*2}px)`:'none'}}>⬇</span>
                  </div>
                </div>
              ))}
              {toastP > 0 && (
                <div className="f-mono" style={{marginTop:7, fontSize:9, fontWeight:700, color:'#059669', background:'rgba(16,185,129,0.08)', border:'1px solid rgba(16,185,129,0.3)', borderRadius:6, padding:'4px 9px', display:'inline-block', opacity:clamp(toastP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutBack(toastP))*8}px)`}}>⬇ Libro de IVA.xlsx — descargado</div>
              )}
            </div>
          </div>
        </div>
      </div>

      </div>

      {/* Remate del master */}
      {remP > 0 && (
        <div style={{position:'absolute', bottom:104, left:0, right:0, textAlign:'center', zIndex:12, opacity:clamp(remP*1.3,0,1), transform:`translateY(${(1-remE)*26}px) scale(${lerp(0.92,1,remE)})`}}>
          <span className="f-plex" style={{fontSize:33, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', background:'rgba(255,255,255,0.92)', borderRadius:16, padding:'14px 34px', boxShadow:'0 18px 50px rgba(15,23,42,0.14)', border:'1px solid #EEF2F7'}}>
            Se acabó el <span style={{color:'#0085FF'}}>«mándame las facturas de octubre»</span>.
          </span>
        </div>
      )}

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