/* ============================================================
   3DAX — "En movimiento" — reserved slots for animated assets
   ============================================================ */
function Showcase(){
  return (
    <section className="showcase section grain" id="movimiento" data-screen-label="En movimiento">
      <div className="blob" style={{ width:460, height:460, top:"10%", right:"-6%", background:"rgba(240,72,154,.12)" }} />
      <div className="wrap showcase__grid">
        <div className="showcase__copy">
          <Reveal>
            <div className="eyebrow">Próximamente · en movimiento</div>
            <h2 className="display showcase__title">Cada pieza,<br/>girando en <em>360°</em>.</h2>
          </Reveal>
          <Reveal delay={120}>
            <p className="lead">
              Estamos grabando cada deckbox en vídeo para que veas todas sus caras antes de
              comprar. Estos huecos están reservados para tus loops animados — cuando los
              tengas listos, los soltamos aquí y en cada ficha de producto.
            </p>
            <ul className="showcase__list">
              <li>Loop 360° en el hero y en la historia</li>
              <li>Mini-vídeo en cada tarjeta del catálogo</li>
              <li>Animación de apertura tapa · caja · base</li>
            </ul>
          </Reveal>
        </div>
        <Reveal delay={80} className="showcase__slots">
          <AnimSlot label="loop 360° principal" sub="suelta tu vídeo aquí" ratio={0.82} />
          <div className="showcase__mini">
            <AnimSlot label="apertura" sub="loop corto" ratio={1.1} />
            <AnimSlot label="detalle" sub="zoom macro" ratio={1.1} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.Showcase = Showcase;