// Top navigation bar for the Ta说 marketing site.
function Nav({ onNav, onTheme, theme }) {
  const { Button } = window.TaDesignSystem_e6b037;
  // Smooth-scroll to a landing section when it's on the page; otherwise route
  // home (the section lives on the landing route).
  const goSection = (id) => {
    const el = typeof document !== "undefined" && document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    else onNav("landing");
  };
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "16px 32px", background: "color-mix(in srgb, var(--bg-base) 82%, transparent)",
      backdropFilter: "blur(12px)", borderBottom: "1px solid var(--border-subtle)",
    }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onNav("landing"); }} style={{ textDecoration: "none" }}>
        <Logo size={28} />
      </a>
      <nav style={{ display: "flex", alignItems: "center", gap: 28 }} className="ta-navlinks">
        <a onClick={() => goSection("how")} style={linkS}>它如何工作</a>
        <a onClick={() => onNav("pricing")} style={linkS}>联系客服</a>
        <a onClick={() => goSection("privacy")} style={linkS}>免责声明</a>
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <button onClick={onTheme} aria-label="切换主题" style={{
          border: "1px solid var(--border-default)", background: "var(--surface-card)",
          width: 38, height: 38, borderRadius: "var(--radius-md)", cursor: "pointer",
          display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)",
        }}>
          <Icon name={theme === "dark" ? "sun" : "moon"} size={18} />
        </button>
        <Button variant="ghost" size="sm" onClick={() => onNav("login")}>登录</Button>
        <Button variant="primary" size="sm" onClick={() => onNav("app")}>免费开始</Button>
      </div>
    </header>
  );
}
const linkS = { fontSize: 15, fontWeight: 500, color: "var(--text-secondary)", cursor: "pointer", textDecoration: "none" };
Object.assign(window, { Nav });