/* global React, TopBar, Header, Footer, FooterCTA */
const { useEffect, useState, useCallback } = React;

const BOOKING_URL = "/app";

/* Bilder aus dem assets-Ordner. Dateinamen + Alt-Tags sind keyword-angereichert
   (Tischtennis, Ding Dong Ping Pong, Prenzlauer Berg, Berlin, Kulturbrauerei).
   Das Alt-Tag dient zugleich als Bildunterschrift in der Lightbox. */
const IMAGES = [
  {
    src: "assets/tischtennis-spielen-ballroboter-ding-dong-ping-pong-prenzlauer-berg-berlin.webp",
    alt: "Spielerin trainiert am Ballroboter bei Ding Dong Ping Pong – Tischtennis in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/tischtennis-tisch-donic-ding-dong-ping-pong-kulturbrauerei-berlin.webp",
    alt: "Donic-Tischtennistisch im Spielraum von Ding Dong Ping Pong an der Kulturbrauerei in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/tischtennis-ballroboter-power-pong-ding-dong-ping-pong-prenzlauer-berg.webp",
    alt: "Power-Pong-Ballroboter am Tischtennistisch bei Ding Dong Ping Pong an der Kulturbrauerei in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/tischtennis-tisch-schlaeger-ding-dong-ping-pong-prenzlauer-berg.webp",
    alt: "Tischtennistisch mit Schlägern und Neon-Logo bei Ding Dong Ping Pong in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/tischtennis-halle-app-anzeige-ding-dong-ping-pong-prenzlauer-berg.webp",
    alt: "Tischtennishalle mit App-Anzeige der Tisch-Verfügbarkeit bei Ding Dong Ping Pong in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/ding-dong-ping-pong-eingang-check-in-tischtennis-prenzlauer-berg.webp",
    alt: "Check-in und Neon-Schriftzug am Eingang von Ding Dong Ping Pong – Tischtennis in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/tischtennis-schlaeger-baelle-ding-dong-ping-pong-berlin.webp",
    alt: "Pinke Tischtennisschläger und Ding-Dong-Ping-Pong-Bälle – Tischtennis in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/ding-dong-ping-pong-tischtennisbaelle-prenzlauer-berg-berlin.webp",
    alt: "Ding-Dong-Ping-Pong-Tischtennisbälle im Korb am Ballroboter in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/discokugel-party-ding-dong-ping-pong-kulturbrauerei-prenzlauer-berg.webp",
    alt: "Discokugel über den Tischtennistischen von Ding Dong Ping Pong an der Kulturbrauerei in Prenzlauer Berg, Berlin"
  },
  {
    src: "assets/ding-dong-ping-pong-aussenansicht-danziger-strasse-prenzlauer-berg-berlin.webp",
    alt: "Außenansicht von Ding Dong Ping Pong an der Danziger Straße – Tischtennis an der Kulturbrauerei, Prenzlauer Berg Berlin"
  }
];

