/* chapter-nav.jsx — the GLOBAL site masthead, shared by both volumes.
 *
 * <MastheadNav> renders the chrome that is identical across "A Working Life"
 * and "A Creative Life": the two volume tabs, the "Connect with me" chip, the
 * edition line, and a slot (children) for the volume-specific section sub-nav.
 * One definition, one stylesheet — used here for Working Life via <SubNav>,
 * and on A Creative Life via creative.jsx.
 */
/* global React */

/* Shared masthead — a single, fixed band: VASTOLA wordmark (left) · section
   sub-nav (centre) · Connect with me (right). No top colour-bar band and no
   condense-on-scroll animation. The two volumes ("A Working Life" / "A
   Creative Life") are revealed as a small toggle on rollover of VASTOLA.
   `current` is "working" | "creative"; `edition` is accepted but unused;
   children are the section sub-nav for that volume. */
function MastheadNav({ current = "working", edition = null, children }) {
  /* Volume toggle: hover reveals it on pointer devices (CSS); the caret button
     toggles it on tap/click for touch + keyboard. */
  const [volOpen, setVolOpen] = React.useState(false);
  React.useEffect(() => {
    if (!volOpen) return;
    function onDoc(e) { if (!e.target.closest(".masthead-nav__brand-group")) setVolOpen(false); }
    function onKey(e) { if (e.key === "Escape") setVolOpen(false); }
    document.addEventListener("click", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("click", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [volOpen]);

  return (
    <header className="masthead-nav" aria-label="Site navigation">
      <div className="masthead-meta">
        <div className="masthead-meta__inner">
          {/* Brand group — VASTOLA + a volume toggle (hover on desktop, tap on touch). */}
          <div className="masthead-nav__brand-group" data-volopen={volOpen}>
            <a className="masthead-nav__wordmark" href="/aworkinglife" aria-label="Vastola — home">
              VAS<em>TO</em>LA
            </a>
            <button
              type="button"
              className="masthead-nav__vol-toggle"
              aria-label="Switch volume"
              aria-haspopup="true"
              aria-expanded={volOpen}
              onClick={(e) => { e.stopPropagation(); setVolOpen((v) => !v); }}>
              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <nav className="masthead-nav__volumes" aria-label="Volumes">
              <a
                href="/aworkinglife"
                className={`masthead-nav__volume${current === "working" ? " is-current" : ""}`}
                {...(current === "working" ? { "aria-current": "page" } : {})}>
                A Working Life
              </a>
              <a
                href="/acreativelife"
                className={`masthead-nav__volume${current === "creative" ? " is-current" : ""}`}
                {...(current === "creative" ? { "aria-current": "page" } : {})}>
                A Creative Life
              </a>
            </nav>
          </div>

          {children}

          <a
            className="masthead-nav__connect"
            href="https://www.linkedin.com/in/avastola/"
            target="_blank"
            rel="noopener noreferrer">
            Connect with me
          </a>
        </div>
      </div>
    </header>
  );
}

/* Working Life sub-nav: the three in-page section toggles (About me · Services
   · Career story). Wraps the shared MastheadNav. */
function SubNav({ view, setView }) {
  const year = new Date().getFullYear();
  const edition = (
    <>
      <strong>VOL. I</strong>
      <span className="masthead-nav__edition-rest">
        &nbsp;&nbsp;·&nbsp;&nbsp;{year} EDITION&nbsp;&nbsp;·&nbsp;&nbsp;ISS. 01
      </span>
    </>
  );
  return (
    <MastheadNav current="working" edition={edition}>
      <div className="masthead-nav__sub" role="tablist" aria-label="Section">
        <button
          type="button"
          role="tab"
          aria-selected={view === "about"}
          data-active={view === "about"}
          className="masthead-nav__sub-link"
          onClick={() => setView("about")}>
          About me
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={view === "services"}
          data-active={view === "services"}
          className="masthead-nav__sub-link"
          onClick={() => setView("services")}>
          Services
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={view === "journey"}
          data-active={view === "journey"}
          className="masthead-nav__sub-link"
          onClick={() => setView("journey")}>
          Career story
        </button>
      </div>
    </MastheadNav>
  );
}

Object.assign(window, { SubNav, MastheadNav });