/* ---------- GALLERY + CLOSING ---------- */

/* ============= GALERÍA ============= */
// Editorial layout — pre-baked cell sizes for visual rhythm.
const GALLERY_LAYOUT = [
  // col-span / row-span (12-col grid). 17 entries.
  { c: "md:col-span-6 md:row-span-2 aspect-[4/5] md:aspect-auto" }, // 1 — hero
  { c: "md:col-span-3 aspect-square" },                              // 2
  { c: "md:col-span-3 aspect-square" },                              // 3
  { c: "md:col-span-3 aspect-[3/4]" },                               // 4
  { c: "md:col-span-3 aspect-[3/4]" },                               // 5
  { c: "md:col-span-4 aspect-[4/3]" },                               // 6
  { c: "md:col-span-4 aspect-[4/3]" },                               // 7
  { c: "md:col-span-4 aspect-[4/3]" },                               // 8
  { c: "md:col-span-6 md:row-span-2 aspect-[4/5] md:aspect-auto" }, // 9 — hero
  { c: "md:col-span-3 aspect-square" },                              // 10
  { c: "md:col-span-3 aspect-square" },                              // 11
  { c: "md:col-span-3 aspect-[3/4]" },                               // 12
  { c: "md:col-span-3 aspect-[3/4]" },                               // 13
  { c: "md:col-span-4 aspect-[4/3]" },                               // 14
  { c: "md:col-span-4 aspect-[4/3]" },                               // 15
  { c: "md:col-span-4 aspect-[4/3]" },                               // 16
  { c: "md:col-span-12 aspect-[21/9]" },                             // 17 — wide finale
];

