// Top bar — LOCKED navy masthead band.
// Utility row: Vol/Date · oxblood dot · date · Sign In
// Main row:    Hoags lockup · Home/About/Articles/Manifesto/The Loop · Subscribe · Search
const { useState: useStateBar2, useEffect: useEffectBar2, useRef: useRefBar2 } = React;

function TopBar({ route, navigate, onOpenSearch }) {
  const [openMenu, setOpenMenu] = useStateBar2(null); // null | "writing" | "loop"
  const writingRef = useRefBar2(null);
  const loopRef = useRefBar2(null);

  useEffectBar2(() => {
    function onClick(e) {
      const inWriting = writingRef.current && writingRef.current.contains(e.target);
      const inLoop = loopRef.current && loopRef.current.contains(e.target);
      if (!inWriting && !inLoop) setOpenMenu(null);
    }
    function onKey(e) {if (e.key === "Escape") setOpenMenu(null);}
    window.addEventListener("mousedown", onClick);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("mousedown", onClick);
      window.removeEventListener("keydown", onKey);
    };
  }, []);

  // Writing dropdown — the only dropdowns left are Writing + The Loop
  const writingTypes = [
  { id: "Investing", label: "Equities & Investing", desc: "Market reads, position sizing, post-mortems." },
  { id: "Building", label: "Building & Operating", desc: "Build logs, operator notes, frameworks." },
  { id: "Flashpoint", label: "Flashpoint", desc: "The recurring column. Markets, and lives, decided in the gray." },
  { id: "All", label: "Full writing archive →", desc: "Every essay, filterable by column.", isAll: true }];

  // Masthead Vol/Date is driven by the real publish state — newest essay.
  // Volume = number of issues published; date = the latest essay's date.
  const { ESSAYS } = window.HOAGS_DATA;
  const volume = ESSAYS.length;
  const issueDate = ESSAYS[0].date;

  return (
    <header className="th-masthead">
      {/* ===== Utility row: Vol/Date + Sign In ===== */}
      <div className="th-masthead-utility">
        <span className="th-masthead-voldate">
          <strong>Vol. {volume}</strong>
          <span className="th-masthead-dot" aria-hidden="true" />
          <span>{issueDate}</span>
        </span>
        <a href="#" className="th-masthead-signin" onClick={(e) => {e.preventDefault();navigate("subscribe");}}>Sign in</a>
      </div>

      {/* ===== Main row: lockup · nav · Subscribe · Search ===== */}
      <div className="th-masthead-main">
        <a
          href="#home"
          onClick={(e) => {e.preventDefault();navigate("home");}}
          className="th-masthead-lockup-link"
          aria-label="Hoags">
          <HoagsMark size={42} tone="dark" />
        </a>

        <nav className="th-masthead-nav">
          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("home");}}
            className={"th-navlink" + (route === "home" ? " is-active" : "")}>
            Home</a>

          {/* Writing dropdown — the essays */}
          <div className="th-articles-wrap" ref={writingRef}>
            <button
              className={"th-navlink th-articles-trigger" + (openMenu === "writing" ? " is-open" : "") + (route === "archive" ? " is-active" : "")}
              onClick={() => setOpenMenu(openMenu === "writing" ? null : "writing")}
              aria-expanded={openMenu === "writing"}>
              Writing
              <svg width="9" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ marginLeft: 6, transform: openMenu === "writing" ? "rotate(180deg)" : "none", transition: "transform 160ms" }}>
                <path d="M1 1l4 4 4-4" />
              </svg>
            </button>
            {openMenu === "writing" &&
            <div className="th-articles-menu">
                <div className="th-articles-menu-eyebrow th-eyebrow">The operator's view</div>
                {writingTypes.map((t) =>
              <a
                key={t.id}
                href="#"
                className={"th-articles-item" + (t.isAll ? " is-all" : "")}
                onClick={(e) => {
                  e.preventDefault();
                  setOpenMenu(null);
                  navigate("archive", { tag: t.id });
                }}>
                <span className="th-articles-item-label">{t.label}</span>
                    <span className="th-articles-item-desc">{t.desc}</span>
                  </a>
              )}
              </div>
            }
          </div>

          {/* Notes — direct link, sub-sections on the page itself */}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("notes");}}
            className={"th-navlink" + (route === "notes" ? " is-active" : "")}>
            Notes</a>

          {/* Elsewhere — direct link, ventures + Twitter feed on the page itself */}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("elsewhere");}}
            className={"th-navlink" + (route === "elsewhere" ? " is-active" : "")}>
            Elsewhere</a>

          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("track");}}
            className={"th-navlink" + (route === "track" ? " is-active" : "")}>
            Track record</a>

          {/* About Tom — the byline behind the writing, before the Loop ask */}
          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("about");}}
            className={"th-navlink" + (route === "about" ? " is-active" : "")}>
            About Tom</a>

          {/* The Loop dropdown */}
          <div className="th-articles-wrap" ref={loopRef}>
            <button
              className={"th-navlink th-articles-trigger" + (openMenu === "loop" ? " is-open" : "") + (route === "loop" ? " is-active" : "")}
              onClick={() => setOpenMenu(openMenu === "loop" ? null : "loop")}
              aria-expanded={openMenu === "loop"}>
              The Loop
              <svg width="9" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ marginLeft: 6, transform: openMenu === "loop" ? "rotate(180deg)" : "none", transition: "transform 160ms" }}>
                <path d="M1 1l4 4 4-4" />
              </svg>
            </button>
            {openMenu === "loop" &&
            <div className="th-articles-menu th-loop-menu">
                <a href="#" className="th-articles-item" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("loop");}}>
                  <span className="th-articles-item-label">About The Loop</span>
                  <span className="th-articles-item-desc">A small network of operators, allocators, and builders who ship.</span>
                </a>
                <a href="#" className="th-articles-item" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("loop");}}>
                  <span className="th-articles-item-label">What's inside</span>
                  <span className="th-articles-item-desc">Working notes, frameworks, positions, post-mortems.</span>
                </a>
                <a href="#" className="th-articles-item" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("loop");}}>
                  <span className="th-articles-item-label">Who it's for</span>
                  <span className="th-articles-item-desc">Young, ambitious operators &amp; allocators. Founders, PMs, builders.</span>
                </a>
                <a href="#" className="th-articles-item" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("loop");}}>
                  <span className="th-articles-item-label">Networking · Round Table</span>
                  <span className="th-articles-item-desc">Members-only intros, monthly threads, evening Round Table seats.</span>
                </a>
                <a href="#" className="th-articles-item" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("subscribe");}}>
                  <span className="th-articles-item-label">How to get involved</span>
                  <span className="th-articles-item-desc">$10/mo or $80/yr. Cancel anytime.</span>
                </a>
                <a href="#" className="th-articles-item is-all" onClick={(e) => {e.preventDefault();setOpenMenu(null);navigate("subscribe");}}>
                  <span className="th-articles-item-label">Join The Loop →</span>
                  <span className="th-articles-item-desc">Become a member.</span>
                </a>
              </div>
            }
          </div>
        </nav>

        <div className="th-masthead-actions">
          <a
            href="#"
            onClick={(e) => {e.preventDefault();navigate("subscribe");}}
            className={"th-masthead-subscribe" + (route === "subscribe" ? " is-active" : "")}>
            Subscribe
          </a>
          <button className="th-masthead-search" onClick={onOpenSearch} aria-label="Search writing">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="7" />
              <path d="m21 21-4.3-4.3" />
            </svg>
            <kbd>⌘K</kbd>
          </button>
        </div>
      </div>
    </header>);

}

window.TopBar = TopBar;