// === Escena 07 — "El asesor, conectado" · audio real 33.36s ===
// LOCUCIÓN: "¿Y el asesor? Tú decides cómo. Le creas un acceso, y él mismo entra y se descarga
//   todas las facturas en excel, con un clic... sin llamarte, sin pedirte nada a fin de mes. O si
//   lo prefieres, descargas tú el excel y se lo mandas. Como quieras. Pero fíjate en el matiz:
//   los datos viven en tu casa, y el asesor viene a verlos. Si el día de mañana cambias de
//   asesor, o hay cualquier conflicto... tu historia entera sigue contigo. Eso es ser dueño de
//   tus datos."
// BEATS: carril A (acceso + autoservicio del asesor) · carril B (exportas y envías) · card casa
//   autodibujada con el logo dentro y el asesor FUERA · el asesor se va y los datos NO SE MUEVEN.
function Escena07({ t }){
  const T = {
    lanes:[1.3, 1.7], toggle:3.4,
    portal:4.8, miniCur:6.8, miniClick:7.6, toastDl:8.2,
    focoB:12.5, clickExp:13.5, fly:14.1, type:14.5, enviado:16.2,
    casa:18.3, draw:18.5,
    sale:23.5, saleEnd:25.5,
    glow:27.2, badge:30.0,
  };
  const laneP = (i)=> clamp((t-T.lanes[i])/0.55, 0, 1);
  const toggleOn = t >= T.toggle;
  const portalP = clamp((t-T.portal)/0.5, 0, 1);
  const dlDone = t >= T.miniClick+0.2;
  const toastP = clamp((t-T.toastDl)/0.45, 0, 1);

  const focoB = clamp((t-T.focoB)/0.5, 0, 1);
  const expPress = t >= T.clickExp && t < T.clickExp+0.3;
  const flyP = clamp((t-T.fly)/0.9, 0, 1), flyE = Easing.easeInOutCubic(flyP);
  const enviadoP = clamp((t-T.enviado)/0.45, 0, 1), enviadoE = Easing.easeOutBack(enviadoP);

  const casaP = clamp((t-T.casa)/0.5, 0, 1);
  const drawP = clamp((t-T.draw)/2.0, 0, 1);
  const saleP = clamp((t-T.sale)/(T.saleEnd-T.sale), 0, 1), saleE = Easing.easeInOutCubic(saleP);
  const glowOn = t >= T.glow;
  const glow = glowOn ? 0.5+0.5*Math.sin((t-T.glow)*2.2) : 0;
  const badgeP = clamp((t-T.badge)/0.5, 0, 1), badgeE = Easing.easeOutBack(badgeP);

  const dimA = focoB > 0 && t < T.casa ? 0.55 : 1;

  const FACTS = [
    ['F-1207','Talleres Sanz','1.240,00 €'],
    ['F-1206','Dist. Vega','386,50 €'],
    ['F-1205','Clínica Duero','2.150,00 €'],
  ];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={Math.max(0,t-0.2)} eyebrow="TU ASESOR · DOS VÍAS" title={<span>El asesor entra a verlos. <span className="grad-text">No se los lleva.</span></span>}/>

      <div style={{position:'absolute', left:170, top:206, right:170, display:'grid', gridTemplateColumns:'1fr 1fr', gap:26}}>

        {/* ===== Carril A — Le creas un acceso ===== */}
        <div style={{opacity:laneP(0)*dimA, transform:`translateY(${(1-Easing.easeOutCubic(laneP(0)))*20}px)`, transition:'opacity 350ms'}}>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:12}}>
            <span className="f-mono" style={{width:26, height:26, borderRadius:100, background:'#0085FF', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>1</span>
            <span className="f-plex" style={{fontSize:16, fontWeight:800, color:'#0F172A'}}>Le creas un acceso</span>
          </div>
          <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:13, padding:'16px 20px', boxShadow:'0 10px 30px rgba(15,23,42,0.06)'}}>
            {/* Fila de usuario asesor */}
            <div style={{display:'flex', alignItems:'center', gap:13, paddingBottom:14, borderBottom:'1px solid #F1F5F9'}}>
              <div style={{width:38, height:38, borderRadius:100, background:'#7C3AED', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>GL</div>
              <div style={{flex:1}}>
                <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A'}}>G. López · Gestoría López</div>
                <span className="f-mono" style={{fontSize:9.5, fontWeight:800, color:'#7C3AED', background:'rgba(124,58,237,0.08)', border:'1px solid rgba(124,58,237,0.3)', borderRadius:100, padding:'2px 10px'}}>Asesoría · solo consulta</span>
              </div>
              <div style={{width:52, height:28, borderRadius:100, background: toggleOn?'#10B981':'#CBD5E1', position:'relative', transition:'background 250ms'}}>
                <div style={{position:'absolute', top:3, left: toggleOn?27:3, width:22, height:22, borderRadius:100, background:'#fff', boxShadow:'0 2px 6px rgba(15,23,42,0.25)', transition:'left 250ms'}}/>
              </div>
            </div>
            {/* Mini-viewport: lo que ve el asesor */}
            <div style={{marginTop:14, opacity:portalP, position:'relative'}}>
              <div style={{display:'flex', alignItems:'center', gap:7, marginBottom:8}}>
                <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8', letterSpacing:'1.5px'}}>LO QUE VE ÉL, DESDE SU DESPACHO</span>
                <span style={{width:7, height:7, borderRadius:100, background:'#10B981', opacity:0.5+0.5*Math.sin(t*4)}}/>
                <span className="f-mono" style={{fontSize:9.5, color:'#059669'}}>conectado ahora</span>
              </div>
              <div style={{border:'1.5px solid #E2E8F0', borderRadius:10, overflow:'hidden', background:'#FBFDFF'}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 14px', borderBottom:'1px solid #EEF2F7', background:'#fff'}}>
                  <span className="f-plex" style={{fontSize:11.5, fontWeight:700, color:'#0F172A'}}>Facturas · 4T</span>
                  <span className="f-mono" style={{fontSize:10, fontWeight:800, color:'#fff', background: dlDone?'#059669':'#0085FF', borderRadius:8, padding:'5px 12px', transform:`scale(${t>=T.miniClick&&t<T.miniClick+0.25?0.93:1})`, transition:'background 250ms'}}>
                    {dlDone ? '✓ descargado' : '⬇ Exportar a excel'}
                  </span>
                </div>
                {FACTS.map((f,i)=>(
                  <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'6px 14px', borderBottom:'1px solid #F1F5F9', fontSize:10.5}}>
                    <span className="f-mono" style={{color:'#94A3B8'}}>{f[0]}</span>
                    <span style={{color:'#334155', fontWeight:600}}>{f[1]}</span>
                    <span className="f-mono" style={{color:'#475569'}}>{f[2]}</span>
                  </div>
                ))}
              </div>
              {/* Toast de descarga */}
              {toastP > 0 && (
                <div style={{position:'absolute', right:10, bottom:-16, display:'flex', alignItems:'center', gap:8, background:'#0F172A', borderRadius:100, padding:'7px 16px', opacity:clamp(toastP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutBack(toastP))*10}px)`, boxShadow:'0 12px 30px rgba(15,23,42,0.35)'}}>
                  <span style={{fontSize:11, color:'#56E16A'}}>✓</span>
                  <span className="f-mono" style={{fontSize:10, color:'#fff'}}>facturas-4T.xlsx · sin llamarte</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* ===== Carril B — Se lo mandas tú ===== */}
        <div style={{opacity:laneP(1)*(t>=T.focoB||t<T.casa?1:1), transform:`translateY(${(1-Easing.easeOutCubic(laneP(1)))*20}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:12}}>
            <span className="f-mono" style={{width:26, height:26, borderRadius:100, background:'#8B5CF6', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>2</span>
            <span className="f-plex" style={{fontSize:16, fontWeight:800, color:'#0F172A'}}>O se lo mandas tú</span>
          </div>
          <div style={{background:'#fff', border:`1.5px solid ${focoB>0?'rgba(139,92,246,0.45)':'#E2E8F0'}`, borderRadius:13, padding:'16px 20px', boxShadow: focoB>0?'0 16px 44px rgba(139,92,246,0.12)':'0 10px 30px rgba(15,23,42,0.06)', transition:'border 350ms', position:'relative'}}>
            {/* Botón exportar + archivo */}
            <div style={{display:'flex', alignItems:'center', gap:14}}>
              <span className="f-mono" style={{fontSize:10.5, fontWeight:800, color:'#fff', background: t>=T.clickExp+0.2?'#059669':'#0085FF', borderRadius:9, padding:'8px 16px', transform:`scale(${expPress?0.93:1})`, transition:'background 250ms'}}>
                {t>=T.clickExp+0.2 ? '✓ Exportado' : '⬇ Exportar'}
              </span>
              <div style={{display:'flex', alignItems:'center', gap:8, opacity:clamp((t-T.clickExp-0.2)/0.4,0,1)}}>
                <div style={{width:30, height:36, background:'#DCFCE7', border:'1px solid #86EFAC', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <span className="f-mono" style={{fontSize:6.5, fontWeight:800, color:'#059669'}}>XLSX</span>
                </div>
                <span className="f-mono" style={{fontSize:10.5, color:'#475569'}}>facturas-4T.xlsx</span>
              </div>
            </div>
            {/* Email */}
            <div style={{marginTop:14, border:'1px solid #EEF2F7', borderRadius:10, overflow:'hidden', opacity:clamp((t-T.fly)/0.4,0,1)}}>
              <div style={{padding:'8px 14px', borderBottom:'1px solid #F1F5F9', display:'flex', gap:8, fontSize:11}}>
                <span style={{color:'#94A3B8'}}>Para:</span>
                <span className="f-mono" style={{color:'#0F172A'}}><Typewriter text="gestoria.lopez@asesores.es" start={T.type} cps={26} t={t}/></span>
              </div>
              <div style={{padding:'8px 14px', borderBottom:'1px solid #F1F5F9', display:'flex', gap:8, fontSize:11}}>
                <span style={{color:'#94A3B8'}}>Asunto:</span>
                <span style={{color:'#334155', fontWeight:600}}>Facturas 4T · 1 adjunto</span>
              </div>
              <div style={{padding:'9px 14px', display:'flex', alignItems:'center', gap:10}}>
                {/* Adjunto que vuela desde el botón */}
                <div style={{display:'flex', alignItems:'center', gap:6, background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:7, padding:'4px 10px', opacity:flyP, transform:`translateX(${(1-flyE)*-60}px)`}}>
                  <span className="f-mono" style={{fontSize:8.5, fontWeight:800, color:'#059669'}}>XLSX</span>
                  <span className="f-mono" style={{fontSize:9.5, color:'#64748B'}}>facturas-4T.xlsx</span>
                </div>
                <span className="f-mono" style={{marginLeft:'auto', fontSize:10.5, fontWeight:800, color:'#fff', background: enviadoP>0?'#059669':'#8B5CF6', borderRadius:8, padding:'6px 16px', transform:`scale(${enviadoP>0?lerp(0.85,1,enviadoE):1})`, transition:'background 250ms'}}>
                  {enviadoP>0 ? '✓ Enviado' : 'Enviar ✉'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ===== Card inferior: tus datos viven en TU casa ===== */}
      {casaP > 0 && (
        <div style={{position:'absolute', left:170, right:170, bottom:140, background:'#fff', border:`2px solid rgba(0,133,255,${0.35+glow*0.3})`, borderRadius:16, padding:'22px 30px', display:'flex', alignItems:'center', gap:26, opacity:clamp(casaP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutCubic(casaP))*22}px)`, boxShadow:`0 24px 60px rgba(0,133,255,${0.12+glow*0.06})`, zIndex:6}}>
          {/* Casa autodibujada con logo dentro */}
          <div style={{position:'relative', width:110, height:96, flexShrink:0}}>
            <svg width="110" height="96" viewBox="0 0 110 96" fill="none">
              <path d="M8 46 L55 10 L102 46 M18 42 V86 H92 V42" stroke="#0085FF" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"
                strokeDasharray="330" strokeDashoffset={330*(1-drawP)}/>
            </svg>
            <div style={{position:'absolute', left:'50%', top:'58%', transform:'translate(-50%,-50%)', opacity:clamp((drawP-0.6)/0.4,0,1)}}>
              <DinaupLogo mark size={30}/>
            </div>
          </div>
          <div style={{flex:1}}>
            <div className="f-plex" style={{fontSize:19, fontWeight:800, color:'#0F172A'}}>Tus datos viven en tu casa</div>
            <div style={{fontSize:12.5, color:'#64748B', marginTop:4}}>
              {saleP < 1 ? 'El asesor viene a verlos — la historia entera de tu empresa, contigo.' : 'El asesor cambió. Tus datos no se han movido ni un píxel.'}
            </div>
          </div>
          {/* Avatar del asesor FUERA de la casa (y se va) */}
          <div style={{display:'flex', alignItems:'center', gap:10, opacity:1-saleP, transform:`translateX(${saleE*260}px)`, flexShrink:0}}>
            <div style={{width:40, height:40, borderRadius:100, background:'#7C3AED', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', border:'2.5px dashed rgba(124,58,237,0.5)', padding:2}}>GL</div>
            <div className="f-mono" style={{fontSize:9.5, color:'#94A3B8'}}>viene a verlos<br/>no se los lleva</div>
          </div>
          {/* Badge final */}
          {badgeP > 0 && (
            <div className="f-mono" style={{position:'absolute', top:-16, right:34, background:'#0F172A', color:'#56E16A', fontSize:11.5, fontWeight:800, letterSpacing:'2px', borderRadius:100, padding:'8px 20px', transform:`scale(${lerp(0.6,1,badgeE)})`, opacity:clamp(badgeP*1.3,0,1), boxShadow:'0 14px 36px rgba(15,23,42,0.35)'}}>DUEÑO DE TUS DATOS</div>
          )}
        </div>
      )}

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