/* Chrome.jsx — TopBar (fixed, wordmark + live article counter) and Footer. */

function TopBar({ current, total, onJump }) {
  const [menu, setMenu] = React.useState(false);
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#top" className="topbar-mark"><Wordmark width={188} tagline={false} /></a>

        <div className="topbar-right">
          <div className="topbar-counter">
            <span className="u-label" style={{ color: "var(--sand-text)" }}>ARTICLE</span>
            <span className="topbar-counter-num">{current ? String(current).padStart(2, "0") : "—"}</span>
            <span className="u-label" style={{ color: "var(--sand-text)" }}>/ {total}</span>
          </div>
          <button className="topbar-menu" aria-label="Index" onClick={() => setMenu(m => !m)}>
            {menu ? "CLOSE" : "INDEX"}
          </button>
        </div>
      </div>

      {menu && (
        <nav className="topbar-index">
          <div className="u-label" style={{ color: "var(--ember)", gridColumn: "1 / -1", marginBottom: 6 }}>
            THE ELEVEN UNPRINCIPLES
          </div>
          {window.UNPRINCIPLES.map(p => (
            <button key={p.n} className="index-item" onClick={() => { onJump(p.n); setMenu(false); }}>
              <span className="index-roman">{p.roman}</span>
              <span className="index-name">{p.title}</span>
            </button>
          ))}
        </nav>
      )}
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <Wordmark width={260} ink="var(--bone)" />
          <p className="u-fine" style={{ color: "var(--ash)", marginTop: 18, maxWidth: 360 }}>
            This document is binding, except where it is inconvenient, aspirational, under review,
            or being read by someone who disagrees.
          </p>
        </div>
        <div className="footer-cols">
          <div>
            <div className="u-label" style={{ color: "var(--ember)", marginBottom: 12 }}>ISSUED BY</div>
            <p className="u-fine" style={{ color: "var(--ash)" }}>
              The Bureau of Radical Compliance<br />Office of Conditional Participation<br />Black Rock Desert (approx.)
            </p>
          </div>
          <div>
            <div className="u-label" style={{ color: "var(--ember)", marginBottom: 12 }}>NOTICES</div>
            <p className="u-fine" style={{ color: "var(--ash)" }}>
              Leave no trace.<sup style={{ color: "var(--ember)" }}>†</sup><br />
              <span style={{ color: "var(--sand-text)" }}>†&nbsp;tiny traces excepted.</span>
            </p>
          </div>
        </div>
      </div>
      <hr className="rule" style={{ borderColor: "rgba(201,191,168,.22)", margin: "0 0 18px" }} />
      <div className="footer-base u-fine" style={{ color: "var(--sand-text)" }}>
        <span>★ EST. WHENEVER CONVENIENT</span>
        <span>Ratified by acclamation, then quietly revised.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Footer });