/* Lokales Dictionary (alle 10 Sprachen) — Sprache aus window.currentLang. */
const GAL = {
  de: {
    page_title: "Galerie – Ding Dong Ping Pong | Tischtennis Prenzlauer Berg Berlin",
    eyebrow: "Galerie",
    title_pre: "Tischtennis in", title_alt: "Prenzlauer Berg.",
    lede: "Ein Blick in unsere Tischtennis-Location an der Kulturbrauerei: Profi-Tische, Ballroboter und jede Menge Ding-Dong-Ping-Pong-Atmosphäre in Berlin. Tipp auf ein Bild, um es zu vergrößern.",
    close: "Schließen", prev: "Vorheriges Bild", next: "Nächstes Bild",
    cta: "Tisch buchen →"
  },
  en: {
    page_title: "Gallery – Ding Dong Ping Pong | Table Tennis Prenzlauer Berg Berlin",
    eyebrow: "Gallery",
    title_pre: "Table tennis in", title_alt: "Prenzlauer Berg.",
    lede: "A look inside our table tennis spot at the Kulturbrauerei: pro tables, a ball robot and plenty of Ding Dong Ping Pong vibes in Berlin. Tap an image to enlarge it.",
    close: "Close", prev: "Previous image", next: "Next image",
    cta: "Book a table →"
  },
  fr: {
    page_title: "Galerie – Ding Dong Ping Pong | Tennis de table Prenzlauer Berg Berlin",
    eyebrow: "Galerie",
    title_pre: "Tennis de table à", title_alt: "Prenzlauer Berg.",
    lede: "Un aperçu de notre salle de tennis de table à la Kulturbrauerei : tables pro, robot lanceur de balles et l'ambiance Ding Dong Ping Pong à Berlin. Touchez une image pour l'agrandir.",
    close: "Fermer", prev: "Image précédente", next: "Image suivante",
    cta: "Réserver une table →"
  },
  es: {
    page_title: "Galería – Ding Dong Ping Pong | Tenis de mesa Prenzlauer Berg Berlín",
    eyebrow: "Galería",
    title_pre: "Tenis de mesa en", title_alt: "Prenzlauer Berg.",
    lede: "Un vistazo a nuestro local de tenis de mesa en la Kulturbrauerei: mesas profesionales, robot lanzapelotas y mucho ambiente Ding Dong Ping Pong en Berlín. Toca una imagen para ampliarla.",
    close: "Cerrar", prev: "Imagen anterior", next: "Imagen siguiente",
    cta: "Reservar mesa →"
  },
  tr: {
    page_title: "Galeri – Ding Dong Ping Pong | Masa Tenisi Prenzlauer Berg Berlin",
    eyebrow: "Galeri",
    title_pre: "Masa tenisi:", title_alt: "Prenzlauer Berg.",
    lede: "Kulturbrauerei'deki masa tenisi mekânımıza bir bakış: profesyonel masalar, top robotu ve Berlin'de bol bol Ding Dong Ping Pong havası. Büyütmek için bir görsele dokun.",
    close: "Kapat", prev: "Önceki görsel", next: "Sonraki görsel",
    cta: "Masa ayırt →"
  },
  zh: {
    page_title: "图库 – Ding Dong Ping Pong | 乒乓球 Prenzlauer Berg 柏林",
    eyebrow: "图库",
    title_pre: "乒乓球在", title_alt: "Prenzlauer Berg。",
    lede: "一窥我们位于 Kulturbrauerei 的乒乓球场地：专业球桌、发球机器人，以及满满的柏林 Ding Dong Ping Pong 氛围。点按图片即可放大。",
    close: "关闭", prev: "上一张", next: "下一张",
    cta: "预订球桌 →"
  },
  pl: {
    page_title: "Galeria – Ding Dong Ping Pong | Tenis stołowy Prenzlauer Berg Berlin",
    eyebrow: "Galeria",
    title_pre: "Tenis stołowy w", title_alt: "Prenzlauer Berg.",
    lede: "Zajrzyj do naszego miejsca do tenisa stołowego przy Kulturbrauerei: profesjonalne stoły, robot do podawania piłek i mnóstwo klimatu Ding Dong Ping Pong w Berlinie. Dotknij zdjęcia, aby je powiększyć.",
    close: "Zamknij", prev: "Poprzednie zdjęcie", next: "Następne zdjęcie",
    cta: "Zarezerwuj stół →"
  },
  da: {
    page_title: "Galleri – Ding Dong Ping Pong | Bordtennis Prenzlauer Berg Berlin",
    eyebrow: "Galleri",
    title_pre: "Bordtennis i", title_alt: "Prenzlauer Berg.",
    lede: "Et kig ind i vores bordtennissted ved Kulturbrauerei: prof-borde, en boldrobot og masser af Ding Dong Ping Pong-stemning i Berlin. Tryk på et billede for at forstørre det.",
    close: "Luk", prev: "Forrige billede", next: "Næste billede",
    cta: "Book et bord →"
  },
  it: {
    page_title: "Galleria – Ding Dong Ping Pong | Ping pong Prenzlauer Berg Berlino",
    eyebrow: "Galleria",
    title_pre: "Ping pong a", title_alt: "Prenzlauer Berg.",
    lede: "Uno sguardo al nostro spazio ping pong alla Kulturbrauerei: tavoli professionali, robot lanciapalline e tanta atmosfera Ding Dong Ping Pong a Berlino. Tocca un'immagine per ingrandirla.",
    close: "Chiudi", prev: "Immagine precedente", next: "Immagine successiva",
    cta: "Prenota un tavolo →"
  },
  nl: {
    page_title: "Galerij – Ding Dong Ping Pong | Tafeltennis Prenzlauer Berg Berlijn",
    eyebrow: "Galerij",
    title_pre: "Tafeltennis in", title_alt: "Prenzlauer Berg.",
    lede: "Een kijkje in onze tafeltennislocatie bij de Kulturbrauerei: proftafels, een ballenrobot en volop Ding Dong Ping Pong-sfeer in Berlijn. Tik op een afbeelding om te vergroten.",
    close: "Sluiten", prev: "Vorige afbeelding", next: "Volgende afbeelding",
    cta: "Tafel boeken →"
  }
};

