// === Escena 01 — Contrato: "Vendes una paella a 98 €. ¿Y cuánto te cuesta?" ===
// El mundo del que fabrica lo que vende: el precio lo sabe; el coste no está en ningún sitio.
// Los ingredientes caen dentro de la tarjeta del coste — primero los del almacén, luego los
// suyos (gas, cocina) — y la incógnita se convierte en el escandallo. Cierra con La Única Cosa.
// Beats anclados a la frase del guion (audio/guion.json #1) — recalibrables contra la toma real.
function EscenaES01({ t }){
  const T = {
    plato:0.0,      // "Vendes una paella para ocho" → el plato entra desde la izquierda
    precio:1.7,     // "a noventa y ocho euros" → etiqueta de PVP
    pregunta:4.0,   // "¿Y sabes cuánto te cuesta hacerla?" → tarjeta del coste con la incógnita
    exacto:7.2,     // "No aproximado. Exacto." → la incógnita late una vez
    chipsProd:9.8,  // "El arroz, las gambas, el azafrán" → 3 chips azules caen dentro
    chipsTuyo:13.1, // "y también el gas, y la hora y media de cocina" → 2 chips naranjas
    decide:16.5,    // "Ese número decide si estás ganando dinero" → rótulo bajo la tarjeta
    nadie:20.8,     // "casi nadie lo tiene apuntado" → el rótulo se apaga, queda el hueco
    nombre:25.6,    // "se llama escandallo" → la incógnita se convierte en el documento
    promesa:27.5,   // "Un escandallo es una foto de lo que te cuesta" → La Única Cosa (1/3)
    todas:30.1,     // "Y puedes hacer todas las que quieras" → dos copias detrás
    puente:32.6,    // "Vamos a montar uno" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const CHIPS = [
    { n:'Arroz',   s:T.chipsProd+0.0,  tuyo:false },
    { n:'Gambas',  s:T.chipsProd+0.9,  tuyo:false },
    { n:'Azafrán', s:T.chipsProd+1.8,  tuyo:false },
    { n:'Gas',     s:T.chipsTuyo+0.2,  tuyo:true  },
    { n:'Cocina · 1,5 h', s:T.chipsTuyo+1.6, tuyo:true },
  ];

  const platoE = Easing.easeOutCubic(pr(T.plato, 0.9));
  const precioE = Easing.easeOutBack(pr(T.precio, 0.6));
  const cardE = Easing.easeOutCubic(pr(T.pregunta, 0.7));
  const exactoPulse = (t>=T.exacto && t<T.exacto+1.1) ? Math.sin((t-T.exacto)/1.1*Math.PI) : 0;
  const nombreP = pr(T.nombre, 0.8), nombreE = Easing.easeOutCubic(nombreP);
  const promE = Easing.easeOutCubic(pr(T.promesa, 0.7));
  const todasE = Easing.easeOutCubic(pr(T.todas, 0.8));

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="COSTES · EL NÚMERO QUE FALTA"
        title={<span>Sabes lo que cobras. <span className="grad-text">¿Y lo que te cuesta?</span></span>}/>

      {/* ===== El plato (paella vista desde arriba) ===== */}
      <div style={{position:'absolute', left:300, top:400, opacity:clamp(platoE*1.3,0,1),
        transform:`translateX(${(1-platoE)*-70}px) scale(${lerp(0.9,1,platoE)})`}}>
        <svg width="380" height="380" viewBox="0 0 200 200">
          <ellipse cx="100" cy="176" rx="88" ry="12" fill="rgba(15,23,42,0.10)"/>
          <circle cx="100" cy="98" r="86" fill="#334155"/>
          <circle cx="100" cy="98" r="78" fill="#1E293B"/>
          <circle cx="100" cy="98" r="70" fill="#F5C542"/>
          <circle cx="100" cy="98" r="70" fill="url(#es1arroz)" opacity="0.35"/>
          <defs>
            <radialGradient id="es1arroz" cx="0.4" cy="0.35">
              <stop offset="0%" stopColor="#FFF3C4"/><stop offset="100%" stopColor="#E0A61B"/>
            </radialGradient>
          </defs>
          {/* gambas */}
          {[[72,66,-25],[132,84,35],[92,132,10],[128,130,-60],[64,108,60]].map(([x,y,r],i)=>(
            <path key={i} d="M0 0 c8 -7 18 -6 22 2 c4 8 -2 16 -11 16 c-6 0 -9 -3 -9 -3"
              transform={`translate(${x} ${y}) rotate(${r})`} fill="#FF7A59" stroke="#E85D3D" strokeWidth="1.5"/>
          ))}
          {/* pimiento */}
          {[[100,60],[76,92],[124,110]].map(([x,y],i)=>(
            <rect key={i} x={x} y={y} width="20" height="6" rx="3" fill="#EF4444" opacity="0.9"
              transform={`rotate(${i*40-20} ${x+10} ${y+3})`}/>
          ))}
        </svg>
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:344, textAlign:'center',
          fontSize:22, fontWeight:700, color:'#0F172A'}}>Paella para 8</div>
      </div>

      {/* ===== Etiqueta de PVP ===== */}
      {precioE > 0 && (
        <div style={{position:'absolute', left:560, top:392, transform:`scale(${lerp(0.6,1,precioE)}) rotate(-6deg)`,
          opacity:clamp(pr(T.precio,0.4)*1.4,0,1)}}>
          <div style={{background:'#10B981', color:'#fff', padding:'10px 20px', borderRadius:12,
            boxShadow:'0 14px 34px rgba(16,185,129,0.35)'}}>
            <div className="f-plex" style={{fontSize:11, fontWeight:700, letterSpacing:'1.5px', opacity:0.85}}>EN CARTA</div>
            <div className="f-mono" style={{fontSize:34, fontWeight:700, lineHeight:1.1}}>98,00 €</div>
          </div>
        </div>
      )}

      {/* ===== La tarjeta del coste (incógnita → escandallo) ===== */}
      {cardE > 0 && (
        <div style={{position:'absolute', left:1010, top:340, width:620,
          opacity:clamp(cardE*1.3,0,1), transform:`translateY(${(1-cardE)*26}px)`}}>

          {/* copias detrás — "todas las que quieras" */}
          {todasE > 0 && [2,1].map(k=>(
            <div key={k} style={{position:'absolute', left:k*16, top:-k*14, right:-k*16, bottom:k*14,
              background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
              opacity:todasE*(0.55-k*0.18), transform:`rotate(${k*0.9}deg)`}}/>
          ))}

          <div style={{position:'relative', background:'#fff', borderRadius:18,
            border:`1px solid ${nombreP>0.5?'#0085FF':'#E2E8F0'}`, padding:'26px 30px 30px',
            boxShadow:'0 24px 60px rgba(15,23,42,0.10)'}}>

            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <span className="f-plex" style={{fontSize:13, fontWeight:700, letterSpacing:'2px',
                color: nombreP>0.5 ? '#0085FF' : '#94A3B8'}}>
                {nombreP>0.5 ? 'ESCANDALLO' : 'TE CUESTA…'}
              </span>
              {nombreP>0.5 && <StatusChip label="Paella para 8" color="primary" start={T.nombre+0.3} t={t}/>}
            </div>

            {/* la incógnita */}
            <div className="f-mono" style={{marginTop:14, fontSize:70, fontWeight:700, lineHeight:1,
              color: nombreP>0.5 ? '#0F172A' : '#CBD5E1',
              transform:`scale(${1+0.03*exactoPulse})`, transformOrigin:'left center'}}>
              {nombreP>0.5 ? '47,20 €' : '??,?? €'}
            </div>

            {/* chips que caen dentro */}
            <div style={{marginTop:22, display:'flex', flexWrap:'wrap', gap:10, minHeight:76}}>
              {CHIPS.map((c,i)=>{
                const p = pr(c.s, 0.5); if (p<=0) return null;
                const e = Easing.easeOutBack(p);
                return (
                  <span key={i} className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:7,
                    padding:'8px 14px', borderRadius:100, fontSize:16, fontWeight:600,
                    background: c.tuyo ? 'rgba(251,140,0,0.10)' : 'rgba(0,133,255,0.08)',
                    border:`1px solid ${c.tuyo ? 'rgba(251,140,0,0.32)' : 'rgba(0,133,255,0.22)'}`,
                    color: c.tuyo ? '#C2410C' : '#0369A1',
                    opacity:clamp(p*1.4,0,1),
                    transform:`translateY(${(1-e)*-22}px) scale(${lerp(0.8,1,e)})`}}>
                    {c.tuyo && <span style={{fontSize:12}}>✎</span>}{c.n}
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {/* ===== Rótulo: qué decide ese número ===== */}
      {(()=>{
        const p = pr(T.decide, 0.6), out = pr(T.nadie, 0.5);
        if (p<=0 || out>=1) return null;
        return (
          <div style={{position:'absolute', left:1010, top:790, width:620, opacity:p*(1-out),
            transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
            <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#64748B'}}>
              Es el número que decide si <span style={{color:'#0F172A', fontWeight:700}}>ganas</span> o solo mueves dinero.
            </span>
          </div>
        );
      })()}

      {/* ===== La Única Cosa (1/3 — promesa) ===== */}
      {promE > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:860, textAlign:'center',
          opacity:clamp(pr(T.promesa,0.5)*1.3,0,1), transform:`translateY(${(1-promE)*14}px)`}}>
          <div className="f-plex" style={{fontSize:34, 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:26}}>
        Vamos a montar uno. <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES01 });