// === Escena 05 — Un plato, el precio de cada cliente ===
// El escandallo (coste, uno) a la izquierda; el catálogo (precios, los que haga falta) a la
// derecha, cada precio con a quién va: cliente concreto o tipo de cliente entero. Cierra con el
// borrador, que permite hacer números sin que nadie cobre nada distinto.
// Beats anclados a la frase del guion (audio/guion.json #5).
function EscenaES05({ t }){
  const T = {
    espera:0.3,     // "Aquí mucha gente espera poner el precio de venta"
    masalla:3.2,    // "Y va un paso más allá" → el catálogo entra por la derecha
    tres:5.9,       // "no tiene un precio: tiene tres" → tres huecos en el catálogo
    p1:8.4,        // "Al que se sienta en la mesa le cobras noventa y ocho" → precio 1
    p2:11.6,        // "Al grupo del menú, ochenta y cuatro" → precio 2
    p3:14.0,        // "Y al hotel que te pide veinte a la semana, setenta y dos" → precio 3
    remate:19.1,    // "los precios viven en el catálogo" → frase-remate
    asigna:22.6,    // "a un cliente concreto, o a todo un tipo de cliente" → chips de destino
    dice:26.6,      // "El escandallo dice lo que te cuesta. Tú decides lo que ganas."
    borrador:33.0,  // "puede quedarse en borrador" → sello sobre un escandallo nuevo
    puente:38.7,    // "Recapitulemos" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const PRECIOS = [
    { et:'En carta',        v:'98,00 €', dest:'Todos',              tipo:false, s:T.p1, col:'#0085FF' },
    { et:'Menú de grupos',  v:'84,00 €', dest:'Tipo: Grupos',       tipo:true,  s:T.p2, col:'#7C3AED' },
    { et:'Hotel Marsol',    v:'72,00 €', dest:'Cliente: H. Marsol', tipo:false, s:T.p3, col:'#0EA5E9' },
  ];

  const escE = Easing.easeOutCubic(pr(T.espera, 0.8));
  const catP = pr(T.masalla, 0.8), catE = Easing.easeOutCubic(catP);
  const remateP = pr(T.remate, 0.7);
  const diceP = pr(T.dice, 0.7);
  const borrP = pr(T.borrador, 0.8), borrE = Easing.easeOutBack(borrP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL PRECIO · UNO POR CLIENTE"
        title={<span>Tu paella no tiene un precio. <span className="grad-text">Tiene los que tú quieras.</span></span>}/>

      {/* ===== El escandallo (coste) ===== */}
      <div style={{position:'absolute', left:170, top:300, width:520,
        opacity:clamp(escE*1.3,0,1), transform:`translateX(${(1-escE)*-24}px)`}}>
        <div style={{background:'#fff', borderRadius:18,
          borderRight:'1px solid #E2E8F0', borderBottom:'1px solid #E2E8F0', borderLeft:'1px solid #E2E8F0',
          borderTop:'5px solid #0085FF',
          boxShadow:'0 18px 44px rgba(15,23,42,0.09)', padding:'22px 26px 26px'}}>
          <div className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>ESCANDALLO</div>
          <div className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A', marginTop:4}}>Paella para 8</div>
          <div style={{marginTop:20}}>
            <div className="f-plex" style={{fontSize:11, fontWeight:700, letterSpacing:'1.8px', color:'#94A3B8'}}>TE CUESTA</div>
            <div className="f-mono" style={{fontSize:52, fontWeight:700, color:'#0F172A', lineHeight:1.1}}>47,20 €</div>
          </div>
          <div className="f-plex" style={{marginTop:16, fontSize:16, color:'#64748B'}}>Uno. El que pagaste.</div>
        </div>

        {/* el borrador, detrás y en diagonal */}
        {borrP > 0 && (
          <div style={{position:'absolute', left:52, top:74, right:-52, opacity:clamp(borrP*1.2,0,1),
            transform:`rotate(3.5deg) translateY(${(1-borrE)*24}px) scale(${lerp(0.92,1,borrE)})`, zIndex:-1}}>
            <div style={{background:'#FFFDF5', borderRadius:18, border:'2px dashed #F59E0B',
              boxShadow:'0 18px 44px rgba(245,158,11,0.16)', padding:'22px 26px 26px', minHeight:210}}>
              <div className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#B45309'}}>ESCANDALLO</div>
              {/* «Diciembre», nunca «v2»: no existe linaje entre escandallos — ningún campo dice
                  de cuál viene el nuevo ni cuál está vigente. No se promete lo que no hay. */}
              <div className="f-plex" style={{fontSize:24, fontWeight:800, color:'#0F172A', marginTop:4}}>Paella para 8 · Diciembre</div>
              <div style={{marginTop:26, display:'inline-block', padding:'8px 18px', borderRadius:8,
                border:'2px solid #F59E0B', transform:'rotate(-3deg)'}}>
                <span className="f-plex" style={{fontSize:24, fontWeight:800, letterSpacing:'3px', color:'#B45309'}}>BORRADOR</span>
              </div>
              <div className="f-plex" style={{marginTop:18, fontSize:16, color:'#92400E'}}>
                Haces números tranquilo. Nadie cobra nada distinto.
              </div>
            </div>
          </div>
        )}
      </div>

      {/* ===== El catálogo (precios) ===== */}
      {catP > 0 && (
        <div style={{position:'absolute', left:900, top:300, width:840,
          opacity:clamp(catP*1.3,0,1), transform:`translateX(${(1-catE)*36}px)`}}>
          <div style={{background:'#fff', borderRadius:18,
            borderRight:'1px solid #E2E8F0', borderBottom:'1px solid #E2E8F0', borderLeft:'1px solid #E2E8F0',
            borderTop:'5px solid #10B981',
            boxShadow:'0 24px 60px rgba(15,23,42,0.10)', padding:'22px 28px 26px'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div>
                <div className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#059669'}}>CATÁLOGO DE VENTA</div>
                <div className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A', marginTop:4}}>Paella para 8</div>
              </div>
              <span className="f-plex" style={{fontSize:15, fontWeight:600, color:'#94A3B8'}}>Los que hagan falta</span>
            </div>

            <div style={{marginTop:20, position:'relative', height:3*94}}>
              {PRECIOS.map((p,i)=>{
                const q = pr(p.s, 0.6); if (q<=0) return null;
                const e = Easing.easeOutBack(q);
                const pulse = Math.sin(clamp((t-p.s)/1.2,0,1)*Math.PI);
                const asg = pr(T.asigna + i*0.16, 0.5);
                return (
                  <div key={i} style={{position:'absolute', left:0, right:0, top:i*94, height:82,
                    display:'flex', alignItems:'center', gap:20, padding:'0 20px', borderRadius:13,
                    background:`rgba(16,185,129,${0.04+0.05*pulse})`, border:'1px solid #E8F3EE',
                    opacity:clamp(q*1.3,0,1),
                    transform:`translateX(${(1-e)*26}px)`}}>
                    <span className="f-plex" style={{flex:1, fontSize:21, fontWeight:700, color:'#0F172A'}}>{p.et}</span>
                    {asg > 0 && (
                      <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:7,
                        padding:'7px 14px', borderRadius:100, fontSize:15, fontWeight:600,
                        background:'#F1F5F9', border:`1px solid ${p.tipo?'rgba(124,58,237,0.35)':'#E2E8F0'}`,
                        color:p.tipo?'#6D28D9':'#475569',
                        opacity:asg, transform:`scale(${lerp(0.85,1,Easing.easeOutBack(asg))})`}}>
                        {p.tipo ? '👥' : '👤'} {p.dest}
                      </span>
                    )}
                    <span className="f-mono" style={{width:170, textAlign:'right', fontSize:34, fontWeight:700, color:'#0F172A'}}>{p.v}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* frase-remate */}
          {remateP > 0 && (
            <div style={{marginTop:26, opacity:clamp(remateP*1.3,0,1),
              transform:`translateY(${(1-Easing.easeOutCubic(remateP))*14}px)`}}>
              <div className="f-plex" style={{fontSize:27, fontWeight:700, lineHeight:1.35, color:'#0F172A'}}>
                Para que cada cliente pueda tener su precio,
                <span style={{color:'#059669'}}> los precios viven en el catálogo.</span>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ===== El reparto de papeles ===== */}
      {diceP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:930, textAlign:'center',
          opacity:clamp(diceP*1.3,0,1), transform:`translateY(${(1-Easing.easeOutCubic(diceP))*12}px)`}}>
          <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>
            El escandallo dice lo que te cuesta.
            <span style={{color:'#0085FF'}}> Tú decides lo que ganas.</span>
          </span>
        </div>
      )}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        Recapitulemos. <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES05 });