{% set pages = craft.entries.section('pages').level(1).all() %}
{% set navItems = [
    { label: 'Projects', url: 'projects' },
    { label: 'Properties', url: 'properties' },
    { label: 'Journal', url: 'journal' },
    { label: 'Expertise', url: 'expertise/rosengart-expertise' },
    { label: 'About', url: 'about' },
    { label: 'Press', url: 'press' }
] %}

<style>
  @media (max-width: 767px) {
    .nav-desktop { display: none !important; }
    .nav-mobile-btn { display: block !important; }
    .nav-mobile { display: none !important; }
    .nav-mobile.open { display: flex !important; }
  }
  @media (min-width: 768px) {
    .nav-desktop { display: flex !important; gap: 2.2rem; }
    .nav-mobile-btn { display: none !important; }
    .nav-mobile { display: none !important; }
  }
  .nav-desktop { list-style: none; margin: 0 0 0 1rem; padding: 0; align-items: center; }
  .nav-mobile { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 0.5rem; margin-top: 1rem; padding-bottom: 1rem; }
</style>

<nav x-data="{ open: false }" style="width: 100%;">
  <!-- Desktop Navigation -->
  <ul class="nav-desktop">
    {% for item in navItems %}
      {% set isActive = craft.app.request.pathInfo == item.url %}
      <li>
        <a href="/{{ item.url }}" class="nav-link {{ isActive ? 'active' : '' }}">
          {{ item.label }}
        </a>
      </li>
    {% endfor %}
    {% for page in pages %}
      <li>
        <a href="{{ page.url }}" class="nav-link {% if segment1 == page.slug %}active{% endif %}" {% if segment1 == page.slug %}aria-current="page"{% endif %}>
          {{ page.title }}
        </a>
      </li>
    {% endfor %}
  </ul>

  <!-- Mobile Hamburger Button -->
  <button @click="open = !open" class="nav-mobile-btn" style="padding: 0.5rem; background: none; border: none; cursor: pointer; color: white;" aria-label="Toggle menu" aria-expanded="false">
    <svg style="width: 24px; height: 24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>

  <!-- Mobile Navigation Menu -->
  <ul class="nav-mobile" :class="{ open: open }">
    {% for item in navItems %}
      {% set isActive = craft.app.request.pathInfo == item.url %}
      <li>
        <a href="/{{ item.url }}" class="nav-link {{ isActive ? 'active' : '' }}" @click="open = false" style="display: block; padding: 0.5rem 0;">
          {{ item.label }}
        </a>
      </li>
    {% endfor %}
    {% for page in pages %}
      <li>
        <a href="{{ page.url }}" class="nav-link {% if segment1 == page.slug %}active{% endif %}" @click="open = false" style="display: block; padding: 0.5rem 0;" {% if segment1 == page.slug %}aria-current="page"{% endif %}>
          {{ page.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>