// Galería — bento masonry sin pretensión
function Gallery() {
  return (
    <section id="galeria" className="py-20 lg:py-28 bg-bone-200">
      <div className="max-w-[1400px] mx-auto px-5 lg:px-10">

        <div className="flex flex-wrap items-end justify-between gap-6 mb-10 lg:mb-12">
          <div className="reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60 mb-3">
              05 — GALERÍA
            </div>
            <h2 className="font-display text-[clamp(44px,7vw,108px)] text-ink-900">
              Archivo<br/>
              <span className="text-fire-500">de la cuadra.</span>
            </h2>
          </div>
          <p className="reveal max-w-[34ch] text-[14.5px] leading-relaxed text-ink-900/85">
            Documentado por la propia comunidad. Sin productor, sin filtro,
            sin equipo de marketing.
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 auto-rows-[140px] md:auto-rows-[180px] gap-2 lg:gap-3">
          {GALLERY.map((g, i) => (
            <PhImage
              key={i}
              id={'gallery-' + i}
              className={'reveal border-2 border-ink-900 ' + g.span + ' ' + (g.variant || '')}
              label={g.label}
            />
          ))}
        </div>

        <div className="mt-8 flex items-center justify-between text-[11px] font-mono tracking-[0.18em] uppercase text-ink-900/70">
          <span>· archivo abierto · contribuciones bienvenidas</span>
          <a href="https://www.instagram.com/originatural.flowfam/" target="_blank" rel="noopener" className="inline-flex items-center gap-2 text-ink-900 hover:text-electric-500 transition">
            <Icon name="instagram" size={13} />
            @originatural.flowfam
          </a>
        </div>

      </div>
    </section>
  );
}

window.Gallery = Gallery;