/* global React */
const { useState, useEffect } = React;

function useRoute() {
  const get = () => {
    const h = window.location.hash || "#/";
    return h.replace(/^#/, "") || "/";
  };
  const [route, setRoute] = useState(get);
  useEffect(() => {
    const onHash = () => {
      setRoute(get());
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

function navigate(path) {
  if (!path.startsWith("/")) path = "/" + path;
  window.location.hash = "#" + path;
}

function NavLink({ to, route, children, onClick }) {
  const active = route === to || (to !== "/" && route.startsWith(to));
  return (
    <a
      href={"#" + to}
      className={`nav-link-v2 ${active ? "active" : ""}`}
      onClick={(e) => { onClick && onClick(); }}
    >
      <span className="nav-link-v2-bracket">[</span>
      {children}
      <span className="nav-link-v2-bracket">]</span>
      {active && <span className="nav-link-v2-underline"></span>}
    </a>
  );
}

function NavbarV2({ route, openInterest }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <nav className={`nav-v2 ${scrolled ? "scrolled" : ""} ${open ? "menu-open" : ""}`}>
        <a className="nav-v2-brand" href="#/" onClick={() => setOpen(false)}>
          <img src="assets/logo.png" alt="" className="nav-v2-logo" />
          <span className="nav-v2-brand-text">
            <span className="nav-v2-brand-name">PATCH<span className="accent"> ROBOWARS</span></span>
            <span className="nav-v2-brand-sub">FIGHT NIGHT 2026</span>
          </span>
        </a>

        <div className="nav-v2-links">
          <NavLink to="/" route={route}>HOME</NavLink>
          <NavLink to="/about" route={route}>ABOUT</NavLink>
          <NavLink to="/compete" route={route}>COMPETE</NavLink>
          <NavLink to="/sponsor" route={route}>SPONSOR</NavLink>
          <NavLink to="/gallery/2025" route={route}>FN-2025</NavLink>
          <NavLink to="/gallery/2024" route={route}>FN-2024</NavLink>
        </div>

        <a
          className="nav-v2-cta"
          href="#/register-interest"
          onClick={(e) => { e.preventDefault(); openInterest(); }}
        >
          <span className="nav-v2-cta-dot"></span>
          REGISTER INTEREST →
        </a>

        <button className={`nav-v2-burger ${open ? "open" : ""}`} onClick={() => setOpen(!open)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </nav>

      {open && (
        <div className="nav-v2-mobile">
          <a href="#/" onClick={() => setOpen(false)}>[ HOME ]</a>
          <a href="#/about" onClick={() => setOpen(false)}>[ ABOUT ]</a>
          <a href="#/compete" onClick={() => setOpen(false)}>[ COMPETE ]</a>
          <a href="#/sponsor" onClick={() => setOpen(false)}>[ SPONSOR ]</a>
          <a href="#/gallery/2025" onClick={() => setOpen(false)}>[ FN-2025 ]</a>
          <a href="#/gallery/2024" onClick={() => setOpen(false)}>[ FN-2024 ]</a>
          <a href="#/register-interest" onClick={(e) => { e.preventDefault(); setOpen(false); openInterest(); }} className="cta">★ REGISTER INTEREST</a>
        </div>
      )}
    </>
  );
}

function FooterV2({ openInterest }) {
  return (
    <footer className="footer-v2">
      <div className="footer-v2-grid">
        <div className="footer-v2-col">
          <div className="footer-v2-brand">
            <img src="assets/logo.png" alt="" />
            <div>
              <div className="footer-v2-brand-name">PATCH ROBOWARS</div>
              <div className="footer-v2-brand-sub">Fight Night 2026 · Dogpatch Labs · Dublin</div>
            </div>
          </div>
          <p className="footer-v2-blurb">
            A student-run battle-bot league seeding Ireland's hardware industry.
            Operating under the Patch programme umbrella.
          </p>
        </div>
        <div className="footer-v2-col">
          <div className="footer-v2-h">NAVIGATE</div>
          <a href="#/about">[ ABOUT ]</a>
          <a href="#/compete">[ COMPETE ]</a>
          <a href="#/sponsor">[ SPONSOR ]</a>
          <a href="#/gallery/2025">[ FN-2025 ]</a>
          <a href="#/gallery/2024">[ FN-2024 ]</a>
          <a href="#/register-interest" onClick={(e) => { e.preventDefault(); openInterest(); }}>[ REGISTER INTEREST ]</a>
        </div>
        <div className="footer-v2-col">
          <div className="footer-v2-h">CONTACT</div>
          <a href="mailto:hello@patchrobowars.ie">hello@patchrobowars.ie</a>
          <a href="mailto:sponsor@patchrobowars.ie">sponsor@patchrobowars.ie</a>
          <a href="mailto:apply@patchrobowars.ie">apply@patchrobowars.ie</a>
        </div>
        <div className="footer-v2-col">
          <div className="footer-v2-h">SAFETY</div>
          <p className="footer-v2-fine">
            All bots safety-certified. SPARC-derived ruleset. Combat robotics
            carries inherent risk; participants and spectators must follow safety
            briefings on the night.
          </p>
        </div>
      </div>
      <div className="footer-v2-base">
        <div>FN-26 · DUBLIN · IE · v0.3.4</div>
        <div>© 2026 PATCH ROBOWARS · ALL RIGHTS RESERVED</div>
        <div className="amber">● ARENA OFFLINE</div>
      </div>
    </footer>
  );
}

Object.assign(window, { useRoute, navigate, NavbarV2, FooterV2 });