---
import { nav, serviceNav } from "@data/site";
---

<header class="site-header">
  <div class="header-inner">
    <a class="brand" href="/" aria-label="BlueCap Strategies home">
      <img src="/assets/bluecap-logo.png" alt="BlueCap Strategies" width="220" height="66" />
    </a>
    <nav class="desktop-nav" aria-label="Primary navigation">
      <a href="/">Home</a>
      <div class="nav-menu">
        <a href="/services/">Services</a>
        <div class="nav-panel" aria-label="Service pages">
          {serviceNav.map((item) => <a href={item.href}>{item.label}</a>)}
        </div>
      </div>
      <a href="/focus-areas/">Focus Areas</a>
      <a href="/about-us/">About Us</a>
      <a href="/insights/">Insights</a>
      <a class="nav-cta" href="/contact/">Contact</a>
    </nav>
    <details class="mobile-nav">
      <summary aria-label="Open navigation">Menu</summary>
      <nav aria-label="Mobile navigation">
        {nav.map((item) => <a href={item.href}>{item.label}</a>)}
        <hr />
        {serviceNav.map((item) => <a href={item.href}>{item.label}</a>)}
      </nav>
    </details>
  </div>
</header>
