// nav.jsx — Top navigation + Footer
const { useState } = React;

function TopNav({ page, onPage, tweaks }) {
  const tabs = [
    ["graph", "图谱"],
    ["private", "我的"],
    ["playground", "Playground"],
    ["history", "历史"],
    ["pricing", "定价"],
    ["faq", "FAQ"],
    ["settings", "设置"],
  ];
  return (
    <div className="topnav">
      <div className="brand" onClick={() => onPage("landing")} style={{ cursor: "pointer" }}>
        <div className="brand-mark">N</div>
        <span>Nodeidea</span>
      </div>
      <div className="tabs">
        {tabs.map(([id, label]) => (
          <button
            key={id}
            className={"tab " + (page === id ? "active" : "")}
            onClick={() => onPage(id)}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="right">
        <div className="search-mini">
          <Ic.Search />
          <span>跳转或搜索…</span>
          <kbd>⌘ K</kbd>
        </div>
        <button className="btn btn-sm btn-quiet" onClick={() => onPage("login")} style={{ height: 28 }}>登录</button>
        <div className="avatar" title="JQ Roy · 切换账号" style={{ cursor: "pointer" }}>JQ</div>
      </div>
    </div>
  );
}

function Footer({ onPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 16 }}>
              <div className="brand-mark" style={{ width: 22, height: 22 }}>N</div>
              <span>Nodeidea</span>
            </div>
            <p style={{ color: "var(--text-dim)", fontSize: 13, lineHeight: 1.6, maxWidth: 280, margin: 0 }}>
              用图谱组织你学过的每一个概念。让知识彼此连通,而不是散落在文件夹里。
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              {["X", "GH", "RSS"].map(s => (
                <div key={s} style={{ width: 30, height: 30, borderRadius: 7, background: "var(--surface)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontSize: 10, color: "var(--text-dim)" }}>{s}</div>
              ))}
            </div>
          </div>
          <div>
            <h4>产品</h4>
            <ul>
              <li><a onClick={() => onPage("graph")}>公共图谱</a></li>
              <li><a onClick={() => onPage("private")}>私有笔记</a></li>
              <li><a onClick={() => onPage("playground")}>Playground</a></li>
              <li><a>移动端 (Android)</a></li>
              <li><a>API <span className="badge-soon">SOON</span></a></li>
            </ul>
          </div>
          <div>
            <h4>资源</h4>
            <ul>
              <li><a onClick={() => onPage("faq")}>FAQ</a></li>
              <li><a>定价</a></li>
              <li><a>Changelog</a></li>
              <li><a>Status</a></li>
              <li><a>使用指南</a></li>
            </ul>
          </div>
          <div>
            <h4>公司</h4>
            <ul>
              <li><a>关于</a></li>
              <li><a>博客</a></li>
              <li><a>招聘</a></li>
              <li><a>联系</a></li>
              <li><a>媒体素材</a></li>
            </ul>
          </div>
          <div>
            <h4>法律</h4>
            <ul>
              <li><a>隐私</a></li>
              <li><a>服务条款</a></li>
              <li><a>安全</a></li>
              <li><a>DPA</a></li>
              <li><a>删除数据</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 Nodeidea Labs · 数据托管于 Supabase · 新加坡</span>
          <span className="status">所有系统正常 · v0.9.4</span>
        </div>
      </div>
      <div className="footer-mark">Nodeidea</div>
    </footer>
  );
}

window.TopNav = TopNav;
window.Footer = Footer;