// === Escena 06 — "Tus datos, tuyos" (rediseño) · audio real 31.32s ===
// LOCUCIÓN: "Porque en Dinaup puedes llevar también las compras, los gastos y los bancos. Y
//   cuando ventas, compras, gastos y banco viven en el mismo sitio... los datos de tu negocio
//   están en tu sistema. ¿Sabes lo que significa eso? Que el iva del trimestre lo ves tú, cuando
//   quieras... no te enteras el último día, cuando te llame el asesor con la cifra. Los números
//   de tu empresa dejan de ser algo que te cuentan... y pasan a ser algo que miras."
// BEATS: 4 módulos VIVOS (mini-contenido real) se encienden al nombrarlos · CONVERGEN en una
//   fila compacta (la centralización, en movimiento) + aro y badge EN TU SISTEMA · la card IVA
//   emerge como héroe (countUp gigante) alimentada por pulsos · llega la llamada del asesor
//   («Te sale a pagar 4.812») y se TACHA: "ya lo sabías" · click final → desglose.
function Escena06({ t }){
  const T = {
    win:0.5, mods:[1.2, 2.7, 3.4, 4.2],        // ventas · compras · gastos · banco
    conv:6.6, convDur:1.6,
    aro:10.0, badge:11.3,
    iva:12.0, count:14.7,
    pulsos:15.5,
    toast:19.2, tacha:23.5, sabias:24.3,
    cur:26.4, click:27.9, expand:28.6,
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);

  const MODS = [
    { l:'Ventas',  c:'#0085FF', at:T.mods[0] },
    { l:'Compras', c:'#8B5CF6', at:T.mods[1] },
    { l:'Gastos',  c:'#F59E0B', at:T.mods[2] },
    { l:'Banco',   c:'#10B981', at:T.mods[3] },
  ];
  const modOn = (i)=> t >= MODS[i].at;
  const modPop = (i)=> Easing.easeOutBack(clamp((t-MODS[i].at)/0.5, 0, 1));

  // Convergencia: de la fila grande (arriba) a la fila compacta (abajo)
  const convP = clamp((t-T.conv)/T.convDur, 0, 1), convE = Easing.easeInOutCubic(convP);
  const CARD_W = 330, CARD_H = 296;
  const x0 = (i)=> 54 + i*354, y0 = 90;
  const xc = (i)=> 262 + i*248, yD = 428;
  const scD = 0.55;

  const aroP = clamp((t-T.aro)/0.7, 0, 1);
  const badgeP = clamp((t-T.badge)/0.45, 0, 1), badgeE = Easing.easeOutBack(badgeP);

  const ivaP = clamp((t-T.iva)/0.6, 0, 1), ivaE = Easing.easeOutBack(ivaP);
  const iva = useCountUp(0, 4812, T.count, 1.6, t);
  const fmtIva = iva >= 1000 ? `${Math.floor(iva/1000)}.${String(iva%1000).padStart(3,'0')}` : String(iva);

  const pulsosOn = t >= T.pulsos;
  const pulsoP = (i)=> pulsosOn ? (((t - T.pulsos) + i*0.45) % 1.4) / 1.4 : 0;

  const toastP = clamp((t-T.toast)/0.5, 0, 1), toastE = Easing.easeOutBack(toastP);
  const tachaP = clamp((t-T.tacha)/0.5, 0, 1);
  const sabiasP = clamp((t-T.sabias)/0.45, 0, 1), sabiasE = Easing.easeOutBack(sabiasP);
  const ring = Math.sin(t*6)*0.5+0.5;

  const expandP = clamp((t-T.expand)/0.5, 0, 1), expandE = Easing.easeOutCubic(expandP);

  // Target = centro real de la card IVA, medido en el DOM (961, 499)
  const cursorFrames = [
    {t:T.cur, x:1520, y:930},
    {t:T.click-0.2, x:960, y:500, arc:60},
    {t:31.0, x:960, y:500},
  ];

  // Mini-contenido real de cada módulo
  const modBody = [
    // Ventas
    (<div style={{display:'flex', flexDirection:'column', gap:6}}>
      {[['F-1207','Talleres Sanz','1.240,00 €'],['F-1206','Dist. Vega','386,50 €'],['F-1205','Clínica Duero','2.150,00 €']].map((r,i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:10.5, background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:7, padding:'7px 10px'}}>
          <span className="f-mono" style={{color:'#94A3B8', fontSize:9}}>{r[0]}</span>
          <span style={{color:'#334155', fontWeight:600, flex:1, overflow:'hidden', whiteSpace:'nowrap', textOverflow:'ellipsis'}}>{r[1]}</span>
          <span className="f-mono" style={{color:'#0F172A', fontWeight:700}}>{r[2]}</span>
        </div>
      ))}
      <div className="f-mono" style={{fontSize:9, color:'#059669', textAlign:'right'}}>facturación al día ✓</div>
    </div>),
    // Compras
    (<div style={{display:'flex', flexDirection:'column', gap:6}}>
      {[['Endesa · nov','288,47 €'],['SEUR · nov','45,60 €'],['Naturgy · nov','164,20 €']].map((r,i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:10.5, background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:7, padding:'7px 10px'}}>
          <span style={{width:18, height:22, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:3, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
            <span className="f-mono" style={{fontSize:5.5, fontWeight:800, color:'#DC2626'}}>PDF</span>
          </span>
          <span style={{color:'#334155', fontWeight:600, flex:1}}>{r[0]}</span>
          <span className="f-mono" style={{color:'#0F172A', fontWeight:700}}>{r[1]}</span>
        </div>
      ))}
      <div className="f-mono" style={{fontSize:9, color:'#059669', textAlign:'right'}}>digitalizadas con IA ✓</div>
    </div>),
    // Gastos
    (<div style={{display:'flex', flexDirection:'column', gap:6}}>
      {[['Combustible','68,40 €'],['Ferretería Molina','23,90 €'],['Dietas equipo','54,00 €']].map((r,i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:10.5, background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:7, padding:'7px 10px'}}>
          <span style={{color:'#334155', fontWeight:600, flex:1}}>{r[0]}</span>
          <span className="f-mono" style={{color:'#0F172A', fontWeight:700}}>{r[1]}</span>
        </div>
      ))}
      <div className="f-mono" style={{fontSize:9, color:'#059669', textAlign:'right'}}>con su IVA desglosado ✓</div>
    </div>),
    // Banco
    (<div style={{display:'flex', flexDirection:'column', gap:6}}>
      {[['Endesa','−288,47 €','#DC2626'],['Talleres Sanz','+1.240,00 €','#059669'],['SEUR','−45,60 €','#DC2626']].map((r,i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:10.5, background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:7, padding:'7px 10px'}}>
          <span style={{color:'#334155', fontWeight:600, flex:1}}>{r[0]}</span>
          <span className="f-mono" style={{color:r[2], fontWeight:700}}>{r[1]}</span>
        </div>
      ))}
      <div className="f-mono" style={{fontSize:9, color:'#059669', textAlign:'right'}}>conciliado solo ✓</div>
    </div>),
  ];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={Math.max(0,t-0.2)} eyebrow="COMPRAS · GASTOS · BANCO" title={<span>Los datos de tu negocio, <span className="grad-text">en TU sistema.</span></span>}/>

      {/* Toast: la llamada del asesor — llega tarde y se tacha */}
      {toastP > 0 && (
        <div style={{position:'absolute', top:44, right:60, zIndex:9, opacity:clamp(toastP*1.3,0,1)*(tachaP>0 ? 1-tachaP*0.35 : 1), transform:`translateY(${(1-toastE)*-14}px)`}}>
          <div style={{position:'relative', display:'flex', alignItems:'center', gap:13, background:'rgba(15,23,42,0.94)', borderRadius:14, padding:'13px 20px', border:'1px solid rgba(255,255,255,0.1)', boxShadow:'0 18px 44px rgba(15,23,42,0.35)', filter: tachaP>0.5?'saturate(0.6)':'none'}}>
            <div style={{position:'relative', width:38, height:38, flexShrink:0}}>
              <div style={{position:'absolute', inset:0, borderRadius:100, background: tachaP>0.5?'#64748B':'#EF4444', display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, transition:'background 350ms'}}>📞</div>
              {tachaP===0 && <div style={{position:'absolute', inset:0, borderRadius:100, border:'2px solid #EF4444', transform:`scale(${1+ring*0.35})`, opacity:1-ring}}/>}
            </div>
            <div>
              <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#fff'}}>Tu asesor · 20 ENE</div>
              <div style={{fontSize:11.5, color:'#94A3B8', fontStyle:'italic'}}>«Te sale a pagar 4.812»</div>
            </div>
            {/* Tachado */}
            {tachaP > 0 && (
              <div style={{position:'absolute', left:10, right:10, top:'50%', height:3, background:'#EF4444', borderRadius:2, transform:'rotate(-4deg)', transformOrigin:'left center', width:`${tachaP*94}%`, boxShadow:'0 0 8px rgba(239,68,68,0.6)'}}/>
            )}
          </div>
          {/* Chip: ya lo sabías */}
          {sabiasP > 0 && (
            <div className="f-mono" style={{position:'absolute', right:8, bottom:-16, background:'#10B981', color:'#fff', fontSize:11, fontWeight:800, letterSpacing:'1px', borderRadius:100, padding:'6px 16px', transform:`scale(${lerp(0.6,1,sabiasE)})`, opacity:clamp(sabiasP*1.3,0,1), boxShadow:'0 10px 26px rgba(16,185,129,0.45)'}}>ya lo sabías ✓</div>
          )}
        </div>
      )}

      <div style={{position:'absolute', left:210, top:180, width:1500, height:760, opacity:winP, transform:`translateY(${(1-winE)*24}px)`}}>
        {/* Aro de posesión */}
        <div style={{position:'absolute', inset:-8, borderRadius:18, border:`3px solid rgba(0,133,255,${aroP*0.75})`, boxShadow:`0 0 ${aroP*46}px rgba(0,133,255,${aroP*0.35}), inset 0 0 ${aroP*30}px rgba(0,133,255,${aroP*0.06})`, pointerEvents:'none', zIndex:8}}/>
        {/* Badge EN TU SISTEMA */}
        {badgeP > 0 && (
          <div className="f-mono" style={{position:'absolute', top:-18, left:'50%', transform:`translateX(-50%) scale(${lerp(0.6,1,badgeE)})`, background:'#0085FF', color:'#fff', fontSize:12, fontWeight:800, letterSpacing:'2.5px', borderRadius:100, padding:'8px 24px', boxShadow:'0 14px 36px rgba(0,133,255,0.4)', opacity:clamp(badgeP*1.3,0,1), zIndex:9}}>EN TU SISTEMA</div>
        )}

        <div style={{position:'absolute', inset:0, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 40px 100px rgba(0,133,255,0.15), 0 10px 26px rgba(15,23,42,0.09)'}}>
          <BrowserChrome url="play.dinaup.com/App/Pymes" title="Dinaup — Tu empresa"/>
          <DinaupAppHeader breadcrumb={["Pymes", convP>0.5 ? "Impuestos" : "Módulos"]}/>

          <div style={{position:'relative', height:'calc(100% - 142px)'}}>

            {/* Los 4 módulos: fila grande → convergen a fila compacta */}
            {MODS.map((m,i)=>{
              const on = modOn(i), pop = modPop(i);
              if (!on && convP===0 && t < m.at) { /* aún no nombrado */ }
              const tx = lerp(x0(i), xc(i), convE);
              const ty = lerp(y0, yD, convE);
              const sc = lerp(1, scD, convE);
              return (
                <div key={m.l} style={{position:'absolute', left:0, top:0, width:CARD_W, transform:`translate(${tx}px, ${ty}px) scale(${on?lerp(0.85,1,pop)*sc:sc*0.85})`, transformOrigin:'top left', opacity: on?1:0.35, transition:'opacity 300ms', zIndex:3}}>
                  <div style={{background:'#fff', border:`1.5px solid ${on?m.c+'77':'#E2E8F0'}`, borderRadius:13, padding:'14px 16px', boxShadow: on?`0 12px 32px ${m.c}1e`:'0 4px 12px rgba(15,23,42,0.04)', transition:'border 300ms'}}>
                    <div style={{display:'flex', alignItems:'center', gap:9, marginBottom:10}}>
                      <span style={{width:10, height:10, borderRadius:100, background: on?m.c:'#CBD5E1', boxShadow: on?`0 0 10px ${m.c}88`:'none', transition:'background 300ms'}}/>
                      <span className="f-plex" style={{fontSize:15, fontWeight:800, color: on?'#0F172A':'#94A3B8'}}>{m.l}</span>
                      {on && <span style={{marginLeft:'auto', color:'#10B981', fontWeight:800, fontSize:13, opacity:clamp(pop*1.2,0,1)}}>✓</span>}
                    </div>
                    <div style={{opacity: on?1:0.4, filter: on?'none':'grayscale(1)'}}>
                      {modBody[i]}
                    </div>
                  </div>
                  {/* Pulso hacia la card IVA (cuando ya convergieron) */}
                  {pulsosOn && convP>0.9 && (()=>{ const p = pulsoP(i); return (
                    <div style={{position:'absolute', left:CARD_W/2, top:0, width:10, height:10, borderRadius:100, background:m.c, opacity:(1-p)*0.8, transform:`translate(-50%, ${-p*150}px) scale(${1/sc})`, boxShadow:`0 0 12px ${m.c}`}}/>
                  ); })()}
                </div>
              );
            })}

            {/* Etiqueta bajo la fila compacta */}
            {convP > 0.85 && (
              <div className="f-mono" style={{position:'absolute', left:0, right:0, bottom:14, textAlign:'center', fontSize:10.5, color:'#94A3B8', letterSpacing:'2px', opacity:clamp((convP-0.85)/0.15,0,1)}}>VENTAS · COMPRAS · GASTOS · BANCO — EL MISMO SITIO</div>
            )}

            {/* Card héroe: el IVA del trimestre */}
            {ivaP > 0 && (
              <div id="e06-card-iva" style={{position:'absolute', left:370, top:52, width:760, background:'#fff', border:'2px solid rgba(0,133,255,0.55)', borderRadius:18, padding:'26px 34px', opacity:clamp(ivaP*1.3,0,1), transform:`translateY(${(1-ivaE)*30}px) scale(${lerp(0.9,1,ivaE)})`, boxShadow:'0 30px 80px rgba(0,133,255,0.18)', zIndex:5}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:4}}>
                  <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#64748B', letterSpacing:'2.5px'}}>IVA DEL TRIMESTRE · 4T</span>
                  <span className="f-mono" style={{fontSize:10.5, color:'#059669', background:'rgba(16,185,129,0.1)', border:'1px solid rgba(16,185,129,0.35)', borderRadius:100, padding:'4px 12px'}}>al día</span>
                </div>
                <div style={{display:'flex', alignItems:'baseline', gap:16}}>
                  <span className="f-mono" style={{fontSize:86, fontWeight:700, color:'#0F172A', lineHeight:1.05, letterSpacing:'-0.02em'}}>{fmtIva} €</span>
                  <span style={{fontSize:13, color:'#64748B'}}>lo ves tú, cuando quieras</span>
                </div>
                <div style={{fontSize:11.5, color:'#94A3B8', marginTop:2}}>a pagar estimado · se actualiza con cada factura que entra</div>
                {/* Sparkline */}
                <svg width="100%" height="46" viewBox="0 0 690 46" style={{marginTop:12}}>
                  <path d="M0 38 C 60 34, 110 26, 170 28 C 230 30, 280 16, 340 18 C 400 20, 460 10, 520 12 C 580 13, 650 6, 690 5" fill="none" stroke="#0085FF" strokeWidth="2.5" strokeDasharray="900" strokeDashoffset={900*(1-clamp((t-T.count)/1.8,0,1))}/>
                  <path d="M0 38 C 60 34, 110 26, 170 28 C 230 30, 280 16, 340 18 C 400 20, 460 10, 520 12 C 580 13, 650 6, 690 5 L 690 46 L 0 46 Z" fill="rgba(0,133,255,0.06)" opacity={clamp((t-T.count-0.9)/0.8,0,1)}/>
                </svg>
                {/* Desglose (click final) */}
                {expandP > 0 && (
                  <div style={{marginTop:12, borderTop:'1px solid #EEF2F7', paddingTop:10, opacity:expandP, transform:`translateY(${(1-expandE)*10}px)`}}>
                    {[['IVA repercutido (ventas)','9.641 €'],['IVA soportado (compras y gastos)','− 4.829 €'],['Resultado 4T','4.812 €']].map((r,i)=>(
                      <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'4px 0', fontSize:12.5, fontWeight: i===2?800:500, color: i===2?'#0085FF':'#475569'}}>
                        <span>{r[0]}</span><span className="f-mono">{r[1]}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>

      {t >= T.cur && <ScriptedCursor frames={cursorFrames} t={t} clickTimes={[T.click]}/>}

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