/* =========================================================
   COGNERYS - Top nav + footer (v2)
   ========================================================= */
function ThemeToggleButton({ theme, setTheme, className = "", maskId = "moon-cutout" }) {
  return (
    <button
      className={`theme-toggle ${className} ${theme === "dark" ? "is-dark" : "is-light"}`}
      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      <span className={`theme-option ${theme === "light" ? "is-active" : ""}`}>
        <svg className="sun-icon" viewBox="0 0 32 32" aria-hidden="true">
          <circle cx="16" cy="16" r="6.5" />
          <path d="M16 2.5v5M16 24.5v5M2.5 16h5M24.5 16h5M6.45 6.45l3.55 3.55M22 22l3.55 3.55M25.55 6.45 22 10M10 22l-3.55 3.55" />
        </svg>
        <span className="theme-label">Light</span>
      </span>
      <span className="theme-divider" aria-hidden="true"></span>
      <span className={`theme-option ${theme === "dark" ? "is-active" : ""}`}>
        <svg className="moon-icon" viewBox="0 0 32 32" aria-hidden="true">
          <defs>
            <mask id={maskId}>
              <rect width="32" height="32" fill="white" />
              <circle cx="19.5" cy="12.5" r="10" fill="black" />
            </mask>
          </defs>
          <circle cx="15.5" cy="16" r="10.5" mask={`url(#${maskId})`} />
        </svg>
        <span className="theme-label">Dark</span>
      </span>
    </button>
  );
}

function TopNav({ route, setRoute, theme, setTheme }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    setMobileOpen(false);
  }, [route]);

  const navigate = (nextRoute) => {
    setMobileOpen(false);
    setRoute(nextRoute);
  };

  return (
    <header className="topnav">
      <div className="topnav-inner">
        <a className="logo" href="#" aria-label="Cognerys home" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
          <span className="logo-mark"></span>
          <span className="logo-text">Cognerys</span>
        </a>

        <ThemeToggleButton
          theme={theme}
          setTheme={setTheme}
          className="theme-toggle-mobile"
          maskId="moon-cutout-mobile"
        />

        <button
          className={`menu-toggle menu-toggle-compact ${mobileOpen ? "is-open" : ""}`}
          aria-label={mobileOpen ? "Close menu" : "Open menu"}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>

        <nav className="navlinks">
          {NAV.map((n) => (
            <a
              key={n.id}
              href="#"
              className={route === n.id ? "active" : ""}
              onClick={(e) => {
                e.preventDefault();
                navigate(n.id);
              }}
            >
              {n.label}
            </a>
          ))}
        </nav>

        <div className="nav-right">
          <ThemeToggleButton theme={theme} setTheme={setTheme} maskId="moon-cutout-desktop" />

          <button className="pill solid" onClick={() => navigate("contact")}>
            Contact {"\u2192"}
          </button>

          <button
            className={`menu-toggle ${mobileOpen ? "is-open" : ""}`}
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((v) => !v)}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      <div className={`mobile-nav ${mobileOpen ? "is-open" : ""}`}>
        <nav className="mobile-navlinks">
          {NAV.map((n) => (
            <a
              key={n.id}
              href="#"
              className={route === n.id ? "active" : ""}
              onClick={(e) => {
                e.preventDefault();
                navigate(n.id);
              }}
            >
              {n.label}
            </a>
          ))}
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              navigate("contact");
            }}
          >
            Contact
          </a>
        </nav>
      </div>
    </header>
  );
}

function Footer({ setRoute, route }) {
  const isHome = route === "home";
  const blurb = isHome
    ? "Research-led architecture. Real-world outcomes."
    : "An independent research & advisory practice at the intersection of AI, data, and architecture for energy trading firms that take their systems seriously.";

  return (
    <footer className={`footer ${isHome ? "footer-home" : "footer-page"}`}>
      <div className="wrap">
        <div className="footer-inner">
          <div className="footer-brand">
            {isHome ? (
              <div className="footer-mark" aria-hidden="true">
                <span className="logo-mark"></span>
              </div>
            ) : null}
            <div className="footer-intro">
              <p className="colophon">{blurb}</p>
            </div>
            {!isHome ? (
              <div className="footer-mark" aria-hidden="true">
                <span className="logo-mark"></span>
              </div>
            ) : null}
          </div>
          <div className="footer-column">
            <h4>Practice</h4>
            <ul>
              {NAV.slice(0, 4).map((n) => (
                <li key={n.id}>
                  <a href="#" onClick={(e) => { e.preventDefault(); setRoute(n.id); }}>{n.label}</a>
                </li>
              ))}
            </ul>
          </div>
          <div className="footer-column">
            <h4>More</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute("about"); }}>About</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute("contact"); }}>Contact</a></li>
              <li><a href="#">arXiv</a></li>
              <li><a href="#">ORCID</a></li>
            </ul>
          </div>
          <div className="footer-column">
            <h4>{isHome ? "Cognerys" : "Correspondence"}</h4>
            <ul>
              {isHome ? (
                <>
                  <li>Independent practice</li>
                  <li>Est. 2024</li>
                </>
              ) : (
                <>
                  <li>{BRAND.person.email}</li>
                  <li>{BRAND.person.loc}</li>
                </>
              )}
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{"\u00A9"} 2025{"\u2013"}2026 Cognerys Ltd.</span>
          <span>{BRAND.estab}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopNav, Footer });