---
const navItems = [
  { href: '#poveste', label: 'Povestea' },
  { href: '#tipologii', label: 'Tipologii' },
  { href: '#quiz', label: 'Quiz' },
  { href: '#beletage', label: 'Beletage' },
];
---

<header
  class="fixed inset-x-0 top-0 z-40 transition-all duration-300"
  data-header
>
  <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-12">
    <a href="/" class="group flex items-center gap-2 text-bone-50">
      <span class="grid h-9 w-9 place-items-center rounded-md bg-terra-600/90 font-display text-sm font-bold backdrop-blur transition group-hover:bg-terra-500">2D<span class="text-terra-200">3D</span></span>
      <span class="hidden font-display text-base text-bone-50 sm:inline">Arhitectura României</span>
    </a>

    <nav class="hidden items-center gap-2 md:flex">
      {navItems.map((item) => (
        <a
          href={item.href}
          class="rounded-full px-4 py-2 text-sm text-bone-50/85 transition hover:bg-bone-50/10 hover:text-bone-50"
        >
          {item.label}
        </a>
      ))}
    </nav>

    <a
      href="https://beletage.ro"
      rel="dofollow"
      class="hidden items-center gap-2 rounded-full bg-bone-50 px-4 py-2 text-sm font-medium text-ink-900 transition hover:bg-terra-200 sm:inline-flex"
    >
      Beletage.ro <span aria-hidden>→</span>
    </a>
  </div>
</header>

<script>
  const header = document.querySelector('[data-header]') as HTMLElement | null;
  if (header) {
    const onScroll = () => {
      const y = window.scrollY;
      if (y > 80) {
        header.classList.add('bg-wood-900/80', 'backdrop-blur-md', 'border-b', 'border-bone-50/10', 'shadow-lg');
      } else {
        header.classList.remove('bg-wood-900/80', 'backdrop-blur-md', 'border-b', 'border-bone-50/10', 'shadow-lg');
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  }
</script>