// op-system.jsx — Operator design system extracted for reuse across pages.
// Exports tokens + chrome (header, footer) + primitives.
// Loaded AFTER shared.jsx so it can use COPY, NAV, HUBS, MS_BADGES.

const OPSYS = {
  paper: "#f7f6f1",
  paperSoft: "#ecebe3",
  ink: "#161818",
  inkPanel: "#1f2122",
  inkSoft: "#2e3132",
  inkMute: "#6f7274",
  rule: "#dcdbd3",
  ruleStrong: "#bdbcb1",
  signal: "#1d6f5a",
  signalLite: "#2a9579",
  warn: "#a8521b",
  sans: "'Inter Tight', system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace",
};

function OpTag({ children, color, dark }) {
  return (
    <span
      style={{
        fontFamily: OPSYS.mono,
        fontSize: 10,
        letterSpacing: "0.12em",
        textTransform: "uppercase",
        color: color || (dark ? OPSYS.signalLite : OPSYS.inkMute),
        border: `1px solid ${dark ? "rgba(255,255,255,0.18)" : OPSYS.ruleStrong}`,
        padding: "3px 7px",
        display: "inline-block",
        whiteSpace: "nowrap",
      }}
    >
      {children}
    </span>
  );
}

function OpButton({ href, children, kind = "primary", arrow = true, onClick }) {
  const styles = {
    primary: { color: OPSYS.paper, background: OPSYS.ink, border: `1px solid ${OPSYS.ink}` },
    secondary: { color: OPSYS.ink, background: "transparent", border: `1px solid ${OPSYS.ink}` },
    signal: { color: OPSYS.ink, background: OPSYS.signalLite, border: `1px solid ${OPSYS.signalLite}` },
    ghost: { color: OPSYS.ink, background: "transparent", border: "none", padding: 0 },
  }[kind];
  return (
    <a
      href={href}
      onClick={onClick}
      style={{
        fontFamily: OPSYS.sans,
        fontSize: 14,
        fontWeight: 600,
        padding: kind === "ghost" ? 0 : "13px 22px",
        textDecoration: "none",
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        ...styles,
      }}
    >
      {children}
      {arrow && <span style={{ color: kind === "primary" ? OPSYS.signalLite : OPSYS.signal }}>→</span>}
    </a>
  );
}

// Path resolution for nav: subpages set window.__PAGE; homepage doesn't.
const __SUBPAGE = typeof window !== "undefined" && !!window.__PAGE;
const navSlug = (s) => s.toLowerCase().replace(/&\s+/g, "").replace(/\s+/g, "-");
const homeHref = () => (__SUBPAGE ? "../index.html" : "index.html");
const hubHref = (h) => (__SUBPAGE ? h.id + ".html" : h.href);
const itemHref = (item) => (__SUBPAGE ? "" : "pages/") + navSlug(item) + ".html";

// Inject dropdown CSS once
if (typeof document !== "undefined" && !document.getElementById("opsys-nav-style")) {
  const s = document.createElement("style");
  s.id = "opsys-nav-style";
  s.textContent = `
    .wcio-navitem{position:relative}
    .wcio-nav-dd{display:none;position:absolute;top:100%;left:-1px;min-width:280px;
      background:${OPSYS.paper};border:1px solid ${OPSYS.rule};border-top:none;
      box-shadow:0 12px 32px rgba(0,0,0,.10);flex-direction:column;z-index:60}
    .wcio-navitem:hover .wcio-nav-dd,.wcio-nav-dd:hover{display:flex}
    .wcio-nav-dd a{font-family:${OPSYS.sans};font-size:13px;color:${OPSYS.ink};
      text-decoration:none;padding:13px 18px;border-bottom:1px solid ${OPSYS.rule};
      display:flex;justify-content:space-between;align-items:center;
      transition:background .12s,color .12s}
    .wcio-nav-dd a:last-child{border-bottom:none}
    .wcio-nav-dd a:hover{background:${OPSYS.paperSoft};color:${OPSYS.signal}}
    .wcio-nav-dd-overview{background:${OPSYS.ink} !important;color:${OPSYS.paper} !important;font-weight:600}
    .wcio-nav-dd-overview:hover{background:${OPSYS.signal} !important;color:${OPSYS.paper} !important}
    .wcio-nav-dd-tag{font-family:${OPSYS.mono};font-size:10px;letter-spacing:.1em;
      color:${OPSYS.inkMute};text-transform:uppercase}
  `;
  document.head.appendChild(s);
}