function Lightbox({ d, index, onClose, onPrev, onNext }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") onPrev();
      else if (e.key === "ArrowRight") onNext();
    };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose, onPrev, onNext]);

  const img = IMAGES[index];
  return (
    <div className="gx-lightbox" role="dialog" aria-modal="true" aria-label={img.alt} onClick={onClose}>
      <button className="gx-close" type="button" aria-label={d.close} onClick={onClose}>×</button>
      <button className="gx-arrow gx-prev" type="button" aria-label={d.prev}
        onClick={(e) => { e.stopPropagation(); onPrev(); }}>‹</button>
      <figure className="gx-figure" onClick={(e) => e.stopPropagation()}>
        <img src={img.src} alt={img.alt} />
        <figcaption>{img.alt}<span className="gx-counter">{index + 1} / {IMAGES.length}</span></figcaption>
      </figure>
      <button className="gx-arrow gx-next" type="button" aria-label={d.next}
        onClick={(e) => { e.stopPropagation(); onNext(); }}>›</button>
    </div>);
}

function GalleryGrid({ d, onOpen }) {
  return (
    <section className="section">
      <div className="section-eyebrow">{d.eyebrow}</div>
      <h2>{d.title_pre} <span className="alt">{d.title_alt}</span></h2>
      <p className="lede gx-lede">{d.lede}</p>
      <div className="gx-grid">
        {IMAGES.map((img, i) =>
          <button key={img.src} className="gx-tile" type="button"
            onClick={() => onOpen(i)} aria-label={img.alt}>
            <img src={img.src} alt={img.alt} loading="lazy" width="900" height="675" />
          </button>
        )}
      </div>
    </section>);
}

function App() {
  const lang = window.currentLang || "de";
  const d = GAL[lang] || GAL.de;
  const [open, setOpen] = useState(-1);

  useEffect(() => { document.title = d.page_title; }, [d.page_title]);

  const close = useCallback(() => setOpen(-1), []);
  const prev = useCallback(() => setOpen((i) => (i - 1 + IMAGES.length) % IMAGES.length), []);
  const next = useCallback(() => setOpen((i) => (i + 1) % IMAGES.length), []);

  return (
    <>
      <TopBar />
      <Header active="gallery" />
      <GalleryGrid d={d} onOpen={setOpen} />
      {open >= 0 ? <Lightbox d={d} index={open} onClose={close} onPrev={prev} onNext={next} /> : null}
      <FooterCTA cta={d.cta} ctaHref={BOOKING_URL} />
      <Footer />
    </>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);