// TopNav.jsx — sticky translucent nav. Monogram + microsite links + theme toggle + CTA.

function TopNav({ dark, onToggleTheme }) {
  const [active, setActive] = React.useState("home");
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { id: "experiments", label: "Experiments", href: "#experiments" },
    { id: "writing",     label: "Writing",     href: "https://blog.spencervoorhees.com" },
    { id: "resume",      label: "Résumé",      href: "https://resume.spencervoorhees.com" },
    { id: "about",       label: "About",       href: "#about" },
  ];

  React.useEffect(() => {
    if (menuOpen && window.lucide) window.lucide.createIcons();
  }, [menuOpen]);

  const handleLinkClick = (it, external) => {
    if (!external) setActive(it.id);
    setMenuOpen(false);
  };

  return (
    <header style={topNavStyles.bar}>
      <div style={topNavStyles.inner}>
        <a href="#" onClick={() => setActive("home")} style={topNavStyles.brand} aria-label="Spencer Voorhees — home">
          <span style={topNavStyles.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>
          <span style={topNavStyles.brandText}>Spencer Voorhees</span>
        </a>

        <nav className="topnav-nav" style={topNavStyles.nav} aria-label="Primary">
          {links.map(it => {
            const external = it.href.startsWith("http");
            return (
              <a key={it.id} href={it.href}
                 onClick={() => handleLinkClick(it, external)}
                 style={{
                   ...topNavStyles.link,
                   ...(active === it.id ? topNavStyles.linkActive : null)
                 }}>
                {it.label}
                {external && (
                  <i data-lucide="arrow-up-right"
                     style={{ width: 11, height: 11, marginLeft: 4, opacity: 0.5 }}></i>
                )}
              </a>
            );
          })}
        </nav>

        <div style={topNavStyles.actions}>
          <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>
          <a className="btn btn--secondary btn--sm topnav-cta" href="#contact">
            <i data-lucide="mail" style={{ width: 12, height: 12 }}></i>
            Get in touch
          </a>
          <button className="btn btn--ghost btn--sm topnav-hamburger"
                  aria-label={menuOpen ? "Close menu" : "Open menu"}
                  aria-expanded={menuOpen}
                  onClick={() => setMenuOpen(p => !p)}
                  style={{ padding: "0 8px" }}>
            <i data-lucide={menuOpen ? "x" : "menu"} style={{ width: 18, height: 18 }}></i>
          </button>
        </div>
      </div>

      {menuOpen && (
        <nav className="topnav-mobile-menu" aria-label="Mobile navigation">
          {links.map(it => {
            const external = it.href.startsWith("http");
            return (
              <a key={it.id} href={it.href}
                 onClick={() => handleLinkClick(it, external)}
                 style={topNavStyles.mobileLink}>
                {it.label}
                {external && (
                  <i data-lucide="arrow-up-right"
                     style={{ width: 12, height: 12, opacity: 0.4 }}></i>
                )}
              </a>
            );
          })}
          <div style={topNavStyles.mobileDivider}></div>
          <a className="btn btn--secondary btn--sm" href="#contact"
             style={{ margin: "16px 20px 20px", alignSelf: "flex-start" }}
             onClick={() => setMenuOpen(false)}>
            <i data-lucide="mail" style={{ width: 12, height: 12 }}></i>
            Get in touch
          </a>
        </nav>
      )}
    </header>
  );
}

const topNavStyles = {
  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: 24, marginLeft: 16 },
  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: 8, alignItems: "center", marginLeft: "auto" },
  mobileLink: {
    display: "flex", alignItems: "center", gap: 6,
    padding: "13px 20px",
    fontSize: 16, fontWeight: 500, color: "var(--fg)",
    textDecoration: "none",
    borderBottom: "1px solid var(--border-subtle)",
  },
  mobileDivider: { flex: 1 },
};

window.TopNav = TopNav;