function OpHeader({ active }) {
  return (
    <header
      style={{
        background: OPSYS.paper,
        borderBottom: `1px solid ${OPSYS.rule}`,
        padding: "0 56px",
        display: "grid",
        gridTemplateColumns: "auto 1fr auto",
        alignItems: "stretch",
        height: 60,
        position: "sticky",
        top: 0,
        zIndex: 50,
      }}
    >
      <a
        href={homeHref()}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 14,
          paddingRight: 24,
          borderRight: `1px solid ${OPSYS.rule}`,
          textDecoration: "none",
          color: "inherit",
        }}
      >
        <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
          <rect x="1" y="1" width="20" height="20" fill={OPSYS.ink} />
          <rect x="6" y="6" width="10" height="10" fill={OPSYS.signalLite} />
          <rect x="9.5" y="9.5" width="3" height="3" fill={OPSYS.ink} />
        </svg>
        <span
          style={{
            fontFamily: OPSYS.sans,
            fontWeight: 700,
            fontSize: 14,
            letterSpacing: "0.02em",
            color: OPSYS.ink,
            textTransform: "uppercase",
          }}
        >
          Wired CIO
        </span>
      </a>
      <nav style={{ display: "flex", alignItems: "stretch", paddingLeft: 24 }}>
        {NAV.map((n, i) => {
          const hub = HUBS[i];
          return (
            <div
              key={n.label}
              className="wcio-navitem"
              style={{
                borderRight: `1px solid ${OPSYS.rule}`,
                display: "flex",
                alignItems: "stretch",
                borderBottom: active === n.label ? `2px solid ${OPSYS.signal}` : "2px solid transparent",
              }}
            >
              <FlipNavLink
                verb={n.label}
                flipTo={n.flipTo}
                href={hubHref(hub)}
                color={active === n.label ? OPSYS.signal : OPSYS.inkSoft}
                hoverColor={OPSYS.signal}
                font={OPSYS.sans}
                height={58}
                padX={18}
                fontSize={13}
                weight={active === n.label ? 600 : 500}
              />
              <div className="wcio-nav-dd">
                <a href={hubHref(hub)} className="wcio-nav-dd-overview">
                  <span>All of {n.flipTo}</span>
                  <span style={{ opacity: 0.6, fontSize: 11 }}>→</span>
                </a>
                <div style={{ padding: "10px 18px 6px", background: OPSYS.paperSoft, borderBottom: `1px solid ${OPSYS.rule}` }}>
                  <span className="wcio-nav-dd-tag">{n.label} · {hub.items.length} services</span>
                </div>
                {hub.items.map((it) => (
                  <a key={it} href={itemHref(it)}>
                    <span>{it}</span>
                    <span style={{ color: OPSYS.inkMute, fontSize: 11 }}>→</span>
                  </a>
                ))}
              </div>
            </div>
          );
        })}
        {NAV_SECONDARY.map((n, i) => (
          <a
            key={n.label}
            href={n.href}
            style={{
              display: "flex",
              alignItems: "center",
              padding: "0 14px",
              fontFamily: OPSYS.sans,
              fontSize: 13,
              fontWeight: 500,
              color: OPSYS.inkSoft,
              textDecoration: "none",
              borderRight: i < NAV_SECONDARY.length - 1 ? `1px solid ${OPSYS.rule}` : "none",
              transition: "color .15s, background .15s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.color = OPSYS.signal;
              e.currentTarget.style.background = OPSYS.paperSoft;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.color = OPSYS.inkSoft;
              e.currentTarget.style.background = "transparent";
            }}
          >
            {n.label}
          </a>
        ))}
      </nav>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          paddingLeft: 24,
          borderLeft: `1px solid ${OPSYS.rule}`,
        }}
      >
        <span style={{ fontFamily: OPSYS.mono, fontSize: 10, color: OPSYS.inkMute, letterSpacing: "0.1em" }}>
          STATUS · OPERATIONAL
        </span>
        <span
          style={{
            width: 8,
            height: 8,
            borderRadius: "50%",
            background: OPSYS.signalLite,
            boxShadow: `0 0 0 3px ${OPSYS.signalLite}33`,
          }}
        />
        <a
          href={(__SUBPAGE ? "" : "") + "#contact"}
          style={{
            fontFamily: OPSYS.sans,
            fontSize: 13,
            fontWeight: 600,
            color: OPSYS.paper,
            background: OPSYS.ink,
            padding: "8px 14px",
            textDecoration: "none",
            marginLeft: 8,
          }}
        >
          Start a conversation →
        </a>
      </div>
    </header>
  );
}

