---
import { Image } from 'astro:assets';
import logo from '../assests/logo.jpg';

const { pathname } = Astro.url;
const links = [
  { href: "/", label: "Home" },
  { href: "/showcase", label: "Showcase" },
];
---
<header class="site-header" data-header>
  <div class="container header-inner">
    <a href="/" class="brand" aria-label="Ryuzaki home">
      <Image src={logo} alt="" width={56} height={56} class="brand-mark" />
      <span class="brand-name">Ryuzaki</span>
    </a>
    <nav class="site-nav" aria-label="Primary">
      {links.map((l) => (
        <a
          href={l.href}
          class={pathname === l.href ? "nav-link is-active" : "nav-link"}
          aria-current={pathname === l.href ? "page" : undefined}
        >
          {l.label}
        </a>
      ))}
    </nav>
  </div>
  <div class="scroll-edge" aria-hidden="true"></div>
</header>
<style>
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    transition: background 240ms var(--ease-spring-soft);
  }

  .site-header[data-scrolled="true"] {
    background: var(--material-thick);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
  }
  .brand:hover { color: var(--text); }
  .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .brand-name {
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }
  .site-nav { display: flex; gap: 2px; }
  .nav-link {
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color 180ms var(--ease-spring-soft),
                background 180ms var(--ease-spring-soft);

  }
  .nav-link:hover { color: var(--text); background: var(--material-thin); }
  .nav-link:active { transform: scale(0.96); }
  .nav-link.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .scroll-edge {
    height: 0;
    overflow: visible;
    pointer-events: none;
  }
  .site-header[data-scrolled="true"] .scroll-edge {
    height: 24px;
    margin-top: -1px;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35),
      transparent
    );
    opacity: 0.6;
  }
  @media (max-width: 480px) {
    .brand-name { font-size: 0.88rem; }
    .nav-link { padding: 7px 11px; font-size: 0.86rem; }
  }
</style>
<script>
  function initHeaderScroll() {
    const header = document.querySelector("[data-header]");
    if (!(header instanceof HTMLElement)) return;
    const update = () => {
      header.setAttribute("data-scrolled", String(window.scrollY > 8));
    };
    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update, { passive: true });
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initHeaderScroll);
  } else {
    initHeaderScroll();
  }
</script>