// Shared dossier-style chrome: classified bar, header, nav, footer

const ClassifiedBar = () => (
  <div style={{
    background: "#8b0000", color: "#f4ecd8",
    fontFamily: "'JetBrains Mono',monospace",
    fontSize: 10, letterSpacing: 4,
    padding: "3px 48px",
    display: "flex", justifyContent: "space-between",
  }}>
    <span>// CLASSIFIED · 仅限内部阅览 · DO NOT DISTRIBUTE //</span>
    <span>COPY 001 / 001</span>
  </div>
);

const SiteHeader = ({ right }) => (
  <header style={{
    borderBottom: "1px solid #2a2620",
    padding: "14px 48px 16px",
    display: "grid",
    gridTemplateColumns: "auto 1fr auto",
    gap: 40, alignItems: "center",
  }}>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#a89b78", marginBottom: 4 }}>
        VOL. XII · ISSUE 04 · 2026
      </div>
      <div style={{ fontFamily: "'Special Elite',monospace", fontSize: 11, letterSpacing: 2, color: "#8b0000" }}>
        EST. 2017 · 归档中
      </div>
    </div>

    <div style={{ textAlign: "center" }}>
      <a href="index.html">
        <h1 style={{
          fontFamily: "'EB Garamond','Noto Serif SC',serif",
          fontSize: 30, fontWeight: 500, letterSpacing: 8,
          color: "#e8e2d0", marginBottom: 4,
        }}>暗 黑 收 集 站</h1>
        <div className="mono" style={{ fontSize: 10, letterSpacing: 6, color: "#a89b78" }}>
          — AI DARK FILE —
        </div>
      </a>
    </div>

    <div style={{ textAlign: "right" }}>
      {right || (
        <>
          <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#a89b78", marginBottom: 4 }}>档案员 · 06</div>
          <div className="type" style={{ fontSize: 14, color: "#8b0000", letterSpacing: 2 }}>已登录</div>
        </>
      )}
    </div>
  </header>
);

const SiteNav = ({ current }) => {
  const items = [
    ["首页", "HOME", "index.html"],
    ["分类", "CATEGORY", "category.html"],
    ["档案库", "ARCHIVE", "archive.html"],
    ["地图", "MAP", "map.html"],
    ["标签", "TAG", "tag.html"],
    ["关于", "ABOUT", "about.html"],
    ["检索", "SEARCH", "search.html"],
  ];
  return (
    <nav style={{
      borderBottom: "1px solid #2a2620",
      padding: "10px 48px",
      display: "flex", gap: 32, alignItems: "center", fontSize: 13,
    }}>
      {items.map(([zh, en, href]) => {
        const active = current === en;
        return (
          <a key={en} href={href} style={{
            display: "flex", alignItems: "baseline", gap: 6,
            paddingBottom: 2,
            borderBottom: active ? "1px solid #8b0000" : "1px solid transparent",
          }}>
            <span style={{ color: active ? "#e8e2d0" : "#a89b78" }}>{zh}</span>
            <span className="mono" style={{ fontSize: 9, letterSpacing: 1.5, color: "#6a6257" }}>{en}</span>
          </a>
        );
      })}
      <div style={{ flex: 1 }} />
      <div className="mono" style={{ fontSize: 10, color: "#6a6257", letterSpacing: 2 }}>
        总计 {SITE.total_files} 卷 · 未结 {SITE.total_unsolved}
      </div>
      <div style={{ width: 200, display: "flex", alignItems: "center", gap: 8,
        border: "1px solid #2a2620", padding: "4px 10px", background: "#120f0c",
      }}>
        <Crosshair size={11} color="#a89b78" />
        <span className="mono" style={{ fontSize: 11, color: "#6a6257", letterSpacing: 1 }}>搜索案卷 / search...</span>
      </div>
    </nav>
  );
};

const SiteFooter = () => (
  <footer style={{
    borderTop: "1px solid #2a2620",
    marginTop: 60,
    padding: "40px 48px 28px",
    display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40,
    fontSize: 13,
  }}>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginBottom: 10 }}>// 本站声明 / DISCLAIMER</div>
      <p style={{ lineHeight: 1.7, color: "#a89b78", fontStyle: "italic" }}>
        本站收录内容皆为公开资料之再整理与个人记录。所有观点不代表司法结论。
      </p>
    </div>
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: 3, color: "#6a6257", marginBottom: 10 }}>// 归档索引 / INDEX</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 20px", color: "#c9bda0" }}>
        {["按年份", "按地区", "按类型", "按状态", "标签云", "RSS 订阅"].map(x => <a key={x}>· {x}</a>)}
      </div>
    </div>
    <div style={{ textAlign: "right" }}>
      <Stamp text="ARCHIVED" rot={3} />
      <div className="mono" style={{ fontSize: 10, letterSpacing: 2, color: "#6a6257", marginTop: 20 }}>
        暗黑收集站 · EST. 2017<br/>
        © AI DARK FILE · ALL FILES RESERVED
      </div>
    </div>
  </footer>
);

Object.assign(window, { ClassifiedBar, SiteHeader, SiteNav, SiteFooter });