// Generic page hero — section title + subtitle + crumbs
function OpPageHero({ kicker, title, lede, meta }) {
  return (
    <section
      style={{
        background: OPSYS.paper,
        padding: "0",
        borderBottom: `1px solid ${OPSYS.rule}`,
      }}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          background: OPSYS.paperSoft,
          borderBottom: `1px solid ${OPSYS.rule}`,
          fontFamily: OPSYS.mono,
          fontSize: 10,
          letterSpacing: "0.12em",
          color: OPSYS.inkMute,
          textTransform: "uppercase",
        }}
      >
        {(meta || ["WIRED CIO", kicker, "v1 · 2026.05", "EST. 2018 · CHICAGO"]).map((s, i) => (
          <div
            key={i}
            style={{ padding: "10px 24px", borderRight: i < 3 ? `1px solid ${OPSYS.rule}` : "none" }}
          >
            {s}
          </div>
        ))}
      </div>
      <div style={{ padding: "84px 56px 80px" }}>
        <div
          style={{
            fontFamily: OPSYS.mono,
            fontSize: 11,
            letterSpacing: "0.16em",
            color: OPSYS.signal,
            textTransform: "uppercase",
            marginBottom: 24,
            display: "flex",
            alignItems: "center",
            gap: 12,
          }}
        >
          <span style={{ width: 24, height: 1, background: OPSYS.signal }} />
          {kicker}
        </div>
        <h1
          style={{
            fontFamily: OPSYS.sans,
            fontSize: 88,
            lineHeight: 0.96,
            letterSpacing: "-0.04em",
            color: OPSYS.ink,
            fontWeight: 600,
            margin: 0,
            maxWidth: 1100,
            textWrap: "balance",
          }}
        >
          {title}
        </h1>
        {lede && (
          <p
            style={{
              fontFamily: OPSYS.sans,
              fontSize: 21,
              lineHeight: 1.45,
              color: OPSYS.inkSoft,
              margin: "32px 0 0",
              maxWidth: 760,
            }}
          >
            {lede}
          </p>
        )}
      </div>
    </section>
  );
}

// Two-column section scaffold: 200px label rail + content
function OpSection({ tag, title, children, dark, lastInSet }) {
  return (
    <section
      style={{
        background: dark ? OPSYS.ink : OPSYS.paper,
        color: dark ? OPSYS.paper : OPSYS.ink,
        padding: "120px 56px",
        borderBottom: lastInSet ? "none" : `1px solid ${dark ? "rgba(255,255,255,0.1)" : OPSYS.rule}`,
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 48, marginBottom: title ? 48 : 0 }}>
        <div>
          {tag && <OpTag dark={dark} color={dark ? OPSYS.signalLite : OPSYS.signal}>{tag}</OpTag>}
        </div>
        {title && (
          <h2
            style={{
              fontFamily: OPSYS.sans,
              fontSize: 48,
              lineHeight: 1.02,
              letterSpacing: "-0.03em",
              color: dark ? OPSYS.paper : OPSYS.ink,
              fontWeight: 600,
              margin: 0,
              maxWidth: 900,
              textWrap: "balance",
            }}
          >
            {title}
          </h2>
        )}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 48 }}>
        <div></div>
        <div>{children}</div>
      </div>
    </section>
  );
}

