---
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
const products = [
  { name: 'RentMatrix', href: `${base}/products/rentmatrix`, desc: 'Property & rental management', status: 'LIVE',  dot: '#01a558' },
  { name: 'Flow',        href: `${base}/products/flow`,        desc: 'Multi-channel bulk messaging',  status: 'LIVE',  dot: '#034b5b' },
  { name: 'Hosting',     href: `${base}/products/hosting`,     desc: 'Domains, hosting & email',      status: 'LIVE',  dot: '#2563eb' },
  { name: 'BnBConnect',  href: `${base}/products/bnbconnect`,  desc: 'Hospitality management',        status: 'Beta',  dot: '#f18f20' },
  { name: 'POS',         href: `${base}/products/pos`,         desc: 'Point of sale & inventory',     status: 'Beta',  dot: '#e11d48' },
  { name: 'Fleet',       href: `${base}/products/fleet`,       desc: 'Fleet & transport management',  status: 'Beta',  dot: '#4f46e5' },
  { name: 'VMS',         href: `${base}/products/vms`,         desc: 'Visitor management system',     status: 'Beta',  dot: '#9333ea' },
];

const currentPath = Astro.url.pathname;
---

<header id="site-header" class="fixed top-0 left-0 right-0 z-50">

  <!-- Green accent line - draws itself in on scroll -->
  <div id="nav-accent" class="absolute bottom-0 left-0 right-0 h-[3px] bg-green origin-left pointer-events-none"></div>

  <div class="container mx-auto">
    <nav class="flex items-center justify-between h-[80px]">

      <!-- ── Logo ── -->
      <a href={base + '/'} class="flex items-center gap-3.5 flex-shrink-0" aria-label="Lelevar Home">
        <img
          src={`${base}/logo.png`}
          alt="Lelevar"
          id="nav-logo"
          class="h-12 w-auto"
          loading="eager"
        />
        <div class="hidden sm:flex flex-col gap-0.5 leading-none">
          <div id="nav-logo-bar" class="h-px w-5"></div>
          <span id="nav-wordmark" class="font-display font-black text-[9px] uppercase tracking-[0.28em]">Solutions</span>
        </div>
      </a>

      <!-- ── Desktop nav (pill wrapper) ── -->
      <div class="hidden lg:flex items-center">
        <div id="nav-pill" class="flex items-center gap-0.5 px-1.5 py-1.5 rounded-full transition-all duration-500">

          <!-- Products mega-dropdown -->
          <div class="relative group/products">
            <button
              class="nav-link-el flex items-center gap-1.5 px-4 py-2 rounded-full font-display font-semibold text-sm transition-colors duration-200"
              aria-haspopup="true"
            >
              Products
              <svg class="w-3 h-3 opacity-60 transition-transform duration-300 group-hover/products:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>

            <!-- Mega dropdown panel -->
            <div class="absolute top-full left-1/2 -translate-x-1/2 pt-5 invisible opacity-0 group-hover/products:visible group-hover/products:opacity-100 transition-all duration-200 pointer-events-none group-hover/products:pointer-events-auto">
              <div class="flex bg-white rounded-2xl shadow-[0_16px_64px_rgba(0,0,0,0.14)] border border-border/40 overflow-hidden w-[600px]">

                <!-- Left: brand panel -->
                <div class="w-[168px] flex-shrink-0 bg-navy p-6 flex flex-col justify-between">
                  <div>
                    <img src={`${base}/logo.png`} alt="" class="h-6 w-auto brightness-0 invert opacity-70 mb-5" aria-hidden="true" />
                    <p class="text-white/35 text-[10px] font-display font-bold uppercase tracking-[0.18em] leading-relaxed mb-3">The Levar<br/>Ecosystem</p>
                    <div class="h-px bg-white/[0.08] mb-3"></div>
                    <p class="text-white/45 text-[11px] leading-relaxed">Connected business software built for African businesses.</p>
                  </div>
                  <div class="mt-5">
                    <span class="text-green font-display font-black text-2xl leading-none">100%</span>
                    <span class="block text-white/25 text-[9px] uppercase tracking-widest font-display font-semibold mt-0.5">African-built</span>
                  </div>
                </div>

                <!-- Right: product grid -->
                <div class="flex-1 flex flex-col">
                  <div class="flex-1 p-3 grid grid-cols-2 gap-1 content-start">
                    {products.map((p) => (
                      <a
                        href={p.href}
                        class={`flex items-start gap-2.5 p-3 rounded-xl hover:bg-smoke transition-colors duration-150 group/item ${currentPath.startsWith(p.href) ? 'bg-green/5' : ''}`}
                      >
                        <span class="w-2 h-2 rounded-full mt-[5px] flex-shrink-0" style={`background-color: ${p.dot};`}></span>
                        <div class="flex-1 min-w-0">
                          <div class="flex items-center gap-1.5 mb-0.5 flex-wrap">
                            <span class="font-display font-semibold text-navy text-sm leading-tight">{p.name}</span>
                            <span class={`text-[8px] font-black uppercase tracking-wider px-1 py-px rounded-full flex-shrink-0 ${p.status === 'LIVE' ? 'bg-green/10 text-green' : 'bg-amber/20 text-amber-dark'}`}>{p.status}</span>
                          </div>
                          <span class="text-body text-[11px] leading-snug block">{p.desc}</span>
                        </div>
                      </a>
                    ))}
                  </div>
                  <!-- Footer link -->
                  <div class="px-4 py-3 border-t border-border/50">
                    <a href={base + '/about'} class="flex items-center gap-2 text-green font-display font-semibold text-xs hover:gap-3 transition-all duration-200 w-fit">
                      Explore the full ecosystem
                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                      </svg>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <a href={base + '/about'} class={`nav-link-el px-4 py-2 rounded-full font-display font-semibold text-sm transition-colors duration-200 ${currentPath === base + '/about/' || currentPath === base + '/about' ? 'active-link' : ''}`}>
            About
          </a>
          <a href={base + '/contact'} class={`nav-link-el px-4 py-2 rounded-full font-display font-semibold text-sm transition-colors duration-200 ${currentPath === base + '/contact/' || currentPath === base + '/contact' ? 'active-link' : ''}`}>
            Contact
          </a>

        </div>
      </div>

      <!-- ── Right side ── -->
      <div class="flex items-center gap-3">

        <!-- Live location badge -->
        <div id="nav-location" class="hidden xl:flex items-center gap-2">
          <span class="relative flex h-1.5 w-1.5 flex-shrink-0">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green opacity-75"></span>
            <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-green"></span>
          </span>
          <span class="font-display font-semibold text-[10px] uppercase tracking-[0.2em]">Nairobi, Kenya</span>
        </div>

        <!-- CTA button -->
        <a href={base + '/contact'} id="nav-cta" class="hidden md:inline-flex items-center gap-2 font-display font-semibold text-sm px-5 py-2.5 rounded-full border-2 transition-all duration-300">
          Get Started
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>

        <!-- Hamburger -->
        <button
          id="mobile-menu-toggle"
          class="lg:hidden flex flex-col gap-1.5 p-2 rounded-lg"
          aria-label="Toggle menu"
          aria-expanded="false"
        >
          <span class="nav-hamburger-line block w-5 h-0.5 rounded-full transition-all duration-300" id="hamburger-line-1"></span>
          <span class="nav-hamburger-line block w-5 h-0.5 rounded-full transition-all duration-300" id="hamburger-line-2"></span>
          <span class="nav-hamburger-line block w-3 h-0.5 rounded-full transition-all duration-300 ml-auto" id="hamburger-line-3"></span>
        </button>

      </div>
    </nav>
  </div>
