function Nav({ theme, setTheme }) {
  return (
    <div className="nav-wrap">
      <nav className="nav glass">
        <a href="index.html" className="nav-brand">
          {/* Two raster icons, one shown per theme via CSS. The existing
              flik-icon.svg is still used by the simulated menubar in Hero. */}
          <img className="brand-mark brand-light" src="assets/flik-icon-light.png" alt="" />
          <img className="brand-mark brand-dark"  src="assets/flik-icon-dark.png"  alt="" />
          <span>Flik</span>
        </a>
        <div className="nav-links">
          {/* Links use index.html#anchor so they work both on the home page
              and from the legal sub-pages (privacy.html etc.). */}
          <a href="index.html#how">How it works</a>
          <a href="index.html#features">Features</a>
          <a href="index.html#pricing">Pricing</a>
          <a href="index.html#faq">FAQ</a>
        </div>
        <button
          className="theme-toggle"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          aria-label="Toggle theme"
          title="Toggle light/dark"
        >
          {theme === "dark" ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="4" />
              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
            </svg>
          )}
        </button>
      </nav>
    </div>
  );
}

window.Nav = Nav;