// =============================================
// Galerie-Karussell (Startseite)
// Diese Datei steuert die Foto-Galerie mit Pfeilen.
// =============================================

// Wichtige Elemente aus dem HTML holen.
const carouselTrack = document.querySelector('.gallery__track');
const prevArrow = document.querySelector('.gallery__arrow--prev');
const nextArrow = document.querySelector('.gallery__arrow--next');

// Nur ausfuehren, wenn die Galerie auf der Seite vorhanden ist.
if (carouselTrack) {
  // Alle einzelnen Karten/Bilder im Track sammeln.
  const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));

  // Auf Mobile zeigen wir 1 Bild, auf Desktop 3 Bilder pro "Seite".
  const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
  let itemsPerPage = getItemsPerPage();
  const pageCount = Math.ceil(items.length / itemsPerPage);
  let activePage = 0;

  // Scrollt den Track auf eine bestimmte Seite.
  function scrollToPage(page) {
    activePage = page;
    const pageWidth = carouselTrack.clientWidth;
    carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
  }

  // Geht zur naechsten Seite (mit Wrap-around am Ende).
  function showNext() {
    activePage = (activePage + 1) % pageCount;
    scrollToPage(activePage);
  }

  // Geht zur vorherigen Seite (mit Wrap-around zum Ende).
  function showPrev() {
    activePage = (activePage - 1 + pageCount) % pageCount;
    scrollToPage(activePage);
  }

  // Wenn sich bei Resize die Karten-Anzahl pro Seite aendert,
  // laden wir die Seite neu, damit Layout und Seitenzahl wieder stimmen.
  function refreshCarousel() {
    const responsiveItemsPerPage = getItemsPerPage();
    if (responsiveItemsPerPage !== itemsPerPage) {
      itemsPerPage = responsiveItemsPerPage;
      window.location.reload();
    }
  }

  // Klick-Steuerung der Pfeile.
  if (nextArrow) nextArrow.addEventListener('click', showNext);
  if (prevArrow) prevArrow.addEventListener('click', showPrev);

  // Tastatur-Support fuer Barrierefreiheit.
  document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowRight') {
      showNext();
    }
    if (event.key === 'ArrowLeft') {
      showPrev();
    }
  });

  // Reagiert auf Bildschirmgroessen-Aenderungen.
  window.addEventListener('resize', () => {
    refreshCarousel();
    scrollToPage(activePage);
  });
}