// Footer + search overlay (TopBar lives in chrome.jsx)
const { useState: useStateF, useEffect: useEffectF, useRef: useRefF, useMemo: useMemoF } = React;

// Small social glyph icons — used in the footer social row
function SocialIcon({ name }) {
  const common = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true };
  switch (name) {
    case "twitter":
      // Official X mark
      return (
        <svg {...common}>
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>);
    case "linkedin":
      return (
        <svg {...common}>
          <path d="M4.98 3.5a2.5 2.5 0 11.04 5 2.5 2.5 0 01-.04-5zM3 9h4v12H3zM10 9h3.8v1.7h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.65 4.77 6.1V21H18.4v-5.5c0-1.31-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9V21H10z" />
        </svg>);
    case "instagram":
      return (
        <svg {...common} fill="none" stroke="currentColor" strokeWidth="1.8">
          <rect x="3" y="3" width="18" height="18" rx="4.5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none" />
        </svg>);
    case "github":
      return (
        <svg {...common}>
          <path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.54 2.87 8.39 6.84 9.75.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.36-3.37-1.36-.46-1.18-1.11-1.5-1.11-1.5-.91-.63.07-.62.07-.62 1.01.07 1.54 1.06 1.54 1.06.9 1.56 2.36 1.11 2.93.85.09-.67.35-1.11.64-1.37-2.22-.26-4.55-1.14-4.55-5.06 0-1.12.39-2.03 1.03-2.74-.1-.26-.45-1.3.1-2.7 0 0 .84-.27 2.75 1.05a9.4 9.4 0 015 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.64.71 1.03 1.62 1.03 2.74 0 3.93-2.33 4.79-4.56 5.05.36.32.68.94.68 1.9v2.81c0 .27.18.6.69.49C19.13 20.64 22 16.79 22 12.25 22 6.58 17.52 2 12 2z" />
        </svg>);
    case "substack":
      return (
        <svg {...common}>
          <rect x="3" y="4.5" width="18" height="2.6" />
          <rect x="3" y="9.6" width="18" height="2.6" />
          <path d="M3 14.7h18V21l-9-3.9L3 21z" />
        </svg>);
    default:
      return null;
  }
}

// The Roundtable links → real routes
const ROUNDTABLE = [
  { label: "Writing",    route: "archive" },
  { label: "Manifesto",  route: "manifesto" },
  { label: "Ventures",   route: "projects" },
  { label: "About",      route: "about" },
  { label: "Notes",      route: "notes" },
  { label: "Disclosure", route: "disclosure" },
];

function PageFooter({ navigate }) {
  const { SOCIALS } = window.HOAGS_DATA;
  return (
    <footer className="th-footer-block">
      {/* Top row: logo · The Roundtable (cornerstone) · Sign In / Subscribe */}
      <div className="th-footer-main">
        <a
          href="#home"
          className="th-footer-logo"
          aria-label="Hoags — home"
          onClick={(e) => {e.preventDefault();navigate("home");}}>
          Hoags<span className="th-footer-logo-dot">.</span>
        </a>

        <nav className="th-footer-roundtable" aria-label="Site">
          <div className="th-footer-rt-head">The Roundtable</div>
          <div className="th-footer-rt-grid">
            {ROUNDTABLE.map((item) =>
            <a
              key={item.label}
              href="#"
              className="th-footer-rt-link"
              onClick={(e) => {e.preventDefault();navigate(item.route);}}>
              {item.label}
            </a>
            )}
          </div>
        </nav>

        <div className="th-footer-cta">
          <a
            href="#"
            className="th-footer-btn th-footer-btn-subscribe"
            onClick={(e) => {e.preventDefault();navigate("subscribe");}}>
            Subscribe
          </a>
        </div>
      </div>

      {/* One-liner — the publication's voice */}
      <div className="th-footer-oneliner">
        <p>Working notes from an operator-allocator.</p>
      </div>

      {/* Base row: copyright + RSS · socials */}
      <div className="th-footer-base">
        <span className="th-footer-base-left">
          © 2026 Tom Hogan · New York, NY
          <a href="#" className="th-footer-rss" onClick={(e) => e.preventDefault()}>RSS</a>
        </span>
        <div className="th-footer-socials">
          {SOCIALS.map((s) =>
          <a
            key={s.id}
            href={s.url}
            target="_blank"
            rel="noopener noreferrer"
            className="th-footer-social"
            aria-label={s.name}
            title={`${s.name} · ${s.handle}`}>
            <SocialIcon name={s.id} />
          </a>
          )}
        </div>
      </div>
    </footer>);

}

function SearchOverlay({ open, onClose, navigate }) {
  const { ESSAYS, TAGS } = window.HOAGS_DATA;
  const [q, setQ] = useStateF("");
  const [tag, setTag] = useStateF("All");
  const inputRef = useRefF(null);

  useEffectF(() => {if (open && inputRef.current) inputRef.current.focus();}, [open]);
  useEffectF(() => {
    function onKey(e) {if (e.key === "Escape" && open) onClose();}
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const results = useMemoF(() => {
    const needle = q.trim().toLowerCase();
    return ESSAYS.filter((e) => {
      if (tag !== "All" && e.tag !== tag) return false;
      if (!needle) return true;
      return e.title.toLowerCase().includes(needle) ||
      (e.dek || "").toLowerCase().includes(needle) ||
      e.tag.toLowerCase().includes(needle);
    }).slice(0, 12);
  }, [q, tag]);

  if (!open) return null;
  return (
    <div className="th-search-overlay" onClick={onClose}>
      <div className="th-search-panel" onClick={(e) => e.stopPropagation()}>
        <div className="th-search-input-row">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <circle cx="11" cy="11" r="7" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search essays, notes, tags…" />
          <button className="th-kbd-esc" onClick={onClose}>esc</button>
        </div>
        <div className="th-search-tags">
          {TAGS.map((t) =>
          <button key={t} className={"th-tagchip" + (tag === t ? " is-on" : "")} onClick={() => setTag(t)}>{t}</button>
          )}
        </div>
        <div className="th-search-results">
          {results.length === 0 ?
          <div className="th-search-empty">No matches. Try a different word, or browse the <a href="#" onClick={(e) => {e.preventDefault();onClose();navigate("archive");}}>archive</a>.</div> :
          results.map((e) =>
          <a key={e.id} href="#" className="th-search-result"
          onClick={(ev) => {ev.preventDefault();onClose();navigate("essay", { id: e.id });}}>
              <span className="th-search-result-tag">{e.tag}</span>
              <span className="th-search-result-title">{e.title}</span>
              <span className="th-search-result-date">{e.date}</span>
            </a>
          )}
        </div>
        <div className="th-search-hint">
          <span><kbd>↵</kbd> open</span>
          <span><kbd>esc</kbd> close</span>
          <span style={{ marginLeft: "auto" }}>{ESSAYS.length} pieces in the archive</span>
        </div>
      </div>
    </div>);

}

window.PageFooter = PageFooter;
window.SearchOverlay = SearchOverlay;