<script>
  import { page } from '$app/stores';
  import { cart, cartItems } from '$lib/stores/cart';
  import { fly } from 'svelte/transition';

  let isMobileMenuOpen = false;

  function toggleMobileMenu() {
    isMobileMenuOpen = !isMobileMenuOpen;
  }
</script>

<header class="absolute left-0 right-0 top-0 mx-auto w-[calc(100%-1rem)] md:w-[80%] md:left-1/2 md:-translate-x-1/2 z-50 h-auto mt-2 rounded-lg">
  <div class="navbar bg-transparent px-4 md:px-8 lg:px-12 h-full relative">
    <!-- Logo -->
    <div class="flex-1">
      <a href="/" class="inline-block text-2xl font-display text-white hover:opacity-80 transition-opacity">
        <img src="/logo.png" alt="Standard Marine GCC" class="h-16 w-auto filter brightness-0 invert" />
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <button 
      class="btn btn-ghost btn-circle text-white md:hidden mr-2"
      on:click={toggleMobileMenu}
      aria-label="Menu"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- Cart Icon (Always Visible) -->
    <button 
      class="btn btn-ghost btn-circle text-white"
      on:click={() => cart.toggle()}
      aria-label="Shopping cart"
    >
      <div class="indicator">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        {#if $cartItems.length > 0}
          <span class="badge badge-sm indicator-item">
            {$cartItems.reduce((sum, item) => sum + item.quantity, 0)}
          </span>
        {/if}
      </div>
    </button>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex">
      <ul class="menu menu-horizontal px-1 text-white font-body text-lg items-center">
        <li class="relative">
          <a 
            href="/products" 
            class="hover:bg-white/10 transition-colors"
            class:active={$page.url.pathname === '/products'}
          >
            Products
          </a>
        </li>
        <li class="relative">
          <a 
            href="/services" 
            class="hover:bg-white/10 transition-colors"
            class:active={$page.url.pathname === '/services'}
          >
            Services
          </a>
        </li>
        <li class="relative">
          <a 
            href="/contact" 
            class="hover:bg-white/10 transition-colors"
            class:active={$page.url.pathname === '/contact'}
          >
            Contact Us
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Mobile Menu -->
  {#if isMobileMenuOpen}
    <div 
      class="absolute top-full left-0 right-0 mt-2 bg-base-100 rounded-lg shadow-lg overflow-hidden"
      transition:fly={{ y: -10, duration: 200 }}
    >
      <ul class="menu menu-lg p-4 font-body">
        <li>
          <a 
            href="/products" 
            class="hover:bg-base-200 transition-colors"
            class:active={$page.url.pathname === '/products'}
            on:click={toggleMobileMenu}
          >
            Products
          </a>
        </li>
        <li>
          <a 
            href="/services" 
            class="hover:bg-base-200 transition-colors"
            class:active={$page.url.pathname === '/services'}
            on:click={toggleMobileMenu}
          >
            Services
          </a>
        </li>
        <li>
          <a 
            href="/contact" 
            class="hover:bg-base-200 transition-colors"
            class:active={$page.url.pathname === '/contact'}
            on:click={toggleMobileMenu}
          >
            Contact Us
          </a>
        </li>
      </ul>
    </div>
  {/if}

  <!-- Glass effect background -->
  <div class="absolute rounded-lg inset-0 bg-black/30 backdrop-blur-sm -z-10"></div>
</header>

<style>
  .active {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 500;
  }

  /* Glass effect on scroll */
  :global(.scrolled) header {
    background-color: rgb(var(--color-base-100) / 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(var(--color-base-200) / 0.5);
    transition: all 0.3s ease;
  }
</style> 