</header>

<!-- ── Mobile drawer ── -->
<div id="mobile-menu" class="fixed inset-0 z-40 invisible opacity-0 transition-all duration-300 lg:hidden" aria-hidden="true">

  <div id="mobile-backdrop" class="absolute inset-0 bg-navy/80 backdrop-blur-sm"></div>

  <div id="mobile-drawer" class="absolute top-0 right-0 h-full w-80 bg-[#0d1629] shadow-2xl flex flex-col translate-x-full transition-transform duration-300">

    <!-- Header -->
    <div class="flex items-center justify-between px-6 h-[80px] border-b border-white/[0.07]">
      <img src={`${base}/logo.png`} alt="Lelevar" class="h-9 w-auto brightness-0 invert" />
      <button id="mobile-menu-close" aria-label="Close menu" class="p-2 rounded-full hover:bg-white/10 transition-colors">
        <svg class="w-4 h-4 text-white/60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>

    <!-- Links -->
    <div class="flex-1 overflow-y-auto py-6 px-6">
      <p class="text-[9px] font-display font-black uppercase tracking-[0.25em] text-white/25 mb-3">Products</p>
      <div class="flex flex-col mb-8">
        {products.map((p) => (
          <a href={p.href} class="flex items-center justify-between py-3 border-b border-white/[0.05] group/m">
            <div class="flex items-center gap-3">
              <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" style={`background-color: ${p.dot};`}></span>
              <span class="font-display font-semibold text-white/70 text-sm group-hover/m:text-white transition-colors">{p.name}</span>
            </div>
            <span class={`text-[8px] font-black uppercase tracking-wider px-1.5 py-px rounded-full ${p.status === 'LIVE' ? 'bg-green/20 text-green' : 'bg-white/10 text-white/40'}`}>{p.status}</span>
          </a>
        ))}
      </div>
      <div class="flex flex-col gap-0.5">
        <a href={base + '/about'}   class="py-2.5 font-display font-semibold text-white/50 hover:text-white transition-colors text-sm">About</a>
        <a href={base + '/contact'} class="py-2.5 font-display font-semibold text-white/50 hover:text-white transition-colors text-sm">Contact</a>
      </div>
    </div>

    <!-- Mobile CTA -->
    <div class="p-6 border-t border-white/[0.07]">
      <a href={base + '/contact'} class="flex items-center justify-center gap-2 bg-green text-white font-display font-semibold text-sm px-5 py-3 rounded-full w-full hover:bg-green-dark transition-colors duration-200">
        Get Started
        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
      </a>
    </div>

  </div>