function Gallery() {
  const [open, setOpen] = useState(-1);

  // keyboard nav inside lightbox
  useEffect(() => {
    if (open < 0) return;
    const onKey = (e) => {
      if (e.key === "Escape")     setOpen(-1);
      if (e.key === "ArrowRight") setOpen(o => (o + 1) % window.PHOTOS.length);
      if (e.key === "ArrowLeft")  setOpen(o => (o - 1 + window.PHOTOS.length) % window.PHOTOS.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <section id="galeria" className="relative bg-coal py-24 md:py-32 overflow-hidden">
      <SectionHeader
        kicker="07 · La galería"
        title={<>17 RECUERDOS DE UNA<br/><span className="gold-text">TEMPORADA CAMPEONA</span></>}
        sub="La Final Four en imágenes. Una por cada victoria de la liga regular menos dos, y por todo lo que aún queda por recordar."
      />

      <div className="max-w-[1500px] mx-auto px-5 md:px-10 mt-12 md:mt-16">
        <div className="grid grid-cols-2 md:grid-cols-12 gap-3 md:gap-4">
          {window.PHOTOS.map((p, i) => {
            const layout = GALLERY_LAYOUT[i] || { c: "md:col-span-3 aspect-square" };
            return (
              <button
                key={p.src}
                onClick={() => setOpen(i)}
                className={`gal-tile reveal pedestal ${layout.c} relative group focus:outline-none focus:ring-2 focus:ring-gold`}
              >
                <img src={p.src} alt={p.alt} loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
                <div className="img-darken absolute inset-0 opacity-90 group-hover:opacity-60 transition" />
                <div className="absolute top-3 left-3 font-mono text-[10px] tracking-[.3em] text-bone/80">{String(i + 1).padStart(2, "0")}</div>
                <div className="absolute bottom-3 left-3 right-3 flex items-end justify-between gap-3">
                  <div className="font-cond text-bone tracking-[.1em] text-sm md:text-base">FINAL FOUR · 25–26</div>
                  <div className="font-mono text-[10px] text-gold tracking-[.3em]">↗ Ampliar</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Lightbox */}
      {open >= 0 && (
        <div className="fixed inset-0 z-[100] bg-ink/95 backdrop-blur flex flex-col" onClick={() => setOpen(-1)}>
          <div className="flex items-center justify-between px-5 py-4 border-b border-bone/10 font-mono text-[11px] tracking-[.3em] uppercase text-bone/60">
            <span>{String(open + 1).padStart(2, "0")} / {String(window.PHOTOS.length).padStart(2, "0")} · Final Four 25–26</span>
            <button onClick={(e) => { e.stopPropagation(); setOpen(-1); }} className="hover:text-gold">CERRAR ✕</button>
          </div>
          <div className="flex-1 relative flex items-center justify-center p-4 md:p-10" onClick={(e) => e.stopPropagation()}>
            <button
              aria-label="Anterior"
              onClick={() => setOpen(o => (o - 1 + window.PHOTOS.length) % window.PHOTOS.length)}
              className="absolute left-3 md:left-6 top-1/2 -translate-y-1/2 w-12 h-12 border border-bone/20 hover:border-gold hover:text-gold text-bone/70 font-mono text-lg"
            >‹</button>
            <img src={window.PHOTOS[open].src} alt={window.PHOTOS[open].alt} className="max-h-full max-w-full object-contain shadow-[0_30px_120px_rgba(216,168,63,0.18)]" />
            <button
              aria-label="Siguiente"
              onClick={() => setOpen(o => (o + 1) % window.PHOTOS.length)}
              className="absolute right-3 md:right-6 top-1/2 -translate-y-1/2 w-12 h-12 border border-bone/20 hover:border-gold hover:text-gold text-bone/70 font-mono text-lg"
            >›</button>
          </div>
        </div>
      )}
    </section>
  );
}

/* ============= CIERRE + FOOTER ============= */
function Cierre() {
  return (
    <section id="cierre" className="relative bg-ink overflow-hidden">
      <div className="relative">
        {/* Bg owl */}
        <div className="absolute inset-0 flex items-center justify-center opacity-20">
          <img src="public/buho-copa.png" alt="" className="w-[120vw] max-w-[1000px] object-contain invert" />
        </div>
        <div className="absolute inset-0 bg-gradient-to-b from-ink via-ink/70 to-ink" />

        <div className="relative max-w-[1200px] mx-auto px-5 md:px-10 py-32 md:py-48 text-center">
          <div className="font-mono text-[11px] md:text-[12px] tracking-[.4em] uppercase text-gold">◆ Edición especial ◆</div>
          <h2 className="mt-8 font-poster leading-[0.9] tracking-tight">
            <span className="block text-bone text-[14vw] md:text-[10vw] lg:text-[140px]">NO FUE PERFECTA.</span>
            <span className="block ember-text text-[16vw] md:text-[11vw] lg:text-[160px] mt-2">FUE CAMPEONA.</span>
          </h2>

          <div className="mt-14 max-w-xl mx-auto">
            <div className="hairline" />
            <div className="mt-6 font-cond gold-text text-3xl md:text-5xl tracking-[.15em]">BERANGOKO HONTZURIAK</div>
            <div className="mt-2 font-mono text-[12px] md:text-[13px] tracking-[.3em] uppercase text-bone/60">Txapeldunak · 2025—2026</div>
            <div className="mt-6 hairline" />
          </div>

          <div className="mt-12 flex items-center justify-center gap-6">
            <img src="public/logo.png" className="h-14 w-14 invert opacity-80" alt="" />
          </div>
        </div>
      </div>

      <footer className="relative border-t border-bone/10 bg-coal">
        <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-10 grid md:grid-cols-3 gap-8 font-mono text-[11px] tracking-[.25em] uppercase text-bone/40">
          <div>
            <div className="text-bone/70">Infernutik Hontzuriak</div>
            <div className="mt-1">Web conmemorativa · 25–26</div>
          </div>
          <div className="md:text-center">
            <div className="text-bone/70">Final Four</div>
            <div className="mt-1">Urbi · Basauri · 09–10 Mayo 2026</div>
          </div>
          <div className="md:text-right">
            <div className="text-bone/70">Senior 2ª Especial · FViB</div>
            <div className="mt-1">Grupo Único · Txapeldunak</div>
          </div>
        </div>
        <div className="border-t border-bone/5 py-5 text-center font-mono text-[10px] tracking-[.4em] uppercase text-bone/30">
          ◆ Hecho con orgullo · Por y para el equipo ◆
        </div>
      </footer>
    </section>
  );
}

window.Gallery = Gallery;
window.Cierre = Cierre;