/* =========================================================================
   Momentum — Shared site nav with mega menu under "Investeringer"
   ========================================================================= */

const MEGA_CARDS = [
{
  id: "aabne",
  eyebrow: "2 aktuelle",
  title: "Åbne investeringer",
  desc: "Se de investeringsmuligheder vi har åbne lige nu.",
  href: "aabne-investeringer",
  photo: "assets/images/property-nordsjaelland.jpg"
},
{
  id: "realiserede",
  eyebrow: "Realiserede",
  title: "Realiserede investeringer",
  desc: "Gennemførte projekter og leverede afkast.",
  href: "referencer",
  photo: "assets/images/case-open-market.jpg"
}];


const NAV_LINK_PREFIX = typeof window !== "undefined" && window.NAV_HOMEPAGE_PREFIX || "";
// On case.html we want links to point back to index.html#... — set window.NAV_HOMEPAGE_PREFIX = "/"

function navHref(hash) {
  return NAV_LINK_PREFIX ? `${NAV_LINK_PREFIX}${hash}` : hash;
}

function SiteNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [megaOpen, setMegaOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const closeTimer = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const openMega = () => {
    if (closeTimer.current) {clearTimeout(closeTimer.current);closeTimer.current = null;}
    setMegaOpen(true);
  };
  const scheduleCloseMega = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setMegaOpen(false), 140);
  };

  // Pages without a dark hero (info pages) set window.NAV_SOLID so the nav
  // starts in its solid/dark-text state and stays visible on light backgrounds.
  const navSolid = typeof window !== "undefined" && window.NAV_SOLID;
  const cls = "nav" + ((scrolled || navSolid) ? " is-scrolled" : "") + (navSolid ? " is-solid" : "") + (megaOpen ? " has-mega" : "") + (mobileOpen ? " is-mobile-open" : "");

  return (
    <nav className={cls}>
      <a href={navHref("#top") || "/"} className="nav__brand" aria-label="Momentum">
        <img className="img-light" src="assets/logo/momentum-wordmark-white.svg" alt="Momentum" />
        <img className="img-dark" src="assets/logo/momentum-wordmark-blue.svg" alt="Momentum" />
      </a>
      <div className="nav__links">
        <a href="om-os">Om os</a>
        <div
          className={"nav__cases" + (megaOpen ? " is-open" : "")}
          onMouseEnter={openMega}
          onMouseLeave={scheduleCloseMega}>
          
          <a
            href="aabne-investeringer"
            className="nav__cases-trigger"
            aria-expanded={megaOpen}
            aria-haspopup="true">
            
            Investeringer
            <svg className="nav__cases-chev" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>

          <div className="megamenu" role="menu" aria-hidden={!megaOpen}>
            <div className="megamenu__inner">
              <div className="megamenu__cases">
                <div className="megamenu__eyebrow">Investeringer</div>
                <div className="megamenu__cards">
                  {MEGA_CARDS.map((c) =>
                  <a key={c.id} href={c.href} className="megacase">
                      <div className="megacase__photo" style={{ backgroundImage: `url('${c.photo}')` }} />
                      <div className="megacase__body">
                        <div className="megacase__title">{c.title}</div>
                      </div>
                    </a>
                  )}
                </div>
              </div>

              <div className="megamenu__cta">
                <div className="megamenu__cta-eyebrow">Insides</div>
                <h4 className="megamenu__cta-title">Få lignende cases sendt direkte i din indbakke.</h4>
                <a href="bliv-medlem" className="megamenu__cta-btn" style={{ color: "rgb(32, 26, 20)" }}>
                  Tilmeld Insides
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ stroke: "rgb(32, 31, 30)" }}>
                    <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <a href="kontakt">Kontakt</a>
      </div>
      <div className="nav__right">
        <a href="bliv-medlem" className="nav__cta">Bliv medlem</a>
        <button
          className="nav__burger"
          aria-label={mobileOpen ? "Luk menu" : "Åbn menu"}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen(!mobileOpen)}>
          <span /><span /><span />
        </button>
      </div>

      <div className="nav__mobile" aria-hidden={!mobileOpen}>
        <a href="om-os" onClick={() => setMobileOpen(false)}>Om os</a>
        <a href="aabne-investeringer" onClick={() => setMobileOpen(false)}>Åbne investeringer</a>
        <a href="referencer" onClick={() => setMobileOpen(false)}>Realiserede investeringer</a>
        <a href="kontakt" onClick={() => setMobileOpen(false)}>Kontakt</a>
        <a href="bliv-medlem" className="nav__mobile-cta" onClick={() => setMobileOpen(false)}>Bliv medlem</a>
      </div>
    </nav>);

}

Object.assign(window, { SiteNav });