/* BlogTopNav — sticky, blurred. Matches spencervoorhees.com nav style. */

function BlogTopNav({ dark, onToggleTheme, onNavigate, current, onOpenSearch }) {
  const [vw, setVw] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const update = () => setVw(window.innerWidth);
    window.addEventListener('resize', update, { passive: true });
    return () => window.removeEventListener('resize', update);
  }, []);

  const navItems = [
    { id: "index",    label: "Writing", href: "#" },
    { id: "external", label: "Résumé",  href: "https://resume.spencervoorhees.com" },
    { id: "now",      label: "Now",     href: "#" },
  ];

  return (
    <header style={navStyles.bar}>
      <div style={navStyles.inner}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("index"); }}
           style={navStyles.brand} aria-label="Spencer Voorhees — writing home">
          <span style={navStyles.brandMark} aria-hidden="true">
            <svg viewBox="0 0 64 64" width="44" height="44" fill="none">
              <text x="32" y="40" textAnchor="middle"
                    fontFamily="JetBrains Mono, ui-monospace, Menlo, Consolas, monospace"
                    fontSize="20" fontWeight="500"
                    fill="currentColor" letterSpacing="-.6">&lt;sv&gt;</text>
            </svg>
          </span>
          {vw >= 520 && <span style={navStyles.brandText}>Spencer Voorhees</span>}
        </a>

        <nav style={navStyles.nav} aria-label="Primary">
          {navItems.map(n => {
            const isInternal = n.id === "index" || n.id === "now";
            const isCurrent = isInternal && current === n.id;
            return (
              <a key={n.label}
                 href={n.href}
                 onClick={isInternal ? (e) => { e.preventDefault(); onNavigate(n.id); } : undefined}
                 target={isInternal ? undefined : "_blank"}
                 rel={isInternal ? undefined : "noreferrer"}
                 style={{ ...navStyles.link, ...(isCurrent ? navStyles.linkActive : null) }}>
                {n.label}
                {!isInternal && (
                  <i data-lucide="arrow-up-right" style={{ width: 11, height: 11, marginLeft: 2, opacity: 0.5 }}></i>
                )}
              </a>
            );
          })}
        </nav>

        <div style={navStyles.actions}>
          <button type="button" onClick={onOpenSearch}
                  style={navStyles.searchBtn} aria-label="Search posts">
            <i data-lucide="search" style={{ width: 14, height: 14 }}></i>
          </button>
          <button className="btn btn--ghost btn--sm"
                  aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
                  onClick={onToggleTheme}
                  style={{ padding: "0 8px" }}>
            <i data-lucide={dark ? "sun" : "moon"} style={{ width: 14, height: 14 }}></i>
          </button>
        </div>
      </div>
    </header>
  );
}

const navStyles = {
  bar: {
    position: "sticky", top: 0, zIndex: 50,
    background: "color-mix(in oklab, var(--bg) 72%, transparent)",
    backdropFilter: "saturate(1.4) blur(20px)",
    WebkitBackdropFilter: "saturate(1.4) blur(20px)",
    borderBottom: "1px solid var(--border-subtle)",
  },
  inner: {
    maxWidth: 1080, margin: "0 auto", padding: "0 max(20px, 5vw)",
    height: 60, display: "flex", alignItems: "center", gap: 28,
  },
  brand: {
    display: "flex", alignItems: "center", gap: 10,
    color: "var(--fg)", textDecoration: "none",
  },
  brandMark: { display: "inline-flex", color: "var(--fg)" },
  brandText: {
    fontFamily: "var(--font-display)",
    fontSize: 14, fontWeight: 600, letterSpacing: "-0.011em",
  },
  nav: { display: "flex", gap: 16, marginLeft: 8 },
  link: {
    fontSize: 14, color: "var(--fg-tertiary)", fontWeight: 500,
    textDecoration: "none", transition: "color 160ms",
    display: "inline-flex", alignItems: "center", gap: 3,
  },
  linkActive: { color: "var(--fg)" },
  actions: { display: "flex", gap: 4, alignItems: "center", marginLeft: "auto" },
  searchBtn: {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: 32, height: 32, borderRadius: 6,
    background: "transparent", border: "none",
    color: "var(--fg-tertiary)", cursor: "pointer",
    transition: "background 160ms, color 160ms",
  },
};

window.BlogTopNav = BlogTopNav;