// === Escena 06 — El pedido, la recapitulación y el eco ===
// /App/Pymes/Orders: ReportTabsU «Pedidos» + «Conceptos» (list_alt) + notas; ToolBarPedidosU con los mismos
// botones verdes por tipo de venta. «Flujo Pedido» (DataFlowPedidoDialog): «Total pedido», «Facturado»,
// «Pendiente»; «Ventas» con «Agregar venta»; «Devolución» con «Sin devoluciones» e «Iniciar devolución».

const FILAS_PED = [
  ['PED-0415', 'Reformas Albar, S.L.', 'Pendiente', '#b45309', '09/10/2026', '1.210,00 €'],
  ['PED-0414', 'Hostal Ribera', 'Enviado', '#3a8707', '07/10/2026', '540,00 €'],
  ['PED-0413', 'Cafetería Lis', 'Pendiente', '#b45309', '03/10/2026', '1.980,00 €'],
  ['PED-0412', 'Bodegas Ordás', 'Enviado', '#3a8707', '30/09/2026', '725,00 €'],
];

function EscenaPV06({ t }){
  useVoz(5);
  const G = GUION[5];
  const T = {
    debajo:B(G,'justo debajo'),
    crea:B(G,'Se crea igual'),
    verdes:B(G,'botones verdes'),
    diferencia:B(G,'La diferencia'),
    almacen:B(G,'en el almacén'),
    entrega:B(G,'la entrega'),
    flujo:B(G,'Su flujo enseña'),
    total:B(G,'el total,'),
    facturado:B(G,'lo facturado'),
    pendiente:B(G,'lo pendiente'),
    mismo:B(G,'el mismo botón'),
    resumen:B(G,'En resumen'),
    r1:B(G,'El presupuesto se crea'),
    r2:B(G,'Se factura desde'),
    r3:B(G,'la venta guarda el enlace'),
    nace:B(G,'la venta nace del'),
    teclea:B(G,'no se teclea'),
  };
  const pulso = (t0, d = 1.2) => (t >= t0 && t < t0 + d) ? Math.sin((t - t0) / d * Math.PI) : 0;
  const OX = 90, OY = 284;
  const sale = pr(t, T.resumen, 0.9);
  const enPed = t >= T.debajo + 0.4;
  const eDlg = pr(t, T.flujo, 0.7);
  const chipA = pr(t, T.almacen, 0.6), chipE = pr(t, T.entrega, 0.6);
  const bloque = (lab, val, e, hero) => (
    <div style={{ flex:1, padding:'14px 18px', background: hero ? '#ebebeb' : 'transparent', opacity:0.25 + 0.75 * e, display:'flex', flexDirection:'column', gap:2 }}>
      <R s={14} c={P.gris} style={{ textTransform:'uppercase', letterSpacing:'0.07em' }}>{lab}</R>
      <R s={hero ? 34 : 28} w={hero ? 700 : 600} c={lab === 'Facturado' ? P.verde : P.tinta}>{val}</R>
    </div>
  );
  const recap = [
    { ico:'request_quote', txt:'Se crea en Preventa', t:T.r1 },
    { ico:'account_tree', txt:'Se factura desde Flujo → Agregar venta', t:T.r2 },
    { ico:'link', txt:'La venta guarda el enlace a su origen', t:T.r3 },
  ];
  const eNace = pr(t, T.nace, 0.8), eTeclea = pr(t, T.teclea, 0.8);
  const subeRecap = pr(t, T.nace, 1.0);
  return (
    <SlideCanvas variant="light-soft" bg="#F8FAFC">
      <div style={{ opacity:1 - sale }}>
        <DemoHeader t={t} eyebrow="5 · SI HAY QUE PREPARAR" title="Pymes → Preventa → Pedidos"/>
        <Ventana url={enPed ? 'play.dinaup.com/App/Pymes/Orders' : 'play.dinaup.com/App/Pymes/Budget'} op={pr(t, 0.1, 0.8)} atenuar={eDlg * 0.5}>
          <Menu activo={enPed ? 'Pedidos' : 'Presupuestos'} focoSeccion={pulso(T.debajo, 1.6)}/>
          <div style={{ position:'absolute', left:324, top:16, width:1392 }}>
            <Pestanas tabs={enPed ? [{ txt:'Pedidos', ico:'view_list' }, { txt:'Conceptos', ico:'list_alt' }, { ico:'note_stack' }, { ico:'lock' }] : [{ txt:'Presupuestos', ico:'view_list' }, { ico:'note_stack' }, { ico:'lock' }]}/>
          </div>
          <div style={{ position:'absolute', left:324, top:86, display:'flex', alignItems:'center', gap:14, height:52 }}>
            <R s={24} w={700}>{enPed ? 'Pedidos' : 'Presupuestos'}</R>
            <div style={{ width:16 }}/>
            <Boton txt="Venta" ico="add" tam={17} foco={pulso(T.verdes)}/>
            <Boton txt="Instalación" ico="add" tam={17} foco={pulso(T.verdes)}/>
          </div>
          <Lista x={324} y={156} w={1392} cab={['Nº', 'Cliente', 'Estado', 'Fecha', 'Importe']} anchos={[230, 470, 230, 230, 200]}
            filas={(enPed ? FILAS_PED : FILAS_PRES).map(f => celdasPres(f))}/>
          {/* Lo que añade un pedido, como rótulo sobre la pantalla */}
          <div style={{ position:'absolute', left:324, top:500, display:'flex', gap:18 }}>
            {[['warehouse', 'Preparación en el almacén', chipA], ['local_shipping', 'Entrega', chipE]].map(([ic, tx, e], i) => (
              <div key={i} style={{ opacity:e, transform:`translateY(${(1 - e) * 12}px)`, display:'flex', alignItems:'center', gap:10, background:'#fff',
                border:`1px solid ${P.azulL}`, borderRadius:12, padding:'14px 22px', boxShadow:'0 10px 26px rgba(15,23,42,0.08)' }}>
                <Ico n={ic} s={30} c={P.azul}/><R s={22} w={500}>{tx}</R>
              </div>
            ))}
          </div>
        </Ventana>
        <Dialogo x={420} y={230} w={1080} h={560} e={eDlg} titulo="Flujo Pedido" cabecera={['PED-0415', 'Reformas Albar, S.L.']}>
          <div style={{ background:'#f5f5f5', border:`1px solid ${P.borde}`, borderRadius:12, overflow:'hidden', display:'flex', flexShrink:0 }}>
            {bloque('Total pedido', '1.210,00 €', pr(t, T.total, 0.5))}
            {bloque('Facturado', '0,00 €', pr(t, T.facturado, 0.5))}
            {bloque('Pendiente', '1.210,00 €', pr(t, T.pendiente, 0.5), true)}
          </div>
          <Tarjeta titulo="Ventas" ico="show_chart" style={{ flexShrink:0 }} foco={pulso(T.mismo, 1.6)}>
            <div style={{ display:'flex', justifyContent:'center', marginTop:14 }}><Boton txt="Agregar venta" ico="add" tipo="texto" tam={19} foco={pulso(T.mismo + 0.6, 1.4)}/></div>
          </Tarjeta>
          <Tarjeta titulo="Devolución" ico="undo" style={{ flexShrink:0, opacity:0.55 }} derecha={<Insignia txt="Sin devoluciones"/>}>
            <div style={{ display:'flex', justifyContent:'center', marginTop:14 }}><Boton txt="Iniciar devolución" ico="play_arrow" tipo="texto" tam={17}/></div>
          </Tarjeta>
        </Dialogo>
      </div>

      {/* Recapitulación: tres ideas, al ritmo de la voz */}
      {sale > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:110 - subeRecap * 20, textAlign:'center', opacity:sale }}>
          <div className="f-plex" style={{ fontSize:18, fontWeight:600, letterSpacing:'3px', color:P.azul }}>EN RESUMEN</div>
        </div>
      )}
      <div style={{ position:'absolute', left:560, top:200 - subeRecap * 30, width:800, display:'flex', flexDirection:'column', gap:22 }}>
        {recap.map((r, i) => {
          const e = pr(t, r.t, 0.7);
          return (
            <div key={i} style={{ opacity:e * (1 - subeRecap * 0.35), transform:`translateY(${(1 - e) * 14}px)`, display:'flex', alignItems:'center', gap:22,
              background:'#fff', border:`1px solid ${P.borde}`, borderRadius:16, padding:'20px 28px', boxShadow:'0 10px 26px rgba(15,23,42,0.06)' }}>
              <div style={{ width:60, height:60, borderRadius:14, background:'rgba(29,115,226,0.10)', display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n={r.ico} s={34} c={P.azul}/></div>
              <span className="f-plex" style={{ fontSize:32, fontWeight:600, color:'#0F172A' }}>{r.txt}</span>
            </div>
          );
        })}
      </div>

      {/* Eco: la Única Cosa */}
      <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:690, textAlign:'center', fontSize:62, fontWeight:700, letterSpacing:'-0.03em', color:'#0F172A',
        opacity:eNace, transform:`translateY(${(1 - eNace) * 14}px)` }}>La venta nace del presupuesto.</div>
      <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:790, textAlign:'center', fontSize:42, fontWeight:600, color:P.azul,
        opacity:eTeclea, transform:`translateY(${(1 - eTeclea) * 14}px)` }}>No se teclea dos veces.</div>
      <div style={{ position:'absolute', left:0, right:0, top:930, display:'flex', justifyContent:'center', opacity:eTeclea }}><DinaupLogo size={36}/></div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPV06 });