<script lang="ts">
  let scrolled = $state(false);

  $effect(() => {
    const handleScroll = () => {
      scrolled = window.scrollY > 20;
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  });
</script>

<nav
  class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 {scrolled
    ? 'bg-white/90 backdrop-blur-md shadow-sm'
    : 'bg-transparent'}"
>
  <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="flex items-center gap-2">
      <img src="/logo.png" alt="ValueCurve" class="h-8 w-auto" />
      <span class="font-semibold text-gray-900">Build ValueCurve</span>
    </a>

    <div class="flex items-center gap-6">
      <a href="/guides/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">
        Guides
      </a>
      <a href="/tools/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">
        Tools
      </a>
      <a href="https://www.valuecurve.ai" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">
        Newsletter
      </a>
      <a href="/notebooks/" class="text-gray-600 hover:text-gray-900 transition-colors text-sm font-medium">
        Notebooks
      </a>
    </div>
  </div>
</nav>
