// === Escena 03 — "Los datos que llegan"  [VALLE] ===
// Pestaña «Previa» del editor con «Factura - Moderna» renderizada. Por dentro es una app de Vue 3
// sobre cuatro colecciones: Resumen · Conceptos · BaseImponible · Totales
// (DOCD\PaginasInformes\Factura - Moderna.vb:397, 402-405). Los números llegan de OTRO documento
// dinámico incluido: F.Include(S.DynamicDocuments.API.FacturaJSON__2.ID …) — :394.
// El recuadro del cuadro solo se pinta si el campo del resumen viene relleno (v-if, :375) y su
// rótulo es «✔erifactu • Dinaup» (:377).
// LICENCIA DECLARADA: el hueco punteado NO existe en el HTML — el v-if se lleva el <div> entero.
// Se dibuja con trazo discontinuo y su rótulo «aquí no hay nada todavía» para hacer visible una
// ausencia; nunca como una caja del documento.
function EscenaPL03({ t }){
  const T = {
    factura:0.6,      // "la factura moderna"
    porDentro:3.5,    // "Por dentro es una página"
    tablas:6.3,       // "cuatro tablas"
    chip12:7.3,       // "el resumen, los conceptos"
    chip34:9.2,       // "las bases y los totales"
    noCalculas:12.3,  // "no los calculas tú"
    incluye:15.3,     // "otro documento dinámico que esta plantilla incluye"
    campos:18.8,      // "Número, fecha, razón social"
    razonSocial:19.7, // "fecha, razón social"
    direccion:21.4,   // "dirección"
    impuestos:22.4,   // "el desglose de impuestos"
    recargo:23.8,     // "el recargo"
    todoPuesto:25.4,  // "Todo puesto."
    campoMas:29.0,    // "un campo más"
    hueco:30.0,       // "con su hueco reservado en la esquina"
    fijate:32.8,      // "Fíjate en él"
    condicion:36.4,   // "si el campo viene relleno"
    vacio:37.9,       // "y ahora mismo está vacío"
    nadie:40.9,       // "porque nadie lo ha rellenado"
    salida:43.6,      // "Mira quién lo rellena"
    chipStep:0.13,     // cascada de los cuatro nombres de colección
    campoStep:0.45,    // desfase dentro de un mismo golpe de voz (número → fecha → razón social)
  };

  // Cada campo se marca cuando la voz lo nombra: los tres primeros van en un solo golpe,
  // los del desglose tienen su propia frase.
  const CUANDO = [T.campos, T.razonSocial, T.razonSocial+T.campoStep, T.direccion,
                  T.impuestos, T.impuestos+T.campoStep, T.recargo];

  // ── Geometría ──
  const WX=110, WY=150, WW=1170, WH=888;
  const BODY = WY + 64;
  const TABS = 52;
  const FX=295, FY=282, FW=800, FH=740;   // la factura renderizada, en lienzo
  const RX=1330, RW=530;                  // capa lateral
  const HL=590, HT=414, HS=150;           // el hueco, en coordenadas de la factura
  const HX=FX+HL, HY=FY+HT;               // …y en lienzo

  const CONCEPTOS = [
    ['Suministro semanal — semana 32',   '1',  '252,00', '252,00'],
    ['Suministro semanal — semana 33',   '1',  '228,00', '228,00'],
    ['Servicio de reparto — zona norte', '1',  '180,00', '180,00'],
    ['Bandejas retornables',             '40', '0,85',   '34,00'],
  ];
  const COLECCIONES = ['Resumen', 'Conceptos', 'BaseImponible', 'Totales'];

  // ── Progresos ──
  const fcP = clamp((t-T.factura)/0.8,0,1), fcE = Easing.easeOutCubic(fcP);
  const vueP = clamp((t-T.porDentro)/0.5,0,1), vueE = Easing.easeOutBack(vueP);
  const incP = clamp((t-T.incluye)/0.6,0,1), incE = Easing.easeOutBack(incP);
  const incGlow = t >= T.incluye && t < T.incluye+1.6 ? Math.sin((t-T.incluye)/1.6*Math.PI) : 0;
  const okP  = clamp((t-T.todoPuesto)/0.5,0,1), okE = Easing.easeOutBack(okP);
  const cmP  = clamp((t-T.campoMas)/0.6,0,1), cmE = Easing.easeOutBack(cmP);
  const huP  = clamp((t-T.hueco)/0.6,0,1), huE = Easing.easeOutBack(huP);
  const foco = clamp((t-T.fijate)/0.8,0,1);
  const cnP  = clamp((t-T.condicion)/0.5,0,1), cnE = Easing.easeOutCubic(cnP);
  const vaP  = clamp((t-T.vacio)/0.5,0,1);
  const pulso = t >= T.nadie && t < T.nadie+1.1 ? Math.sin((t-T.nadie)/1.1*Math.PI) : 0;
  const salP = clamp((t-T.salida)/0.6,0,1), salE = Easing.easeOutCubic(salP);
  const atenua = 1 - foco*0.58;   // el valle: todo baja para que el hueco pese
  const asentado = t >= T.noCalculas;   // "no los calculas tú": los chips dejan de brillar y se quedan quietos

  // Los campos que la voz va nombrando, marcados en verde uno a uno
  const marcado = (i) => clamp((t - CUANDO[i])/0.45, 0, 1);
  const Val = ({ i, children, size=19, bold, right })=>{
    const m = marcado(i);
    return (
      <span className={bold ? 'f-mono' : 'f-plex'} style={{fontSize:size, fontWeight:bold?700:400,
                    color: m > 0.3 ? '#047857' : '#334155', textAlign:right?'right':'left',
                    background: m > 0.3 ? `rgba(16,185,129,${0.14*m})` : 'transparent',
                    borderRadius:5, padding:'1px 5px', transition:'none'}}>{children}</span>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LO QUE YA VIENE HECHO" title={<span>La factura, por dentro</span>}/>

      {/* ─────────── El editor en «Previa» ─────────── */}
      {fcP > 0 && (
        <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH,
                     opacity:clamp(fcP*1.4,0,1), transform:`translateY(${(1-fcE)*20}px)`}}>
          <div style={{position:'absolute', inset:0, background:'#26282C', borderRadius:14,
                       border:'1px solid #45484F', boxShadow:'0 42px 96px rgba(2,6,23,0.50)', overflow:'hidden'}}>
            {/* barra de título */}
            <div style={{position:'absolute', left:0, right:0, top:0, height:64, background:'linear-gradient(180deg,#2C2E33,#25272B)',
                         borderBottom:'1px solid #3C3F45', display:'flex', alignItems:'center', gap:15, padding:'0 18px'}}>
              <div style={{width:36, height:36, borderRadius:9, background:'linear-gradient(135deg,#0085FF,#0063BE)',
                           display:'flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.9">
                  <path d="M6 3 H14 L19 8 V21 H6 Z" strokeLinejoin="round"/><path d="M14 3 V8 H19"/>
                </svg>
              </div>
              <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#F2F5F9'}}>Agregar documento dinámico</span>
              <div style={{flex:1}}/>
              <div style={{display:'flex', gap:24, opacity:0.65}}>
                <svg width="15" height="15" viewBox="0 0 16 16"><path d="M2 8 H14" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
                <svg width="15" height="15" viewBox="0 0 16 16"><rect x="2.5" y="2.5" width="11" height="11" fill="none" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
                <svg width="15" height="15" viewBox="0 0 16 16"><path d="M3 3 L13 13 M13 3 L3 13" stroke="#A9B0BA" strokeWidth="1.6"/></svg>
              </div>
            </div>
            {/* pestañas: ahora manda «Previa» */}
            <div style={{position:'absolute', left:0, right:0, top:64, height:TABS, background:'#2A2C30',
                         borderBottom:'1px solid #3C3F45', display:'flex', alignItems:'flex-end', gap:2, padding:'0 18px'}}>
              {['Básico','Variables','Código','Previa'].map((s,i)=>(
                <span key={s} className="f-plex" style={{padding:'11px 28px', fontSize:21, fontWeight:i===3?700:500,
                              color:i===3?'#F2F5F9':'#8C939E', background:i===3?'#26282C':'transparent',
                              borderTop:`3px solid ${i===3?'#0085FF':'transparent'}`, borderRadius:'6px 6px 0 0'}}>{s}</span>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ─────────── La factura renderizada ─────────── */}
      {fcP > 0 && (
        <div style={{position:'absolute', left:FX, top:FY, width:FW, height:FH, background:'#fff',
                     borderRadius:6, boxShadow:'0 24px 60px rgba(0,0,0,0.42)',
                     opacity:clamp(fcP*1.4,0,1), transform:`translateY(${(1-fcE)*14}px)`}}>
          <div style={{position:'absolute', inset:0, opacity:atenua}}>
            {/* Cabecera del documento */}
            <div style={{position:'absolute', left:34, right:34, top:30, display:'flex', alignItems:'flex-start', justifyContent:'space-between'}}>
              <div>
                <div className="f-plex" style={{fontSize:34, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>FACTURA</div>
                <div className="f-plex" style={{fontSize:18, color:'#64748B', marginTop:4}}>Panadería El Molino, S.L. · B12345678</div>
              </div>
              <div style={{textAlign:'right', lineHeight:1.5}}>
                <div><span className="f-plex" style={{fontSize:16, color:'#94A3B8'}}>Número </span><Val i={0} bold size={20}>V-2026-0184</Val></div>
                <div><span className="f-plex" style={{fontSize:16, color:'#94A3B8'}}>Fecha </span><Val i={1} bold size={20}>12/08/2026</Val></div>
              </div>
            </div>
            {/* Cliente */}
            <div style={{position:'absolute', left:34, right:34, top:126, paddingTop:14, borderTop:'1px solid #E2E8F0'}}>
              <span className="f-plex" style={{fontSize:15, letterSpacing:'2px', color:'#94A3B8', fontWeight:700, marginRight:12}}>CLIENTE</span>
              <Val i={2} size={20} bold>Talleres Quijada, S.L.</Val>
              <Val i={3} size={18}> · Avda. de la Estación, 44 · 30011 Murcia</Val>
            </div>
            {/* Conceptos */}
            <div style={{position:'absolute', left:34, right:34, top:194}}>
              <div style={{display:'grid', gridTemplateColumns:'1fr 66px 104px 116px', gap:10, padding:'8px 6px',
                           borderBottom:'2px solid #0F172A'}}>
                {['Concepto','Uds.','Precio','Importe'].map((h,i)=>(
                  <span key={h} className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'1.4px', color:'#0F172A',
                                textAlign:i===0?'left':'right'}}>{h.toUpperCase()}</span>
                ))}
              </div>
              {CONCEPTOS.map(c=>(
                <div key={c[0]} style={{display:'grid', gridTemplateColumns:'1fr 66px 104px 116px', gap:10, padding:'8px 6px',
                                        borderBottom:'1px solid #F1F5F9', alignItems:'center'}}>
                  <span className="f-plex" style={{fontSize:18, color:'#334155'}}>{c[0]}</span>
                  <span className="f-mono" style={{fontSize:17, color:'#64748B', textAlign:'right'}}>{c[1]}</span>
                  <span className="f-mono" style={{fontSize:17, color:'#64748B', textAlign:'right'}}>{c[2]}</span>
                  <span className="f-mono" style={{fontSize:18, fontWeight:700, color:'#0F172A', textAlign:'right'}}>{c[3]}</span>
                </div>
              ))}
            </div>
            {/* Desglose y total, en la columna izquierda */}
            <div style={{position:'absolute', left:34, top:404, width:396}}>
              <div className="f-plex" style={{fontSize:15, letterSpacing:'2px', color:'#94A3B8', fontWeight:700, marginBottom:6}}>DESGLOSE</div>
              {[['Base imponible','694,00',4], ['IVA 21 %','145,74',5], ['Recargo 5,2 %','36,09',6]].map(r=>(
                <div key={r[0]} style={{display:'flex', justifyContent:'space-between', alignItems:'center',
                                        height:32, borderBottom:'1px solid #F4F7FA'}}>
                  <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>{r[0]}</span>
                  <Val i={r[2]} bold size={19} right>{r[1]} €</Val>
                </div>
              ))}
            </div>
            <div style={{position:'absolute', left:34, top:548, width:396, background:'#F8FAFC', borderRadius:8,
                         padding:'12px 18px', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
              <span className="f-plex" style={{fontSize:15, letterSpacing:'2px', color:'#94A3B8', fontWeight:700}}>TOTAL</span>
              <span className="f-mono" style={{fontSize:34, fontWeight:800, color:'#0F172A'}}>875,83 €</span>
            </div>
          </div>

          {/* La condición literal, junto al hueco */}
          {cnP > 0 && (
            <div style={{position:'absolute', left:34, top:640, opacity:cnP, transform:`translateY(${(1-cnE)*10}px)`}}>
              <span className="f-mono" style={{display:'inline-block', padding:'10px 16px', borderRadius:8,
                            background:'rgba(251,140,0,0.10)', border:'1px solid rgba(251,140,0,0.4)',
                            fontSize:19, color:'#B45309', fontWeight:700}}>v-if="resumen.VerifactuQR"</span>
            </div>
          )}

          {/* EL HUECO: recurso de la pieza para hacer visible una ausencia */}
          {huP > 0 && (
            <div style={{position:'absolute', left:HL, top:HT, width:HS, height:HS,
                         border:'3px dashed #FB8C00', borderRadius:10, background:`rgba(251,140,0,${0.05+pulso*0.10})`,
                         opacity:clamp(huP*1.3,0,1),
                         transform:`scale(${lerp(0.85,1,huE)*(1+foco*0.06)})`,
                         boxShadow:foco > 0 ? `0 0 ${foco*40+pulso*30}px rgba(251,140,0,0.45)` : 'none'}}/>
          )}
          {vaP > 0 && (
            <div className="f-plex" style={{position:'absolute', left:HL-45, top:HT+HS+14, width:HS+90, textAlign:'center',
                                            fontSize:19, fontWeight:700, color:'#B45309', opacity:vaP}}>
              aquí no hay nada todavía
            </div>
          )}
        </div>
      )}

      {/* ─────────── Capa lateral: lo que hay por dentro ─────────── */}
      {vueP > 0 && (
        <div style={{position:'absolute', left:RX, top:226, width:RW, opacity:clamp(vueP*1.3,0,1)*atenua,
                     transform:`translateY(${(1-vueE)*12}px)`}}>
          <div className="f-plex" style={{fontSize:16, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8'}}>POR DENTRO</div>
          <div className="f-mono" style={{fontSize:21, color:'#0F172A', marginTop:10}}>Vue.createApp({'{ … }'})</div>
        </div>
      )}

      {clamp((t-T.tablas)/0.4,0,1) > 0 && (
        <div style={{position:'absolute', left:RX, top:318, width:RW, opacity:atenua}}>
          {COLECCIONES.map((c,i)=>{
            const p = clamp((t-T.tablas-i*T.chipStep)/0.45,0,1), e = Easing.easeOutBack(p);
            const on = t >= (i < 2 ? T.chip12 : T.chip34);
            return (
              <div key={c} style={{display:'flex', alignItems:'center', gap:16, height:66, marginBottom:8,
                                   padding:'0 20px', borderRadius:12, background:'#fff',
                                   border:`2px solid ${on ? '#10B981' : '#E2E8F0'}`,
                                   boxShadow:on && !asentado ? '0 10px 26px rgba(16,185,129,0.20)' : '0 4px 12px rgba(15,23,42,0.05)',
                                   opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*20}px)`}}>
                <span style={{width:12, height:12, borderRadius:99, background:on ? '#10B981' : '#CBD5E1'}}/>
                <span className="f-mono" style={{fontSize:24, fontWeight:700, color:on ? '#0F172A' : '#94A3B8'}}>{c}</span>
              </div>
            );
          })}
        </div>
      )}

      {/* De dónde llegan los números: el documento incluido */}
      {incP > 0 && (
        <div style={{position:'absolute', left:RX, top:628, width:RW, opacity:clamp(incP*1.3,0,1)*atenua,
                     transform:`scale(${lerp(0.94,1,incE)})`, transformOrigin:'left top'}}>
          <div style={{background:'#0F172A', borderRadius:12, padding:'18px 20px',
                       boxShadow:incGlow > 0 ? `0 0 ${incGlow*40}px rgba(0,133,255,0.55)` : '0 14px 34px rgba(15,23,42,0.22)'}}>
            <div className="f-mono" style={{fontSize:15, letterSpacing:'2px', color:'#64748B', fontWeight:700}}>LOS NÚMEROS LLEGAN DE AQUÍ</div>
            <div className="f-mono" style={{fontSize:19, color:'#E2E8F0', marginTop:10, lineHeight:1.5}}>
              F.Include(<span style={{color:'#56E16A'}}>S.DynamicDocuments</span><br/>
              <span style={{paddingLeft:22, display:'inline-block'}}/>.API.<span style={{color:'#38BDF8', fontWeight:700}}>FacturaJSON__2</span>.ID …)
            </div>
          </div>
        </div>
      )}

      {/* «Todo puesto»: el sello de lo que ya viene hecho */}
      {okP > 0 && (
        <div style={{position:'absolute', left:RX, top:788, opacity:clamp(okP*1.3,0,1)*(1-foco*0.7),
                     transform:`scale(${lerp(0.8,1,okE)})`, transformOrigin:'left center'}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, padding:'12px 22px', borderRadius:99,
                        background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.35)', color:'#047857',
                        fontSize:24, fontWeight:700}}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.8">
              <path d="M5 12.5 L10 17 L19 7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Todo puesto
          </span>
        </div>
      )}

      {/* Un campo más, en el resumen: el que espera */}
      {cmP > 0 && (
        <>
          <svg style={{position:'absolute', inset:0, pointerEvents:'none'}} width="1920" height="1080">
            <path d={`M ${RX-10} 886 C ${RX-130} 886, ${HX+HS+110} 760, ${HX+HS+10} 724`}
                  pathLength="100" fill="none" stroke="#FB8C00" strokeWidth="3" strokeLinecap="round"
                  strokeDasharray="100" strokeDashoffset={100*(1-Easing.easeInOutCubic(clamp((t-T.hueco)/0.8,0,1)))}/>
          </svg>
          <div style={{position:'absolute', left:RX, top:854, width:RW, opacity:clamp(cmP*1.3,0,1),
                       transform:`scale(${lerp(0.9,1,cmE)})`, transformOrigin:'left top'}}>
            <div style={{background:'#fff', borderRadius:12, border:'2px solid #FB8C00', padding:'18px 22px',
                         boxShadow:'0 18px 42px rgba(251,140,0,0.20)'}}>
              <div className="f-plex" style={{fontSize:16, fontWeight:700, letterSpacing:'2.2px', color:'#B45309'}}>UN CAMPO MÁS, EN EL RESUMEN</div>
              <div className="f-mono" style={{fontSize:26, fontWeight:700, color:'#0F172A', marginTop:8}}>resumen.VerifactuQR</div>
            </div>
          </div>
        </>
      )}

      {/* Puente hacia el clímax */}
      {salP > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:1008, textAlign:'center', fontSize:32, fontWeight:700,
                                        color:'#0F172A', opacity:salE, transform:`translateY(${(1-salE)*12}px)`}}>
          Mira quién lo rellena.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPL03 });