// Mobiles Menü
const toggle = document.querySelector('.nav-toggle');
const menu   = document.querySelector('.nav-menu');
if (toggle && menu) {
  toggle.addEventListener('click', () => {
    menu.classList.toggle('open');
  });
  // Schließen beim Klick auf einen Link
  menu.querySelectorAll('a').forEach(a => {
    a.addEventListener('click', () => menu.classList.remove('open'));
  });
}

// Slide-Box (Bildkarussell)
document.querySelectorAll('.slider').forEach(slider => {
  const track = slider.querySelector('.slider-track');
  const prev  = slider.querySelector('.slider-prev');
  const next  = slider.querySelector('.slider-next');
  const step  = () => {
    const slide = track.querySelector('.slider-slide');
    if (!slide) return slider.clientWidth * 0.8;
    const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
    return slide.getBoundingClientRect().width + gap;
  };
  if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
  if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
});

// Belegungsplan ein-/ausblenden (externes webplanner-iframe erst bei Klick nachladen)
const belBtn   = document.getElementById('belegungsplan-btn');
const belFrame = document.getElementById('belegungsplan-frame');
if (belBtn && belFrame) {
  const labelClosed = belBtn.textContent.trim();
  let loaded = false;
  belBtn.addEventListener('click', () => {
    const willShow = belFrame.hidden;
    if (willShow && !loaded) {
      const iframe = document.createElement('iframe');
      iframe.width = '100%';
      iframe.height = '225';
      iframe.frameBorder = '0';
      belFrame.appendChild(iframe);
      iframe.src = belFrame.dataset.src;
      loaded = true;
    }
    belFrame.hidden = !willShow;
    belBtn.setAttribute('aria-expanded', String(willShow));
    belBtn.textContent = willShow ? 'Belegungsplan ausblenden' : labelClosed;
  });
}

// Lightbox für Bildergalerien (eine Lightbox, beliebig viele Galerien pro Seite)
const lightbox = document.querySelector('.lightbox');
if (lightbox) {
  const imgEl    = lightbox.querySelector('.lightbox-img');
  const closeBtn = lightbox.querySelector('.lightbox-close');
  const prevBtn  = lightbox.querySelector('.lightbox-prev');
  const nextBtn  = lightbox.querySelector('.lightbox-next');
  let images  = [];
  let current = 0;

  const show = i => {
    current = (i + images.length) % images.length;
    imgEl.src = images[current].src;
    imgEl.alt = images[current].alt;
  };
  const open = (gallery, i) => {
    images = Array.from(gallery.querySelectorAll('.lightbox-trigger'))
      .map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
    show(i);
    lightbox.hidden = false;
    document.body.style.overflow = 'hidden';
  };
  const close = () => {
    lightbox.hidden = true;
    document.body.style.overflow = '';
  };

  document.querySelectorAll('.lightbox-gallery').forEach(gallery => {
    Array.from(gallery.querySelectorAll('.lightbox-trigger')).forEach((a, i) => {
      a.addEventListener('click', e => { e.preventDefault(); open(gallery, i); });
    });
  });
  closeBtn.addEventListener('click', close);
  prevBtn.addEventListener('click', () => show(current - 1));
  nextBtn.addEventListener('click', () => show(current + 1));
  lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); });
  document.addEventListener('keydown', e => {
    if (lightbox.hidden) return;
    if (e.key === 'Escape') close();
    if (e.key === 'ArrowLeft') show(current - 1);
    if (e.key === 'ArrowRight') show(current + 1);
  });
}