// === Escena 06 — Después del alta + recapitulación + eco ===
// La fila abre la ficha (UpDialogServices.cs:68-69 → EntidadDialog con id). «Firmas»: una línea por tipo de
// firma (DinaupSignView.razor). «Estadísticas» → «Análisis de actividad» (Este año) → «Ventas»: «Total
// facturado», «Facturas emitidas», «Ticket medio», «Factura Mayor» (EntidadDialog.razor:251-347).
function CuerpoFirmas({ a }){
  const fila = (icon, color, nombre, linea, estado, boton) => (
    <div style={{ display:'flex', alignItems:'center', gap:18, padding:'16px 20px', borderRadius:8, background:C.base100, marginTop:10 }}>
      <MI n={icon} s={28} c={color}/>
      <div style={{ flex:1, fontFamily:FR }}>
        <div style={{ fontSize:20, fontWeight:600, color:C.tinta }}>{nombre}</div>
        <div style={{ fontSize:17, color:C.texto, marginTop:2 }}>{linea}</div>
      </div>
      <span style={{ fontFamily:FR, fontSize:16, fontWeight:500, padding:'4px 12px', borderRadius:12, background:C.base200, color:C.tinta }}>{estado}</span>
      <Boton texto={boton.t} icon={boton.i} tipo={boton.tipo} fs={17} style={{ padding:'7px 14px' }}/>
    </div>
  );
  return (
    <div style={{ position:'absolute', inset:0, padding:'22px 26px', opacity:a }}>
      <Tarjeta titulo="Firmas" icon="draw">
        {fila('verified', C.exito, 'Protección de datos', 'Firmado el 14/09/2026', 'Firmado', { t:'Volver a firmar', i:'replay', tipo:'texto' })}
        {fila('draw', C.primario, 'Contrato de servicio', 'Todavía no se ha enviado a firmar.', 'Sin firmar', { t:'Enviar a firmar', i:'send', tipo:'primario' })}
      </Tarjeta>
    </div>
  );
}

function Kpi({ etiqueta, valor, color, a, marca }){
  return (
    <div style={{ width:300, padding:'18px 22px', borderRadius:10, background:'#fff', boxShadow:'0 1px 3px rgba(15,23,42,0.10)',
                  opacity:a, transform:`translateY(${(1 - a) * 10}px)`,
                  outline: marca > 0 ? `${3 * marca}px solid rgba(29,115,226,${0.9 * marca})` : 'none', outlineOffset:3 }}>
      <div style={{ fontFamily:FR, fontSize:17, color:C.texto }}>{etiqueta}</div>
      <div style={{ fontFamily:FR, fontSize:30, fontWeight:600, color:color || C.tinta, marginTop:6 }}>{valor}</div>
    </div>
  );
}

function CuerpoEstadisticas({ a, ventas, k, mk }){
  const sub = ['General', 'Ventas', 'Compras', 'Bancos', 'Análisis'];
  const ic = ['dashboard', 'payments', 'shopping_cart', 'account_balance', 'travel_explore'];
  return (
    <div style={{ position:'absolute', inset:0, padding:'22px 26px', opacity:a }}>
      <Tarjeta>
        <div style={{ display:'flex', alignItems:'center', gap:12 }}>
          <MI n="query_stats" s={24} c={C.secundario}/>
          <span style={{ fontFamily:FR, fontSize:21, fontWeight:500, color:C.tinta, flex:1 }}>Análisis de actividad</span>
          <div style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 14px', borderRadius:8, background:C.campo }}>
            <MI n="date_range" s={20} c={C.texto}/><span style={{ fontFamily:FR, fontSize:18, color:C.tinta }}>Este año</span>
          </div>
        </div>
        <div style={{ margin:'14px -24px 0' }}>
          <Pestanas items={sub.map((s, i) => ({ icon:ic[i], text:s }))} activa={ventas ? 1 : 0}/>
        </div>
        <div style={{ display:'flex', gap:18, marginTop:22, minHeight:120 }}>
          {ventas && <Kpi etiqueta="Total facturado" valor="4.820,00 €" color={C.exito} a={k[0]} marca={mk[0]}/>}
          {ventas && <Kpi etiqueta="Facturas emitidas" valor="12" a={k[1]} marca={mk[1]}/>}
          {ventas && <Kpi etiqueta="Ticket medio" valor="401,67 €" a={k[2]} marca={mk[2]}/>}
          {ventas && <Kpi etiqueta="Factura Mayor" valor="980,00 €" a={k[3]} marca={0}/>}
        </div>
      </Tarjeta>
    </div>
  );
}

