// Global nav with hover mega-menu for Fixtures/Stands/About, flat link for Configure.
// Vaults and Resources are deferred to the Production phase (see TASKS.md).
const NAV_STRUCT = [
  {
    k: "Fixtures",
    href: "Nova Fixtures.html",
    items: [
      { t: "Eden line", s: "Warm, furniture-grade Baltic Birch" },
      { t: "Walls & display", s: "Backwall, lightbox, shelf, pegboard" },
      { t: "All fixtures", s: "Counter, totem, bench, tech mount, lamp" },
    ],
  },
  {
    k: "Stands",
    href: "Nova Stands.html",
    items: [
      { t: "10×10", s: "Presence kit · 5-piece stand" },
      { t: "10×20", s: "Environment kit" },
      { t: "20×20", s: "Destination kit" },
    ],
  },
  { k: "Configure", href: "Nova Configurator.html", flat: true, flag: "3D" },
  {
    k: "About",
    items: [
      { t: "Our story", s: "Built by experience" },
      { t: "The spine", s: "Universal structural chassis" },
      { t: "Sustainability", s: "Refurbishable, reusable, responsible" },
    ],
    href: "Nova About.html",
  },
];

// Manual US/UK region switcher (§12). Persists the choice in localStorage and
// reloads so every price + contact block re-reads the active region.
const RegionSwitcher = () => {
  const cur = window.getNovaRegion ? window.getNovaRegion() : "us";
  const regions = window.REGIONS || {};
  const pick = (code) => {
    if (code === cur) return;
    // On a production domain, switching region crosses to the other domain
    // (.com ↔ .co.uk) so the URL and region always match.
    const url =
      window.NovaRegion && window.NovaRegion.switchRegionUrl
        ? window.NovaRegion.switchRegionUrl(code)
        : null;
    if (url) {
      window.location.assign(url);
      return;
    }
    // Off-production (localhost, *.web.app previews): toggle via localStorage.
    if (window.setNovaRegion) {
      window.setNovaRegion(code);
      window.location.reload();
    }
  };
  return (
    <div className="nv-region" role="group" aria-label="Region">
      {["us", "uk"].map((c) =>
        regions[c] ? (
          <button
            key={c}
            type="button"
            className={`nv-region__btn ${cur === c ? "is-on" : ""}`}
            aria-pressed={cur === c}
            onClick={() => pick(c)}
            title={`${regions[c].label} · ${regions[c].symbol}`}
          >
            {regions[c].short} {regions[c].symbol}
          </button>
        ) : null
      )}
    </div>
  );
};

const NavMegaPanel = ({ col }) => (
  <div className="nv-mega">
    <div className="nv-mega__inner">
      <div className="nv-mega__eyebrow">{col.k}</div>
      <ul className="nv-mega__list">
        {col.items.map((it) => (
          <li key={it.t}>
            <a href={col.href || "#"}>
              <span className="nv-mega__t">{it.t}</span>
              <span className="nv-mega__s">{it.s}</span>
              <span className="nv-mega__arrow">→</span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  </div>
);

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  const closeTimer = React.useRef(null);

  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);

  const enter = (k) => {
    clearTimeout(closeTimer.current);
    setOpen(k);
  };
  const leave = () => {
    closeTimer.current = setTimeout(() => setOpen(null), 120);
  };

  return (
    <nav
      className={`nv-nav ${scrolled || open ? "is-scrolled" : ""} ${open ? "is-open" : ""}`}
      onMouseLeave={leave}
    >
      <div className="nv-nav__inner">
        <a href="Nova Landing.html" className="nv-nav__brand">
          <NovaMark size={24} />
          <span className="nv-nav__name">Nova</span>
        </a>
        <ul className="nv-nav__links">
          {NAV_STRUCT.map((col) => (
            <li
              key={col.k}
              className={`nv-nav__li ${open === col.k ? "is-on" : ""}`}
              onMouseEnter={() => enter(col.k)}
            >
              <a href={col.href || "#"}>
                {col.k}
                {col.flag && <span className="nv-nav__flag">{col.flag}</span>}
                {!col.flat && <span className="nv-nav__caret">▾</span>}
              </a>
            </li>
          ))}
        </ul>
        <div className="nv-nav__ctas">
          <RegionSwitcher />
          <a href="Nova Landing.html#contact" className="nv-nav__link">Request a quote</a>
          <a href="Nova Configurator.html" className="nv-btn nv-btn--dark nv-btn--sm">
            Configure &amp; buy <span className="nv-arrow">→</span>
          </a>
        </div>
      </div>

      {/* Mega panel */}
      {open && NAV_STRUCT.find((c) => c.k === open && !c.flat) && (
        <NavMegaPanel col={NAV_STRUCT.find((c) => c.k === open)} />
      )}
    </nav>
  );
};
window.Nav = Nav;