// Shared nav across variations
function Nav({ theme = "light" }) {
  const isDark = theme === "dark";
  const inkColor = isDark ? "#f7f8fc" : "var(--ink)";
  return (
    <nav className="nav" style={{ color: inkColor }} data-screen-label="Hero nav">
      <a className="logo" href="#">
        <span className={"logo-mark" + (isDark ? " dark" : "")}></span>
        <span><b style={{ fontWeight: 700 }}>Simply AI</b> <span style={{ opacity: .55, fontWeight: 500 }}>Sites</span></span>
      </a>
      <div className="nav-links">
        <a href="#how">How it works</a>
        <a href="#examples">Examples</a>
        <a href="#pricing">Pricing</a>
      </div>
      <div className="nav-right">
        <button className={isDark ? "btn btn-ghost-light" : "btn btn-primary"}>Start my site</button>
      </div>
    </nav>
  );
}
window.Nav = Nav;