// Shared chrome — top nav, badges, etc.

const TopNav = ({ active = "library", mobile = false }) => {
  if (mobile) {
    return (
      <div className="mob-nav">
        <div className="brand">Anatomy <span className="mono" style={{ color: "var(--ink-3)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", marginLeft: 4 }}>of a Paper</span></div>
        <button className="btn--soft btn btn--sm">Menu</button>
      </div>
    );
  }
  return (
    <header className="topnav">
      <div className="brand">
        Anatomy of a Paper
        <small>· public dossier ·</small>
      </div>
      <nav>
        <a href="#" className={active === "library" ? "active" : ""}>Library</a>
        <a href="#" className={active === "fields" ? "active" : ""}>Fields</a>
        <a href="#" className={active === "about" ? "active" : ""}>About the project</a>
        <a href="#" className={active === "method" ? "active" : ""}>Editorial method</a>
        <a href="#" style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase" }}>Admin</a>
      </nav>
    </header>
  );
};

const Badge = ({ kind, children, plain = false }) => (
  <span className={`badge ${kind} ${plain ? "badge--plain" : ""}`}>{children}</span>
);

const ConfBadge = ({ c }) => <Badge kind={confClass(c)}>{confLabel(c)}</Badge>;
const StatusBadge = ({ s }) => <Badge kind={statusClass(s)}>{statusLabel(s)}</Badge>;

const Tag = ({ children }) => <span className="tag">{children}</span>;

const SectionHead = ({ num, title, desc }) => (
  <div className="section-head">
    <div className="num">§ {num}</div>
    <div>
      <h2>{title}</h2>
      <p>{desc}</p>
    </div>
  </div>
);

const Footer = () => (
  <footer style={{ borderTop: "1px solid var(--rule)", marginTop: 80, padding: "32px 40px", display: "flex", justifyContent: "space-between", alignItems: "baseline", fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: ".05em" }}>
    <div>Anatomy of a Paper · An editorial project · Est. 2025</div>
    <div style={{ display: "flex", gap: 24 }}>
      <a href="#" style={{ color: "var(--ink-3)", border: 0 }}>Editorial method</a>
      <a href="#" style={{ color: "var(--ink-3)", border: 0 }}>Contact</a>
      <a href="#" style={{ color: "var(--ink-3)", border: 0 }}>RSS</a>
    </div>
  </footer>
);

Object.assign(window, { TopNav, Badge, ConfBadge, StatusBadge, Tag, SectionHead, Footer });