// === Escena 02 — Montar el escandallo: cabe todo, también lo que no compras ===
// Las líneas del almacén entran en cascada; luego las DOS que escribe el usuario (Cocina, Gas)
// entran en naranja, con amplitud: son las protagonistas. Remate: casi 20 de los 47 € no están
// en el almacén. Beats anclados a la frase del guion (audio/guion.json #2).
function EscenaES02({ t }){
  const T = {
    doc:0.2,        // "Esto es un escandallo" → el documento entra
    cabecera:2.6,   // "Arriba, el plato: paella para ocho" → cabecera del documento
    arroz:8.4,      // "Arroz, dos kilos" → línea 1
    gambas:10.3,     // "Gambas, un kilo" → línea 2
    azafran:11.8,   // "Azafrán, medio gramo" → línea 3
    almacen:14.3,   // "productos de tu almacén" → chip almacén + el resto de compras en cascada
    pero:17.2,      // "no es solo lo que compras" → hueco a la espera, las de arriba se atenúan
    cocina:18.8,    // "Está la hora y media de cocina" → línea escrita (naranja)
    gas:21.1,       // "Y está el gas" → línea escrita (naranja)
    remate:24.0,    // "una línea no tiene por qué ser un producto" → frase-remate
    total:28.2,     // "Coste total: cuarenta y siete con veinte" → contador
    fijate:31.0,    // "Y fíjate bien en esto" → calma antes del dato
    split:32.5,     // "Casi veinte de esos euros no están en tu almacén" → barra del reparto
    puente:38.8,    // "¿qué precio le pones al arroz?" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const LINEAS = [
    { n:'Arroz bomba',       q:'2 kg',    pu:'3,10',  tot:'6,20',  s:T.arroz },
    { n:'Gambas',            q:'1 kg',    pu:'12,00', tot:'12,00', s:T.gambas },
    { n:'Azafrán',           q:'0,5 g',   pu:'9,00',  tot:'4,50',  s:T.azafran },
    { n:'Tomate y pimiento', q:'1,25 kg', pu:'1,20',  tot:'1,50',  s:T.almacen+0.15 },
    { n:'Caldo y aceite',    q:'1',       pu:'3,40',  tot:'3,40',  s:T.almacen+0.30 },
    { n:'Cocina',            q:'1,5 h',   pu:'12,00', tot:'18,00', s:T.cocina, tuyo:true },
    { n:'Gas',               q:'1',       pu:'1,60',  tot:'1,60',  s:T.gas,    tuyo:true },
  ];

  const docE = Easing.easeOutCubic(pr(T.doc, 0.8));
  const cabE = Easing.easeOutCubic(pr(T.cabecera, 0.6));
  const cent = useCountUp(0, 4720, T.total, 1.1, t);
  const totalP = pr(T.total, 1.1);
  const splitP = pr(T.split, 0.9), splitE = Easing.easeOutCubic(splitP);
  const remateP = pr(T.remate, 0.7);

  const ROW = 62, TOP = 300;

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL ESCANDALLO · QUÉ CABE DENTRO"
        title={<span>No solo lo que compras. <span className="grad-text">También lo tuyo.</span></span>}/>

      {/* ===== El documento ===== */}
      <div style={{position:'absolute', left:150, top:228, width:1080,
        opacity:clamp(docE*1.3,0,1), transform:`translateY(${(1-docE)*24}px)`}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
          boxShadow:'0 24px 60px rgba(15,23,42,0.10)', padding:'22px 30px 26px'}}>

          {/* cabecera */}
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between',
            opacity:cabE, transform:`translateY(${(1-cabE)*-8}px)`, paddingBottom:16,
            borderBottom:'1px solid #EEF2F7'}}>
            <div>
              <div className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>ESCANDALLO</div>
              <div className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A', marginTop:4}}>Paella para 8</div>
            </div>
            <div className="f-mono" style={{fontSize:13, fontWeight:600, color:'#94A3B8'}}>Marzo</div>
          </div>

          {/* cabecera de columnas */}
          <div className="f-mono" style={{display:'flex', gap:0, padding:'12px 0 6px',
            fontSize:11, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1', opacity:cabE}}>
            <span style={{flex:1}}>CONCEPTO</span>
            <span style={{width:150, textAlign:'right'}}>CANTIDAD</span>
            <span style={{width:170, textAlign:'right'}}>COSTE / UD</span>
            <span style={{width:150, textAlign:'right'}}>TOTAL</span>
          </div>

          {/* líneas */}
          <div style={{position:'relative', height:LINEAS.length*ROW}}>
            {LINEAS.map((l,i)=>{
              const p = pr(l.s, l.tuyo?0.6:0.45); if (p<=0) return null;
              const e = l.tuyo ? Easing.easeOutBack(p) : Easing.easeOutCubic(p);
              // las compras se atenúan cuando la voz pasa a "lo tuyo"
              const dim = (!l.tuyo && t>=T.pero) ? lerp(1, 0.42, pr(T.pero, 0.6)) : 1;
              const glow = l.tuyo ? Math.sin(clamp((t-l.s)/1.2,0,1)*Math.PI) : 0;
              return (
                <div key={i} style={{position:'absolute', left:0, right:0, top:i*ROW, height:ROW-8,
                  display:'flex', alignItems:'center', borderRadius:10,
                  padding:'0 12px', margin:'0 -12px',
                  background: l.tuyo ? `rgba(251,140,0,${0.07+0.06*glow})` : 'transparent',
                  border: l.tuyo ? '1px solid rgba(251,140,0,0.28)' : '1px solid transparent',
                  opacity: clamp(p*1.3,0,1)*dim,
                  transform: `translateX(${(1-e)*(l.tuyo?38:12)}px)`}}>
                  <span className="f-plex" style={{flex:1, fontSize:20, fontWeight:l.tuyo?700:600,
                    color: l.tuyo?'#C2410C':'#0F172A', display:'flex', alignItems:'center', gap:9}}>
                    {l.tuyo
                      ? <span style={{fontSize:14}}>✎</span>
                      : <span style={{width:9, height:9, borderRadius:3, background:'#BFDBFE', display:'inline-block'}}/>}
                    {l.n}
                  </span>
                  <span className="f-mono" style={{width:150, textAlign:'right', fontSize:18, color:'#475569'}}>{l.q}</span>
                  <span className="f-mono" style={{width:170, textAlign:'right', fontSize:18, color:'#475569'}}>{l.pu} €</span>
                  <span className="f-mono" style={{width:150, textAlign:'right', fontSize:19, fontWeight:700,
                    color: l.tuyo?'#C2410C':'#0F172A'}}>{l.tot} €</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* ===== Chip "de tu almacén" ===== */}
      {(()=>{ const p = pr(T.almacen, 0.4); if (p<=0 || t>=T.cocina) return null;
        return (
          <div style={{position:'absolute', left:1252, top:322, opacity:p*(1-pr(T.cocina-0.6,0.5))}}>
            <StatusChip label="de tu almacén" color="primary" start={T.almacen} t={t}/>
          </div>
        );
      })()}

      {/* ===== Frase-remate (la capacidad, contada como héroe) ===== */}
      {remateP > 0 && (
        <div style={{position:'absolute', left:1276, top:392, width:500,
          opacity:clamp(remateP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutCubic(remateP))*16}px)`}}>
          <div className="f-plex" style={{fontSize:25, fontWeight:700, lineHeight:1.35, color:'#0F172A'}}>
            Para que puedas contarlo todo,
            <span style={{color:'#FB8C00'}}> una línea no tiene por qué ser un producto.</span>
          </div>
          <div className="f-plex" style={{marginTop:12, fontSize:19, color:'#64748B'}}>La escribes tú.</div>
        </div>
      )}

      {/* ===== Total + reparto ===== */}
      {totalP > 0 && (
        <div style={{position:'absolute', left:1276, top:610, width:500,
          opacity:clamp(totalP*1.6,0,1)}}>
          <div className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>COSTE TOTAL</div>
          <div className="f-mono" style={{fontSize:66, fontWeight:700, color:'#0F172A', lineHeight:1.05}}>
            {(cent/100).toFixed(2).replace('.', ',')} €
          </div>

          {splitP > 0 && (
            <div style={{marginTop:26, opacity:clamp(splitP*1.4,0,1)}}>
              <div style={{display:'flex', height:18, borderRadius:100, overflow:'hidden', background:'#EEF2F7'}}>
                <div style={{width:`${58.5*splitE}%`, background:'#93C5FD'}}/>
                <div style={{width:`${41.5*splitE}%`, background:'#FB8C00'}}/>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:12}}>
                <div>
                  <div className="f-mono" style={{fontSize:22, fontWeight:700, color:'#3B82F6'}}>27,60 €</div>
                  <div className="f-plex" style={{fontSize:15, color:'#64748B'}}>de tu almacén</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="f-mono" style={{fontSize:22, fontWeight:700, color:'#C2410C'}}>19,60 €</div>
                  <div className="f-plex" style={{fontSize:15, color:'#C2410C', fontWeight:600}}>tuyos</div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        ¿Y qué precio lleva ese arroz? <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES02 });