// Header — sticky top nav for newageanimation.com

function Header({ route, go }) {
  const { Button } = window.NewAgeAnimationDesignSystem_178027;
  const links = [
    ["work", "Work"],
    ["services", "Services"],
    ["rush", "Rush delivery"],
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "16px var(--gutter)",
      background: "rgba(10,11,13,0.72)", backdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--border-soft)",
    }}>
      <button onClick={() => go("home")} style={{
        display: "flex", alignItems: "center", gap: 10, background: "none", border: "none",
        cursor: "pointer", color: "var(--paper-100)", fontFamily: "var(--font-display)",
        fontWeight: 900, fontSize: 20, letterSpacing: "-0.02em", textTransform: "uppercase",
      }}>
        <img src="assets/logo-mark.svg" width="24" height="24" alt="" style={{ display: "block" }} />
        New Age <span style={{ color: "var(--flare-500)" }}>Animation</span>
      </button>

      <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
        {links.map(([id, label]) => (
          <button key={id} onClick={() => go(id)} style={{
            background: "none", border: "none", cursor: "pointer",
            fontFamily: "var(--font-sans)", fontSize: "var(--fs-sm)", fontWeight: 600,
            color: route === id ? "var(--flare-500)" : "var(--text-body)",
            letterSpacing: "0.01em", padding: "6px 0",
          }}>{label}</button>
        ))}
        <Button variant="solid" size="sm" onClick={() => go("contact")}>Start a project</Button>
      </nav>
    </header>
  );
}
window.Header = Header;