/* Galería — "Así se vivió" Latin Music Week 2025.
   Fotos de las notas de Billboard AR; cada foto lleva a su nota.
   Mosaico responsive (carrusel horizontal en mobile). */

const GALLERY = [
  { img: "assets/photos/note-01.jpg", cap: "Shows, premios y fiestas", href: "https://billboard.ar/industria/latin-music-week-2025-hows-premios-conversaciones-fiestas-y-todo-el-sabor-reunido-en-miami/" },
  { img: "assets/photos/note-02.jpg", cap: "Kali Uchis", href: "https://billboard.ar/global/kali-uchis-recuerda-las-primeras-luchas-de-su-carrera-en-la-latin-music-week-2025-realmente-empece-de-abajo/" },
  { img: "assets/photos/note-03.jpg", cap: "Soledad y Silvestre Dangond", href: "https://billboard.ar/industria/soledad-y-silvestre-dangond-hablan-de-identidad-legado-y-futuro-de-musica-folclorica-en-latin-music-week-2025/" },
  { img: "assets/photos/note-04.jpg", cap: "Daddy Yankee", href: "https://billboard.ar/espanol/dy-vuelve-al-escenario-en-la-semana-de-la-musica-latina-de-billboard/" },
  { img: "assets/photos/note-05.jpg", cap: "Ela Taubert", href: "https://billboard.ar/lanzamientos/ela-taubert-lanza-quiero-olvidarte-respuesta-1-y-se-suma-a-billboard-latin-music-week/" },
  { img: "assets/photos/note-06.jpg", cap: "Carín León, Kapo y más", href: "https://billboard.ar/espanol/carin-leon-kapo-neton-vega-laura-pausini-myke-towers-y-mas-a-billboard-latin-music-week-2025/" },
  { img: "assets/photos/note-07.jpg", cap: "Thalía y María Becerra", href: "https://billboard.ar/partner-content/thalia-y-maria-becerra-reflexionan-sobre-la-toxicidad-en-redes-sociales-en-la-billboard-latin-music-week/" },
  { img: "assets/photos/note-08.jpg", cap: "Lo mejor del primer día", href: "https://billboard.ar/partner-content/lo-mejor-del-primer-dia-en-billboard-latin-music-week/" },
  { img: "assets/photos/note-09.jpg", cap: "Shakira", href: "https://billboard.ar/industria/hits-dont-lie-shakira-cerro-la-tercera-jornada-de-billboard-latin-music-week-2/" },
  { img: "assets/photos/note-10.jpg", cap: "El escenario de la LMW", href: "https://billboard.ar/partner-content/billboard-latin-music-week-2023-presenta-el-calendario-completo-con-shakira-peso-pluma-maria-becerra-y-mas/" },
];

function Gallery() {
  return (
    <Section id="galeria" tone="dark">
      <Reveal>
        <SectionHeading
          size="lg"
          eyebrow="Archivo · Miami"
          title={<>Así se vivió <span className="bb-gradient-text">Latin Music Week 2025</span></>}
        />
        <p style={{ font: "var(--text-body)", color: "var(--text-on-dark-muted)", marginTop: "18px", maxWidth: "56ch" }}>
          Artistas, escenario, red carpet y las conversaciones que marcaron la semana. Tocá cada foto para leer la nota completa en Billboard AR.
        </p>
      </Reveal>

      <p className="kit-gal-hint bb-eyebrow" style={{ display: "none", color: "var(--text-on-dark-faint)", marginTop: "clamp(1.5rem, 3vw, 2rem)", marginBottom: "10px" }}>Deslizá →</p>

      <div className="kit-gallery" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 250px), 1fr))", gap: "clamp(0.75rem, 1.5vw, 1.25rem)", marginTop: "clamp(2rem, 4vw, 3rem)" }}>
        {GALLERY.map((item, i) => (
          <Reveal key={item.img} delay={(i % 4) * 70}>
            <a
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              className="kit-gitem"
              aria-label={"Leer la nota: " + item.cap}
              style={{ position: "relative", display: "block", height: "clamp(240px, 40vh, 320px)", border: "1px solid var(--border-on-dark)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface-card-dark)" }}
            >
              <img
                src={item.img}
                alt={"Latin Music Week 2025 — " + item.cap}
                loading="lazy"
                onError={(e) => { e.target.style.display = "none"; }}
                className="kit-gimg"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 500ms var(--ease-out)" }}
              />
              <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 42%, rgba(7,8,15,0.82))", pointerEvents: "none" }} />
              <div style={{ position: "absolute", left: "16px", right: "16px", bottom: "14px" }}>
                <div className="bb-display" style={{ fontSize: "1.15rem", lineHeight: 1.1, color: "var(--white)", textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}>{item.cap}</div>
                <div className="bb-eyebrow" style={{ marginTop: "6px", color: "var(--coral)", letterSpacing: "0.12em" }}>Leer la nota →</div>
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

window.Gallery = Gallery;