function EscenaAC06({ t }){
  useVoz(5);
  const G = GUION[5];
  const T = {
    fila:     B(G, 'pulsas su fila'),               // → clic en la fila
    pestanas: B(G, 'Y ahí están'),                  // → Firmas y Estadísticas, una vez
    firmas:   B(G, 'En Firmas'),                    // → pestaña Firmas
    mandas:   B(G, 'le mandas los que falten'),     // → «Enviar a firmar»
    estad:    B(G, 'En Estadísticas'),              // → pestaña Estadísticas
    ventas:   B(G, 'en Ventas'),                    // → subpestaña Ventas
    total:    B(G, 'el total facturado'),
    emitidas: B(G, 'las facturas emitidas'),
    ticket:   B(G, 'el ticket medio'),
    resumen:  B(G, 'En resumen'),                   // → recapitulación
    r1:       B(G, 'El más del menú'),
    r2:       B(G, 'Personal o empresa'),
    r3:       B(G, 'Datos fiscales y configuración'),
    r4:       B(G, 'y guardas.'),
    eco1:     B(G, 'Primero, quién es'),            // → eco
    eco2:     B(G, 'Después, cómo trabajas'),
  };
  const dlg = pe(t, T.fila + 0.5, 0.6) * (1 - pe(t, T.resumen - 0.2, 0.6));
  const activa = t >= T.estad + 0.3 ? 2 : (t >= T.firmas + 0.3 ? 1 : 0);
  const cFir = activa === 1 ? pe(t, T.firmas + 0.3, 0.5) : 0;
  const cEst = activa === 2 ? pe(t, T.estad + 0.3, 0.5) : 0;
  const ventas = t >= T.ventas + 0.3;
  const k = [pe(t, T.total, 0.5), pe(t, T.emitidas, 0.5), pe(t, T.ticket, 0.5), pe(t, T.ticket + 0.6, 0.5)];
  const mk = [pulso(t, T.total, 1.2), pulso(t, T.emitidas, 1.2), pulso(t, T.ticket, 1.2)];
  const marcaTabs = pulso(t, T.pestanas, 1.4);
  const cuerpo = activa === 1 ? <CuerpoFirmas a={cFir}/> : activa === 2 ? <CuerpoEstadisticas a={cEst} ventas={ventas} k={k} mk={mk}/> : null;
  const app = 1 - pe(t, T.resumen - 0.2, 0.6);
  const rec = pe(t, T.resumen, 0.6);
  const pasos = [
    [T.r1, 'add_box', 'El «+» del menú o el botón verde'],
    [T.r2, 'person', 'Personal o Empresa, y «Siguiente»'],
    [T.r3, 'manufacturing', 'Datos fiscales y configuración'],
    [T.r4, 'check', '«Guardar»'],
  ];
  const e1 = pe(t, T.eco1, 0.7), e2 = pe(t, T.eco2, 0.7);
  const recAtenua = pe(t, T.eco1 - 0.3, 0.6);
  const cursor = { frames:[
    { t:0, x:1300, y:800 },
    { t:T.fila - 0.2, x:640, y:487 },
    { t:T.firmas - 0.2, x:640, y:487 },
    { t:T.firmas + 0.2, x:392, y:134 },
    { t:T.estad - 0.1, x:392, y:134 },
    { t:T.estad + 0.2, x:562, y:134 },
    { t:T.ventas - 0.1, x:562, y:134 },
    { t:T.ventas + 0.2, x:422, y:284 },
  ], clicks:[T.fila + 0.1, T.firmas + 0.25, T.estad + 0.25, T.ventas + 0.25] };
  return (
    <SlideCanvas variant="light" bg={C.fondo} grid={false}>
      {app > 0 && <AppPymes op={app}><Lista filaMarcada={4} marcaFila={pulso(t, T.fila, 1.2)}/></AppPymes>}
      {dlg > 0 && <div style={{ position:'absolute', inset:0, background:`rgba(15,23,42,${0.3 * dlg})` }}/>}
      {dlg > 0 && <FichaPaso2 op={dlg} esc={lerp(0.97, 1, dlg)} p={{ cfgCli:1, fiscal:'Talleres Marbán, S.L.', cuenta:'43000013 - Talleres Marbán, S.L.', activa, cuerpo }} m={{}}/>}
      {dlg > 0 && marcaTabs > 0 && (
        <div style={{ position:'absolute', left:330, top:106, width:420, height:54, borderRadius:8, opacity:dlg,
                      boxShadow:`inset 0 0 0 ${3 * marcaTabs}px ${C.primario}` }}/>
      )}
      {rec > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:150, display:'flex', flexDirection:'column', alignItems:'center', opacity:rec }}>
          <div className="f-mono" style={{ fontSize:20, fontWeight:600, letterSpacing:'3px', color:C.primario, opacity:1 - 0.6 * recAtenua }}>EN RESUMEN</div>
          <div style={{ marginTop:30, display:'flex', flexDirection:'column', gap:16, opacity:1 - 0.6 * recAtenua }}>
            {pasos.map(([t0, ic, tx], i) => {
              const a = pe(t, t0, 0.6);
              return (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:22, width:900, padding:'18px 28px', borderRadius:12, background:'#fff',
                                      boxShadow:'0 1px 3px rgba(15,23,42,0.10)', opacity:a, transform:`translateY(${(1 - a) * 12}px)` }}>
                  <div className="f-plex" style={{ width:44, height:44, borderRadius:22, background:C.base100, display:'flex', alignItems:'center',
                                                   justifyContent:'center', fontSize:22, fontWeight:700, color:C.primario }}>{i + 1}</div>
                  <MI n={ic} s={30} c={C.secundario}/>
                  <span style={{ fontFamily:FR, fontSize:28, color:C.tinta }}>{tx}</span>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop:46, textAlign:'center' }}>
            <div className="f-plex" style={{ fontSize:52, fontWeight:700, letterSpacing:'-0.03em', color:C.gris, opacity:e1, transform:`translateY(${(1 - e1) * 12}px)` }}>
              Primero, quién es.
            </div>
            <div className="f-plex" style={{ fontSize:52, fontWeight:700, letterSpacing:'-0.03em', color:C.tinta, marginTop:10, opacity:e2, transform:`translateY(${(1 - e2) * 12}px)` }}>
              Después, cómo trabajas con él.
            </div>
          </div>
        </div>
      )}
      {t < T.resumen - 0.3 && <ScriptedCursor frames={cursor.frames} t={t} clickTimes={cursor.clicks}/>}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaAC06 });