---
// Navigation items for the theater homepage sections
const navItems = [
  { id: 'projekt', label_de: 'Das Projekt', label_en: 'The Project' },
  { id: 'team', label_de: 'Wer steckt dahinter', label_en: 'Who\'s Behind It' },
  { id: 'stueck', label_de: 'Das Stück', label_en: 'The Play' },
  { id: 'mitwirkung', label_de: 'Mitwirkung', label_en: 'Participation' },
  { id: 'termine', label_de: 'Termine', label_en: 'Schedule' },
  { id: 'presse', label_de: 'Presse', label_en: 'Press' },
  { id: 'gallery', label_de: 'Galerie', label_en: 'Gallery' },
  { id: 'tickets', label_de: 'Tickets', label_en: 'Tickets' },
];
---

<nav class="anchor-nav bg-[#2b2b56] py-4 md:py-3 transition-all duration-300 z-[100] shadow-[0_2px_5px_rgba(0,0,0,0.1)] [&.sticky]:sticky [&.sticky]:top-0 [&.sticky]:shadow-[0_2px_10px_rgba(0,0,0,0.3)]" id="anchor-nav">
  <div class="max-w-[--max-width-container] mx-auto px-[--spacing-md]">
    <ul class="list-none m-0 p-0 flex flex-wrap justify-center gap-2 md:gap-1">
      {navItems.map((item) => (
        <li class="m-0">
          <a
            href={`#${item.id}`}
            class="nav-link block text-white no-underline py-2 px-4 md:py-1.5 md:px-3 rounded transition-all duration-300 text-sm md:text-[0.85rem] font-medium whitespace-nowrap hover:bg-white/20 hover:-translate-y-0.5 [&.active]:bg-white/30 [&.active]:font-bold"
            data-section={item.id}
          >
            <span class="nav-label-de" data-lang="de">{item.label_de}</span>
            <span class="nav-label-en" data-lang="en">{item.label_en}</span>
          </a>
        </li>
      ))}
    </ul>
  </div>
</nav>

<script>
  // Smooth scroll to sections
  document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = link.getAttribute('href');
      if (targetId) {
        const targetSection = document.querySelector(targetId);
        if (targetSection) {
          const navHeight = document.querySelector('.anchor-nav')?.clientHeight || 0;
          const targetPosition = targetSection.getBoundingClientRect().top + window.scrollY - navHeight - 20;
          window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
          });
        }
      }
    });
  });

  // Highlight active section on scroll
  const observerOptions = {
    root: null,
    rootMargin: '-20% 0px -70% 0px',
    threshold: 0
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const sectionId = entry.target.getAttribute('id');
        document.querySelectorAll('.nav-link').forEach(link => {
          link.classList.remove('active');
          if (link.getAttribute('data-section') === sectionId) {
            link.classList.add('active');
          }
        });
      }
    });
  }, observerOptions);

  // Observe all sections
  document.querySelectorAll('.theater-section').forEach(section => {
    observer.observe(section);
  });

  // Make nav sticky on scroll
  let lastScroll = 0;
  const nav = document.querySelector('.anchor-nav');

  window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > 400) {
      nav?.classList.add('sticky');
    } else {
      nav?.classList.remove('sticky');
    }

    lastScroll = currentScroll;
  });
</script>