// Gallery.jsx — galeria de 12 imagens
// FOTOS: substitua images/galeria-1.jpg até images/galeria-12.jpg pelos resultados reais
function Gallery() {
  const slots = Array.from({ length: 12 }, (_, i) => i + 1);
  return (
    <section className="section" id="galeria">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow center reveal">Galeria de resultados</span>
          <h2 className="reveal" data-d="1">Resultados que valorizam sua beleza.</h2>
          <p className="reveal" data-d="2">Cada pele possui características únicas. Por isso cada atendimento é pensado de forma personalizada.</p>
        </div>
        <div className="gallery-grid">
          {slots.map((n, i) => (
            <div className="reveal" data-d={(i % 3) + 1} key={n}>
              <image-slot
                id={`gal-${n}`}
                shape="rounded"
                radius="3"
                fit="cover"
                src={`images/galeria-${n}.jpg`}
                placeholder={`Resultado ${n}`}
              ></image-slot>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Gallery });