function OpFooter() {
  return (
    <footer style={{ background: OPSYS.ink, color: OPSYS.paper, padding: "60px 56px 24px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 56 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
              <rect x="1" y="1" width="20" height="20" fill={OPSYS.paper} />
              <rect x="6" y="6" width="10" height="10" fill={OPSYS.signalLite} />
              <rect x="9.5" y="9.5" width="3" height="3" fill={OPSYS.ink} />
            </svg>
            <span style={{ fontFamily: OPSYS.sans, fontWeight: 700, fontSize: 14, letterSpacing: "0.02em", textTransform: "uppercase" }}>
              Wired CIO
            </span>
          </div>
          <p style={{ fontFamily: OPSYS.sans, fontSize: 14, lineHeight: 1.5, color: "rgba(247,246,241,0.65)", marginTop: 16, maxWidth: 320 }}>
            We build our clients’ IT department of the future — Microsoft-deep, on your terms.
          </p>
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
            {MS_BADGES.map((b) => (
              <div
                key={b}
                style={{
                  fontFamily: OPSYS.mono,
                  fontSize: 9,
                  letterSpacing: "0.12em",
                  border: "1px solid rgba(255,255,255,0.15)",
                  padding: "8px 10px",
                  color: OPSYS.signalLite,
                }}
              >
                MSP · {b}
              </div>
            ))}
          </div>
        </div>
        {[
          { h: "PRACTICE AREAS", l: HUBS.map((h) => ({ name: `${h.verb} · ${h.name}`, href: hubHref(h) })) },
          { h: "FIRM", l: [{ name: "About", href: "#about" }, { name: "Team", href: "#about" }, { name: "Insights", href: "#insights" }, { name: "Careers", href: "#careers" }] },
          { h: "CONTACT", l: [{ name: "Start a conversation", href: "#contact" }, { name: "Partner inquiries", href: "#contact" }, { name: "Press", href: "#contact" }, { name: "Privacy", href: "#privacy" }, { name: "Terms", href: "#terms" }] },
        ].map((col) => (
          <div key={col.h}>
            <div style={{ fontFamily: OPSYS.mono, fontSize: 10, letterSpacing: "0.16em", color: OPSYS.signalLite, marginBottom: 16 }}>
              {col.h}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {col.l.map((it) => (
                <li key={it.name} style={{ marginBottom: 8 }}>
                  <a href={it.href} style={{ fontFamily: OPSYS.sans, fontSize: 13, color: "rgba(247,246,241,0.72)", textDecoration: "none" }}>
                    {it.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div
        style={{
          marginTop: 48,
          paddingTop: 18,
          borderTop: "1px solid rgba(255,255,255,0.1)",
          display: "flex",
          justifyContent: "space-between",
          fontFamily: OPSYS.mono,
          fontSize: 10,
          color: "rgba(247,246,241,0.5)",
          letterSpacing: "0.08em",
        }}
      >
        <span>© 2026 WIRED CIO · ALL RIGHTS RESERVED</span>
        <span>CHICAGO · REMOTE ACROSS THE U.S.</span>
      </div>
    </footer>
  );
}

// Reusable closing CTA block — used at the bottom of every page
function OpClosingCta({ kicker = "START A CONVERSATION", title = "Pick the path that fits.", lede }) {
  return (
    <section style={{ background: OPSYS.paper, padding: "120px 56px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 48, marginBottom: 48 }}>
        <OpTag color={OPSYS.signal}>§ · CONTACT</OpTag>
        <div>
          <div
            style={{
              fontFamily: OPSYS.mono,
              fontSize: 11,
              letterSpacing: "0.16em",
              color: OPSYS.signal,
              textTransform: "uppercase",
              marginBottom: 16,
            }}
          >
            {kicker}
          </div>
          <h2
            style={{
              fontFamily: OPSYS.sans,
              fontSize: 56,
              lineHeight: 1.02,
              letterSpacing: "-0.03em",
              color: OPSYS.ink,
              fontWeight: 600,
              margin: "0 0 16px",
              textWrap: "balance",
            }}
          >
            {title}
          </h2>
          <p style={{ fontFamily: OPSYS.sans, fontSize: 17, color: OPSYS.inkSoft, margin: 0, maxWidth: 640 }}>
            {lede || "Different situations need different conversations. The path you pick prefills the form on the next page."}
          </p>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 48 }}>
        <div></div>
        <div style={{ border: `1px solid ${OPSYS.ruleStrong}` }}>
          {INTENT_PATHS.map((p, i) => (
            <a
              key={i}
              href={`contact.html?path=${p.q}`}
              style={{
                display: "grid",
                gridTemplateColumns: "120px 1fr 24px",
                gap: 20,
                padding: "22px 26px",
                borderBottom: i < INTENT_PATHS.length - 1 ? `1px solid ${OPSYS.rule}` : "none",
                textDecoration: "none",
                color: OPSYS.ink,
                background: OPSYS.paper,
                transition: "background .15s, color .15s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = OPSYS.ink;
                e.currentTarget.style.color = OPSYS.paper;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = OPSYS.paper;
                e.currentTarget.style.color = OPSYS.ink;
              }}
            >
              <span style={{ fontFamily: OPSYS.mono, fontSize: 11, color: OPSYS.signal, letterSpacing: "0.1em" }}>
                PATH.0{i + 1}
              </span>
              <span style={{ fontFamily: OPSYS.sans, fontSize: 18, fontWeight: 500 }}>{p.label}</span>
              <span style={{ fontFamily: OPSYS.sans, fontSize: 18 }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OPSYS, OpTag, OpButton, OpHeader, OpFooter, OpPageHero, OpSection, OpClosingCta });