// =============================================
// Mini-Galerie auf der Landingpage
// Diese Datei hebt immer ein Bild hervor und
// erlaubt Navigation mit Pfeilen/Tastatur.
// =============================================

// Elemente aus dem DOM lesen.
const prevBtn = document.querySelector('.arrow--prev');
const nextBtn = document.querySelector('.arrow--next');
const items = Array.from(document.querySelectorAll('.gallery__item'));
let activeIndex = 0;

// Aktualisiert die Darstellung aller Bilder:
// - aktives Bild ist klar sichtbar
// - inaktive Bilder sind abgeblendet
function updateGallery() {
  items.forEach((item, i) => {
    item.style.opacity = i === activeIndex ? '1' : '0.35';
    item.style.transform = i === activeIndex ? 'scale(1)' : 'scale(0.95)';
  });
}

// Ein Schritt nach rechts.
function showNext() {
  if (!items.length) return;
  activeIndex = (activeIndex + 1) % items.length;
  updateGallery();
}

// Ein Schritt nach links.
function showPrev() {
  if (!items.length) return;
  activeIndex = (activeIndex - 1 + items.length) % items.length;
  updateGallery();
}

// Event-Handler nur registrieren, wenn die Buttons existieren.
if (nextBtn) nextBtn.addEventListener('click', showNext);
if (prevBtn) prevBtn.addEventListener('click', showPrev);

// Tastatursteuerung fuer bessere Bedienbarkeit.
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') {
    showNext();
  }
  if (event.key === 'ArrowLeft') {
    showPrev();
  }
});

// Initialen Zustand einmal setzen.
updateGallery();