<header class="site-header">
  <div class="site-header__top">
    <a class="logo" href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>">
      <img class="logo--light" src="/assets/logo-white.png" alt="FlixCooks">
      <img class="logo--dark" src="/assets/logo-black.png" alt="FlixCooks">
    </a>
    <div class="header-actions">
      <a class="lang-toggle" href="<?php echo e($langSwitchHref ?? '#'); ?>"><?php echo e($langSwitchLabel ?? 'DE/EN'); ?></a>
      <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="siteNav">
        <span class="menu-toggle__icon" aria-hidden="true">☰</span>
        <span class="menu-toggle__label"><?php echo $lang === 'de' ? 'Menü' : 'Menu'; ?></span>
      </button>
    </div>
  </div>
  <nav id="siteNav" class="site-nav" data-collapsed="true">
    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>"><?php echo e($navHome ?? 'Home'); ?></a>
    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#latest"><?php echo e($navLatest ?? 'Latest'); ?></a>
    <a href="/index.php<?php echo $lang === 'de' ? '?lang=de' : ''; ?>#basics"><?php echo e($navBasics ?? 'Basics'); ?></a>
  </nav>
</header>
<script>
  (() => {
    const toggle = document.currentScript.previousElementSibling.querySelector('.menu-toggle');
    const nav = document.getElementById('siteNav');
    if (!toggle || !nav) return;
    toggle.addEventListener('click', () => {
      const isCollapsed = nav.getAttribute('data-collapsed') === 'true';
      nav.setAttribute('data-collapsed', String(!isCollapsed));
      toggle.setAttribute('aria-expanded', String(isCollapsed));
    });
  })();
</script>
