// === Escena 04 — CLÍMAX: sube todo y el escandallo de marzo no se mueve ===
// La imagen-momento: una ola de subidas entra por la derecha (el presente), pinta diciembre y
// REBOTA contra julio y marzo, que se quedan intactos con su candado. Después, los tres totales
// aterrizan uno a uno y aparece la curva del margen. La Única Cosa (2/3, prueba).
// Beats anclados a la frase del guion (audio/guion.json #4).
function EscenaES04({ t }){
  const T = {
    sube:0.2,       // "Sube el tomate. Sube el pescado." → la ola entra por la derecha
    diciembre:2.7,  // "Es diciembre, y todo cuesta más" → diciembre sube a 52,60
    mira:6.1,       // "mira bien lo que no pasa" → VALLE: todo se calma
    marzo:7.7,      // "El escandallo de marzo sigue igual" → marzo se ilumina + candado
    niuna:10.3,     // "Ni una cifra se ha movido" → julio también, candado
    porque:12.4,    // "Porque marzo fue así" → rótulo
    si:16.3,        // "Si marzo cambiara cada vez que llega una factura" → rótulo alterna
    tres:23.4,      // "Aquí los tienes los tres" → los tres al mismo nivel
    t1:27.5,        // "Cuarenta y siete con veinte" → total marzo
    t2:29.5,        // "Cuarenta y cuatro con ochenta" → total julio
    t3:31.4,        // "Cincuenta y dos con sesenta" → total diciembre
    margen:34.8,    // "por dónde se te está yendo el margen" → % y curva
    unica:37.3,     // "Un escandallo es una foto de lo que te cuesta" → La Única Cosa (2/3)
    puente:44.7,    // "a cuánto lo vendes" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const CARDS = [
    { mes:'Marzo',     tot:'47,20 €', pct:'52 %', col:'#0085FF', ts:T.t1, quieto:true,  candado:T.marzo },
    { mes:'Julio',     tot:'44,80 €', pct:'54 %', col:'#10B981', ts:T.t2, quieto:true,  candado:T.niuna },
    { mes:'Diciembre', tot:'52,60 €', pct:'46 %', col:'#FB8C00', ts:T.t3, quieto:false, candado:null  },
  ];

  // La ola: entra por la derecha, se frena en el borde de diciembre y rebota.
  const olaP = pr(T.sube, 2.4);
  const olaE = Easing.easeInOutCubic(olaP);
  const olaX = lerp(2020, 1240, olaE) + (olaP>=1 ? Math.sin(clamp((t-T.sube-2.4)/1.6,0,1)*Math.PI)*26 : 0);
  const olaFade = 1 - pr(T.mira, 1.0);

  const unicaP = pr(T.unica, 0.8), unicaE = Easing.easeOutCubic(unicaP);
  const margenP = pr(T.margen, 0.9);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL HISTÓRICO · LO QUE NO SE MUEVE"
        title={<span>Sube todo. <span className="grad-text">Marzo sigue diciendo la verdad.</span></span>}/>

      {/* ===== La ola de subidas ===== */}
      {olaFade > 0 && (
        <div style={{position:'absolute', left:olaX, top:200, width:900, height:620, opacity:olaFade*0.9,
          background:'linear-gradient(90deg, rgba(239,68,68,0) 0%, rgba(239,68,68,0.14) 34%, rgba(239,68,68,0.26) 100%)',
          pointerEvents:'none'}}>
          {[0,1,2,3].map(i=>{
            const y = 250 + i*96;
            return (
              <div key={i} style={{position:'absolute', left:40+i*54, top:y, display:'flex', alignItems:'center', gap:8,
                opacity:0.85}}>
                <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 4 l7 9 h-4 v7 h-6 v-7 h-4 Z" fill="#EF4444"/></svg>
                <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#DC2626'}}>
                  {['Tomate +33 %','Pescado +18 %','Gambas +12 %','Aceite +9 %'][i]}
                </span>
              </div>
            );
          })}
        </div>
      )}

      {/* ===== Los tres escandallos ===== */}
      {CARDS.map((c,i)=>{
        const enter = pr(0.2 + i*0.15, 0.7), ee = Easing.easeOutCubic(enter);
        const locked = c.candado!=null ? pr(c.candado, 0.6) : 0;
        const glow = c.candado!=null && t>=c.candado
          ? Math.sin(clamp((t-c.candado)/1.4,0,1)*Math.PI) : 0;
        // diciembre "sube": su total salta al entrar la ola
        const subio = !c.quieto ? pr(T.diciembre, 0.6) : 0;
        const totP = pr(c.ts, 0.7);
        // Entrada discreta (10px, sin overshoot): la protagonista de este tramo es la ola.
        return (
          <div key={i} style={{position:'absolute', left:190+i*530, top:270, width:470,
            opacity:clamp(enter*1.3,0,1),
            transform:`translateY(${(1-ee)*10 - (subio>0?Easing.easeOutBack(subio)*10:0)}px)`}}>
            <div style={{background:'#fff', borderRadius:18, padding:'22px 26px 26px',
              // longhand a propósito: mezclar `border` con `borderTop` dispara un warning de React
              // en cada rerender (el grosor cambia con `locked`).
              borderRight:`${locked>0.4?2:1}px solid ${locked>0.4?'#10B981':'#E2E8F0'}`,
              borderBottom:`${locked>0.4?2:1}px solid ${locked>0.4?'#10B981':'#E2E8F0'}`,
              borderLeft:`${locked>0.4?2:1}px solid ${locked>0.4?'#10B981':'#E2E8F0'}`,
              borderTop:`5px solid ${c.col}`,
              boxShadow: locked>0.4
                ? `0 ${20+14*glow}px ${50+20*glow}px rgba(16,185,129,${0.16+0.18*glow})`
                : '0 18px 44px rgba(15,23,42,0.09)'}}>

              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <span className="f-plex" style={{fontSize:22, fontWeight:800, color:'#0F172A'}}>{c.mes}</span>
                {locked>0.3 && (
                  <span style={{display:'inline-flex', alignItems:'center', gap:6, opacity:clamp((locked-0.3)/0.5,0,1)}}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                      <rect x="5" y="10.5" width="14" height="10" rx="2.5" fill="#059669"/>
                      <path d="M8.2 10.5V8a3.8 3.8 0 1 1 7.6 0v2.5" stroke="#059669" strokeWidth="2.1" fill="none"/>
                    </svg>
                    <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#059669'}}>intacto</span>
                  </span>
                )}
              </div>
              <div className="f-plex" style={{fontSize:15, color:'#94A3B8', marginTop:2}}>Paella para 8</div>

              <div style={{marginTop:22, opacity: totP>0?1:0.25}}>
                <div className="f-plex" style={{fontSize:11, fontWeight:700, letterSpacing:'1.8px', color:'#94A3B8'}}>COSTE</div>
                <div className="f-mono" style={{fontSize:52, fontWeight:700, color:'#0F172A', lineHeight:1.1,
                  transform:`scale(${1+0.04*(totP>0?Math.sin(clamp((t-c.ts)/1.1,0,1)*Math.PI):0)})`,
                  transformOrigin:'left center'}}>
                  {totP>0 ? c.tot : '··,·· €'}
                </div>
              </div>

              {margenP > 0 && (
                <div style={{marginTop:20, paddingTop:16, borderTop:'1px solid #EEF2F7',
                  display:'flex', alignItems:'baseline', justifyContent:'space-between',
                  opacity:clamp(pr(T.margen+i*0.12, 0.6)*1.3,0,1)}}>
                  <span className="f-plex" style={{fontSize:14, fontWeight:600, letterSpacing:'1px', color:'#94A3B8'}}>MARGEN</span>
                  <span className="f-mono" style={{fontSize:28, fontWeight:700,
                    color: i===2 ? '#EF4444' : '#059669'}}>{c.pct}</span>
                </div>
              )}
            </div>
          </div>
        );
      })}

      {/* ===== Rótulos que se relevan ===== */}
      {(()=>{
        const a = pr(T.porque, 0.5) * (1 - pr(T.si, 0.4));
        const b = pr(T.si, 0.5) * (1 - pr(T.tres, 0.4));
        if (a<=0 && b<=0) return null;
        return (
          <div style={{position:'absolute', left:0, right:0, top:790, textAlign:'center'}}>
            {a>0 && (
              <div style={{position:'absolute', left:0, right:0, opacity:a}}>
                <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#0F172A'}}>
                  Porque marzo fue así. <span style={{color:'#64748B', fontWeight:600}}>Y esa es la gracia.</span>
                </span>
              </div>
            )}
            {b>0 && (
              <div style={{position:'absolute', left:0, right:0, opacity:b,
                transform:`translateY(${(1-Easing.easeOutCubic(pr(T.si,0.5)))*12}px)`}}>
                <span className="f-plex" style={{fontSize:26, fontWeight:600, color:'#64748B'}}>
                  Si marzo cambiara con cada factura nueva,
                  <span style={{color:'#0F172A', fontWeight:700}}> no sabrías si aquel mes ganaste dinero.</span>
                </span>
              </div>
            )}
          </div>
        );
      })()}

      {/* ===== La Única Cosa (2/3 — prueba) ===== */}
      {unicaP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:850, textAlign:'center',
          opacity:clamp(unicaP*1.3,0,1), transform:`translateY(${(1-unicaE)*16}px)`}}>
          <div className="f-plex" style={{fontSize:38, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
            Una foto de lo que te cuesta. <span style={{color:'#0085FF'}}>Todas las que quieras.</span>
          </div>
        </div>
      )}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        Ahora la otra mitad: a cuánto lo vendes. <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES04 });