// === Escena 03 — VALLE: el precio que pagaste tú ===
// Un solo producto (el tomate) y tres precios reales según el mes. Los tres son válidos: cada
// escandallo guarda el suyo. Escena tranquila a propósito — protege el clímax de la 04.
// Beats anclados a la frase del guion (audio/guion.json #3).
function EscenaES03({ t }){
  const T = {
    intro:0.7,     // "el arroz no tiene un precio" → título
    tuyo:3.2,      // "el que pagaste tú, el día que lo compraste"
    tomate:6.0,    // "Mira el tomate" → el tomate entra al centro
    p1:7.1,        // "En marzo te costó un euro veinte" → etiqueta marzo
    p2:9.5,       // "En julio, en plena temporada, noventa y cinco" → etiqueta julio
    p3:13.4,       // "Y en diciembre, uno sesenta" → etiqueta diciembre
    cual:15.7,     // "¿Cuál de los tres es el bueno?" → interrogación
    lostres:18.0,  // "Los tres." → las tres se iluminan a la vez
    remate:22.2,   // "cada escandallo guarda el suyo" → frase-remate
    candado:25.7,  // "nadie te lo cambia por detrás" → candado
    tresEsc:28.4,  // "poner los tres al lado" → tres escandallos del mismo plato
    decision:32.9, // "Eso ya no es una cuenta. Es una decisión."
    puente:36.4,   // "¿Y cuando los precios vuelvan a cambiar?" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const PRECIOS = [
    { mes:'MARZO',     v:'1,20 €', s:T.p1, x:-330, col:'#0085FF' },
    { mes:'JULIO',     v:'0,95 €', s:T.p2, x:   0, col:'#10B981' },
    { mes:'DICIEMBRE', v:'1,60 €', s:T.p3, x: 330, col:'#FB8C00' },
  ];
  const ESCANDALLOS = [
    { mes:'Marzo',     tom:'1,20 €', tot:'47,20 €', col:'#0085FF' },
    { mes:'Julio',     tom:'0,95 €', tot:'44,80 €', col:'#10B981' },
    { mes:'Diciembre', tom:'1,60 €', tot:'52,60 €', col:'#FB8C00' },
  ];

  const tomP = pr(T.tomate, 0.7), tomE = Easing.easeOutBack(tomP);
  const tresP = pr(T.lostres, 0.6);
  const remateP = pr(T.remate, 0.7);
  const candP = pr(T.candado, 0.5);
  const escP = pr(T.tresEsc, 0.8);
  const cualOut = pr(T.remate, 0.4);
  // al llegar los tres escandallos, el bloque del tomate sube y se atenúa
  const shift = Easing.easeOutCubic(escP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL COSTE · DE DÓNDE SALE"
        title={<span>El tomate no tiene un precio. <span className="grad-text">Tiene el tuyo.</span></span>}/>

      {/* ===== El tomate + sus tres precios ===== */}
      <div style={{position:'absolute', left:0, right:0, top:lerp(300, 236, shift), textAlign:'center',
        opacity: lerp(1, 0.55, shift)}}>
        {tomP > 0 && (
          <div style={{display:'inline-block', transform:`scale(${lerp(0.7,1,tomE)*lerp(1,0.72,shift)})`,
            opacity:clamp(tomP*1.4,0,1)}}>
            <svg width="150" height="150" viewBox="0 0 100 100">
              <ellipse cx="50" cy="92" rx="30" ry="5" fill="rgba(15,23,42,0.10)"/>
              <circle cx="50" cy="56" r="32" fill="#EF4444"/>
              <circle cx="40" cy="46" r="10" fill="#FF7A6B" opacity="0.55"/>
              <path d="M50 26 l-9 -8 l6 9 l-12 -3 l10 6 l-11 3 l16 1 Z" fill="#16A34A"/>
              <path d="M50 26 l9 -8 l-6 9 l12 -3 l-10 6 l11 3 l-16 1 Z" fill="#16A34A"/>
            </svg>
          </div>
        )}
      </div>

      {/* etiquetas de precio */}
      {PRECIOS.map((p,i)=>{
        const q = pr(p.s, 0.55); if (q<=0) return null;
        const e = Easing.easeOutBack(q);
        const hi = tresP>0 ? Math.sin(clamp((t-T.lostres)/1.2,0,1)*Math.PI) : 0;
        return (
          <div key={i} style={{position:'absolute', left:'50%', top:lerp(468, 392, shift),
            marginLeft:p.x-95, width:190, textAlign:'center',
            opacity:clamp(q*1.4,0,1)*lerp(1,0.5,shift),
            transform:`translateY(${(1-e)*22}px) scale(${lerp(0.85,1,e)*lerp(1,0.82,shift)})`}}>
            <div style={{background:'#fff', borderRadius:14, padding:'14px 10px',
              border:`2px solid ${p.col}`,
              boxShadow:`0 ${14+10*hi}px ${34+14*hi}px ${p.col}${hi>0?'44':'22'}`}}>
              <div className="f-plex" style={{fontSize:11, fontWeight:700, letterSpacing:'1.6px', color:p.col}}>{p.mes}</div>
              <div className="f-mono" style={{fontSize:32, fontWeight:700, color:'#0F172A', marginTop:4}}>{p.v}</div>
              <div className="f-plex" style={{fontSize:12, color:'#94A3B8', marginTop:2}}>por kilo</div>
            </div>
          </div>
        );
      })}

      {/* ===== "¿Cuál es el bueno?" → "Los tres." ===== */}
      {(()=>{ const p = pr(T.cual, 0.5); if (p<=0 || cualOut>=1) return null;
        const yes = pr(T.lostres, 0.45);
        return (
          <div style={{position:'absolute', left:0, right:0, top:632, textAlign:'center',
            opacity:p*(1-cualOut)}}>
            <span className="f-plex" style={{fontSize:30, fontWeight:700, color:'#64748B'}}>
              ¿Cuál de los tres es el bueno?
            </span>
            {yes>0 && (
              <span className="f-plex" style={{marginLeft:16, fontSize:34, fontWeight:800, color:'#10B981',
                opacity:yes, display:'inline-block', transform:`translateY(${(1-Easing.easeOutBack(yes))*10}px)`}}>
                Los tres.
              </span>
            )}
          </div>
        );
      })()}

      {/* ===== Frase-remate + candado ===== */}
      {remateP > 0 && escP < 0.6 && (
        <div style={{position:'absolute', left:0, right:0, top:640, textAlign:'center',
          opacity:clamp(remateP*1.3,0,1)*(1-clamp(escP/0.6,0,1)),
          transform:`translateY(${(1-Easing.easeOutCubic(remateP))*14}px)`}}>
          <div className="f-plex" style={{fontSize:32, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
            Para que cuentes con el precio real de cada momento,
          </div>
          <div className="f-plex" style={{marginTop:8, fontSize:32, fontWeight:800, color:'#0085FF'}}>
            cada escandallo guarda el suyo.
          </div>
          {candP > 0 && (
            <div style={{marginTop:20, opacity:candP, display:'inline-flex', alignItems:'center', gap:9,
              padding:'8px 18px', borderRadius:100, background:'rgba(16,185,129,0.10)',
              border:'1px solid rgba(16,185,129,0.30)'}}>
              <svg width="16" height="16" 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:17, fontWeight:600, color:'#059669'}}>Nadie te lo cambia por detrás</span>
            </div>
          )}
        </div>
      )}

      {/* ===== Los tres escandallos del mismo plato ===== */}
      {escP > 0 && ESCANDALLOS.map((e,i)=>{
        const p = pr(T.tresEsc + i*0.18, 0.6); if (p<=0) return null;
        const ee = Easing.easeOutCubic(p);
        return (
          <div key={i} style={{position:'absolute', left:'50%', top:600, marginLeft:-800+i*540, width:480,
            opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-ee)*26}px)`}}>
            <div style={{background:'#fff', borderRadius:16,
              borderRight:'1px solid #E2E8F0', borderBottom:'1px solid #E2E8F0', borderLeft:'1px solid #E2E8F0',
              borderTop:`4px solid ${e.col}`,
              boxShadow:'0 18px 44px rgba(15,23,42,0.09)', padding:'18px 22px 20px'}}>
              <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
                <span className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>Paella para 8</span>
                <span className="f-plex" style={{fontSize:15, fontWeight:700, color:e.col}}>{e.mes}</span>
              </div>
              <div style={{marginTop:14, display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'8px 12px', margin:'14px -12px 0', borderRadius:9, background:'rgba(239,68,68,0.06)'}}>
                <span className="f-plex" style={{fontSize:16, color:'#475569'}}>Tomate y pimiento</span>
                <span className="f-mono" style={{fontSize:17, fontWeight:700, color:'#0F172A'}}>{e.tom}</span>
              </div>
              <div style={{marginTop:14, paddingTop:12, borderTop:'1px solid #EEF2F7',
                display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
                <span className="f-plex" style={{fontSize:14, fontWeight:600, letterSpacing:'1px', color:'#94A3B8'}}>COSTE</span>
                <span className="f-mono" style={{fontSize:30, fontWeight:700, color:'#0F172A'}}>{e.tot}</span>
              </div>
            </div>
          </div>
        );
      })}

      {/* ===== "Es una decisión" ===== */}
      {(()=>{ const p = pr(T.decision, 0.6); if (p<=0) return null;
        return (
          <div style={{position:'absolute', left:0, right:0, top:900, textAlign:'center', opacity:p}}>
            <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>
              Eso ya no es una cuenta. <span style={{color:'#0085FF'}}>Es una decisión.</span>
            </span>
          </div>
        );
      })()}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        ¿Y cuando los precios vuelvan a cambiar? <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES03 });