</div>

<style>
  /* ── Default: transparent - floats over dark hero ── */
  #site-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }

  #nav-accent {
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Nav pill */
  #nav-pill {
    background: transparent;
    border: 1px solid transparent;
  }

  /* Nav links */
  .nav-link-el            { color: rgba(255,255,255,0.80); }
  .nav-link-el:hover      { color: #fff; background-color: rgba(255,255,255,0.09); }
  .nav-link-el.active-link { color: #01a558; background-color: rgba(1,165,88,0.16); }

  /* Logo treatment */
  #nav-logo     { filter: brightness(0) invert(1); transition: filter 0.4s ease; }
  #nav-logo-bar { background-color: rgba(255,255,255,0.18); transition: background-color 0.4s ease; }
  #nav-wordmark { color: rgba(255,255,255,0.38); transition: color 0.4s ease; }

  /* Location */
  #nav-location { color: rgba(255,255,255,0.32); transition: color 0.4s ease; }

  /* CTA - outlined over dark */
  #nav-cta {
    background-color: transparent;
    border-color: rgba(255,255,255,0.32);
    color: rgba(255,255,255,0.88);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  #nav-cta:hover {
    background-color: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.55);
    color: #fff;
  }

  /* Hamburger */
  .nav-hamburger-line { background-color: rgba(255,255,255,0.80); }

  /* ── Scrolled state ── */
  #site-header.scrolled {
    background: rgba(255,255,255,0.96);
    border-bottom-color: #eaeaea;
    box-shadow: 0 1px 32px rgba(0,0,0,0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  #site-header.scrolled #nav-accent   { transform: scaleX(1); }

  /* Pill gets subtle fill */
  #site-header.scrolled #nav-pill {
    background: rgba(245,245,245,0.65);
    border-color: rgba(0,0,0,0.05);
  }

  /* Nav links */
  #site-header.scrolled .nav-link-el            { color: rgba(20,29,56,0.65); }
  #site-header.scrolled .nav-link-el:hover      { color: rgb(20,29,56); background-color: rgba(0,0,0,0.05); }
  #site-header.scrolled .nav-link-el.active-link { color: #01a558; background-color: rgba(1,165,88,0.08); }

  /* Logo */
  #site-header.scrolled #nav-logo     { filter: none; }
  #site-header.scrolled #nav-logo-bar { background-color: #e0e0e0; }
  #site-header.scrolled #nav-wordmark { color: rgba(115,120,135,0.50); }

  /* Location */
  #site-header.scrolled #nav-location { color: rgba(115,120,135,0.55); }

  /* CTA - filled navy */
  #site-header.scrolled #nav-cta {
    background-color: #141d38;
    border-color: #141d38;
    color: #fff;
  }
  #site-header.scrolled #nav-cta:hover {
    background-color: #01a558;
    border-color: #01a558;
  }

  /* Hamburger */
  #site-header.scrolled .nav-hamburger-line { background-color: #141d38; }
</style>

<script>
  const header = document.getElementById('site-header');

  function onScroll() {
    header?.classList.toggle('scrolled', window.scrollY > 80);
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  // Mobile menu
  const toggle   = document.getElementById('mobile-menu-toggle');
  const menu     = document.getElementById('mobile-menu');
  const drawer   = document.getElementById('mobile-drawer');
  const backdrop = document.getElementById('mobile-backdrop');
  const closeBtn = document.getElementById('mobile-menu-close');
  const l1 = document.getElementById('hamburger-line-1');
  const l2 = document.getElementById('hamburger-line-2');
  const l3 = document.getElementById('hamburger-line-3');

  function openMenu() {
    menu!.classList.remove('invisible', 'opacity-0');
    menu!.setAttribute('aria-hidden', 'false');
    drawer!.classList.remove('translate-x-full');
    toggle!.setAttribute('aria-expanded', 'true');
    document.body.style.overflow = 'hidden';
    l1!.classList.add('rotate-45', 'translate-y-2');
    l2!.classList.add('opacity-0');
    l3!.classList.add('-rotate-45', '-translate-y-2', 'w-5');
  }

  function closeMenu() {
    menu!.classList.add('invisible', 'opacity-0');
    menu!.setAttribute('aria-hidden', 'true');
    drawer!.classList.add('translate-x-full');
    toggle!.setAttribute('aria-expanded', 'false');
    document.body.style.overflow = '';
    l1!.classList.remove('rotate-45', 'translate-y-2');
    l2!.classList.remove('opacity-0');
    l3!.classList.remove('-rotate-45', '-translate-y-2', 'w-5');
  }

  toggle?.addEventListener('click', () => {
    toggle!.getAttribute('aria-expanded') === 'true' ? closeMenu() : openMenu();
  });
  closeBtn?.addEventListener('click', closeMenu);
  backdrop?.addEventListener('click', closeMenu);
</script>