// === Escena 06 — Recapitulación + eco ===
// Tres ideas con icono, sincronizadas con la voz, y cierre en eco: la última frase rima con la
// promesa de la escena 01 (bookend). La Única Cosa (3/3).
// Beats anclados a la frase del guion (audio/guion.json #6).
function EscenaES06({ t }){
  const T = {
    intro:0.3,   // "Quédate con tres cosas" → título
    uno:2.8,     // "en un escandallo cabe todo" → idea 1
    unoDet:6.3,  // "también tus horas y tu gas" → detalle de la 1
    dos:9.3,     // "cada uno guarda el precio que pagaste tú" → idea 2
    tres:15.9,   // "los precios de venta van en el catálogo" → idea 3
    sabes:21.5,  // "Sabes lo que te cuesta cada plato" → las tres se atenúan
    hoy:23.6,    // "El de hoy, y el de marzo del año pasado"
    eco:26.6,    // "Un escandallo es una foto de lo que te cuesta" → eco (3/3)
    eco2:29.4,   // "Y puedes hacer todas las que quieras" → remate
    logo:30.3,   // (aún hablando el remate) → el logo aterriza y deja el fotograma de reposo
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const IDEAS = [
    { s:T.uno,  col:'#FB8C00', tit:'Cabe todo',            sub:'No solo lo que compras: también tus horas y tu gas.',
      icon:(<><rect x="4" y="6" width="16" height="14" rx="3" fill="#FB8C00"/><path d="M8 11h8M8 15h5" stroke="#fff" strokeWidth="2" strokeLinecap="round"/></>) },
    { s:T.dos,  col:'#0085FF', tit:'Tu precio, tu día',    sub:'Cada escandallo guarda el que pagaste. Y ahí se queda.',
      icon:(<><rect x="5" y="10.5" width="14" height="10" rx="2.5" fill="#0085FF"/><path d="M8.2 10.5V8a3.8 3.8 0 1 1 7.6 0v2.5" stroke="#0085FF" strokeWidth="2.1" fill="none"/></>) },
    { s:T.tres, col:'#10B981', tit:'Un precio por cliente', sub:'Los precios de venta viven en el catálogo.',
      icon:(<><circle cx="9" cy="9" r="3.4" fill="#10B981"/><circle cx="16" cy="11" r="2.6" fill="#10B981" opacity="0.6"/><path d="M3.5 19c0-3 2.6-4.6 5.5-4.6s5.5 1.6 5.5 4.6" fill="#10B981"/></>) },
  ];

  const dim = pr(T.sabes, 0.8);
  const sabesP = pr(T.sabes, 0.7);
  const hoyP = pr(T.hoy, 0.6);
  const ecoP = pr(T.eco, 0.9), ecoE = Easing.easeOutCubic(ecoP);
  const eco2P = pr(T.eco2, 0.7);
  const logoP = pr(T.logo, 0.7), logoE = Easing.easeOutCubic(logoP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="ESCANDALLOS · QUÉDATE CON ESTO"
        title={<span>Tres cosas. <span className="grad-text">Y una sola idea.</span></span>}/>

      {/* ===== Las tres ideas ===== */}
      {IDEAS.map((it,i)=>{
        const p = pr(it.s, 0.7); if (p<=0) return null;
        const e = Easing.easeOutCubic(p);
        const det = i===0 ? pr(T.unoDet, 0.6) : 1;
        const glow = Math.sin(clamp((t-it.s)/1.3,0,1)*Math.PI);
        return (
          <div key={i} style={{position:'absolute', left:190+i*530, top:300, width:470,
            opacity:clamp(p*1.3,0,1)*lerp(1,0.4,dim),
            transform:`translateY(${(1-e)*26}px)`}}>
            <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
              boxShadow:`0 ${16+10*glow*(1-dim)}px ${40+16*glow*(1-dim)}px rgba(15,23,42,${0.07+0.05*glow*(1-dim)})`,
              padding:'28px 28px 30px', height:270}}>
              <div style={{width:56, height:56, borderRadius:15, background:`${it.col}18`,
                display:'flex', alignItems:'center', justifyContent:'center'}}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">{it.icon}</svg>
              </div>
              <div className="f-plex" style={{marginTop:20, fontSize:15, fontWeight:700, letterSpacing:'1.6px', color:it.col}}>
                {['UNO','DOS','TRES'][i]}
              </div>
              <div className="f-plex" style={{marginTop:6, fontSize:28, fontWeight:800, color:'#0F172A'}}>{it.tit}</div>
              <div className="f-plex" style={{marginTop:12, fontSize:18, lineHeight:1.45, color:'#64748B', opacity:det}}>
                {it.sub}
              </div>
            </div>
          </div>
        );
      })}

      {/* ===== "Sabes lo que te cuesta cada plato" ===== */}
      {sabesP > 0 && ecoP < 0.5 && (
        <div style={{position:'absolute', left:0, right:0, top:660, textAlign:'center',
          opacity:clamp(sabesP*1.3,0,1)*(1-clamp(ecoP/0.5,0,1)),
          transform:`translateY(${(1-Easing.easeOutCubic(sabesP))*14}px)`}}>
          <div className="f-plex" style={{fontSize:34, fontWeight:700, color:'#0F172A'}}>
            Sabes lo que te cuesta cada plato.
          </div>
          {hoyP > 0 && (
            <div className="f-plex" style={{marginTop:10, fontSize:26, fontWeight:600, color:'#64748B', opacity:hoyP}}>
              El de hoy. Y el de marzo del año pasado.
            </div>
          )}
        </div>
      )}

      {/* ===== Eco (3/3) ===== */}
      {ecoP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:680, textAlign:'center',
          opacity:clamp(ecoP*1.3,0,1), transform:`translateY(${(1-ecoE)*18}px)`}}>
          <div className="f-plex" style={{fontSize:46, fontWeight:800, letterSpacing:'-0.025em', color:'#0F172A', lineHeight:1.25}}>
            Un escandallo es una foto de lo que te cuesta.
          </div>
          {eco2P > 0 && (
            <div className="f-plex" style={{marginTop:16, fontSize:46, fontWeight:800, letterSpacing:'-0.025em',
              color:'#0085FF', opacity:clamp(eco2P*1.3,0,1),
              transform:`translateY(${(1-Easing.easeOutCubic(eco2P))*12}px)`}}>
              Y puedes hacer todas las que quieras.
            </div>
          )}
        </div>
      )}

      {/* ===== Logo — es el fotograma de reposo: aterriza mientras la voz remata y ahí se queda ===== */}
      {logoP > 0 && (
        <div style={{position:'absolute', left:0, right:0, bottom:56, display:'flex', justifyContent:'center',
          opacity:logoP, transform:`translateY(${(1-logoE)*10}px)`}}>
          <DinaupLogo size={30}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaES06 });