// chrome.jsx — Header, Footer, Router

const RouterCtx = React.createContext({ route: "home", go: () => {} });

function useRoute() { return React.useContext(RouterCtx); }

function RouterProvider({ children }) {
  const initial = (typeof window !== "undefined" && window.location.hash.replace("#/", "")) || "home";
  const [route, setRoute] = React.useState(initial || "home");

  React.useEffect(() => {
    const onHash = () => {
      const r = window.location.hash.replace("#/", "") || "home";
      setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (r) => {
    if (r === route) return;
    window.location.hash = "/" + r;
  };

  return <RouterCtx.Provider value={{ route, go }}>{children}</RouterCtx.Provider>;
}

// -------------------------------------------------------------- Header
function Header() {
  const { route, go } = useRoute();
  const NAV = [
    { id: "products", label: "Products" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <header className="hdr">
      <div className="wrap hdr-inner">
        <div className="brand" onClick={() => go("home")} role="link">
          <KaijuMark size={28} tone="ink" />
          <span className="brand-word">Kaiju Labs</span>
          <span className="brand-kanji">怪獣</span>
        </div>
        <nav className="nav">
          {NAV.map(n => (
            <a key={n.id} className={route === n.id ? "on" : ""}
               onClick={() => go(n.id)}>{n.label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

// -------------------------------------------------------------- Footer
function Footer() {
  const { go } = useRoute();
  return (
    <footer className="ftr" data-screen-label="Footer">
      <div className="wrap">
        <div className="ftr-inner">
          <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 460 }}>
            <Lockup size="md" />
            <p style={{ color: "var(--mist)", fontSize: 13, lineHeight: 1.55, marginTop: 6 }}>
              We build small, useful, privacy-first apps for the cities and communities we live in.
              Born in Ontario. Quietly unleashed onto the world.
            </p>
          </div>

          <div style={{ display: "flex", gap: 56, flexWrap: "wrap" }}>
            <FooterCol title="Studio" items={[
              ["About", () => go("about")],
              ["Products", () => go("products")],
            ]} />
            <FooterCol title="Apps" items={[
              ["Toronto Events", () => go("toronto-events")],
            ]} />
            <FooterCol title="Legal" items={[
              ["Privacy Policy", () => go("privacy")],
              ["Terms of Service", () => go("terms")],
            ]} />
          </div>
        </div>

        <div className="rule" style={{ margin: "44px 0 18px" }} />

        <div className="ftr-bot">
          <span className="mono">© 2026 Kaiju Labs Inc. · Ontario, Canada · <span style={{ color: "var(--vermillion)", fontFamily: "var(--serif)" }}>怪獣研究所</span></span>
          <span className="mono" style={{ display: "flex", gap: 18 }}>
            <a onClick={() => go("privacy")}>Privacy</a>
            <a onClick={() => go("terms")}>Terms</a>
            <a href="mailto:support@kaijulabs.ca">support@kaijulabs.ca</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 120 }}>
      <span className="label">{title}</span>
      {items.map(([label, onClick]) => (
        <a key={label} onClick={onClick}
           style={{ fontSize: 14, color: "var(--ink-2)", cursor: "pointer" }}>
          {label}
        </a>
      ))}
    </div>
  );
}

Object.assign(window, { RouterProvider, RouterCtx, useRoute, Header, Footer });