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

const NAV_ITEMS = [
  { id: "home",    label: "Home" },
  { id: "company", label: "Company" },
  { id: "projects",label: "Projects" },
  { id: "services",label: "Services" },
  { id: "team",    label: "Team" },
  { id: "contact", label: "Contact" },
];

function Nav() {
  const [scrolled, setScrolled] = useStateN(false);
  const [overHero, setOverHero] = useStateN(true);
  const [active, setActive] = useStateN("home");
  const [open, setOpen] = useStateN(false);

  useEffectN(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      const heroEl = document.getElementById("home");
      if (heroEl) {
        const rect = heroEl.getBoundingClientRect();
        setOverHero(rect.bottom > 80);
      }
      const sections = NAV_ITEMS.map(n => document.getElementById(n.id)).filter(Boolean);
      for (let i = sections.length - 1; i >= 0; i--) {
        const r = sections[i].getBoundingClientRect();
        if (r.top < window.innerHeight * 0.4) {
          setActive(sections[i].id);
          break;
        }
      }
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const isLight = overHero && !scrolled;
  const cls = ["nav", scrolled ? "is-scrolled" : "", overHero ? "is-over-hero" : ""].filter(Boolean).join(" ");

  return (
    <header className={cls}>
      <a href="#home" className="wordmark" aria-label="One Haus Developments home">
        <img
          src={isLight ? "images/logo/beige.png" : "images/logo/brown.png"}
          alt="One Haus Developments"
          className="nav-logo"
        />
      </a>

      <nav className="nav-links" aria-label="Primary">
        {NAV_ITEMS.map(n => (
          <a
            key={n.id}
            href={`#${n.id}`}
            className={"nav-link" + (active === n.id ? " is-active" : "")}
          >
            {n.label}
          </a>
        ))}
      </nav>

      <a href="#contact" className="nav-cta">Start a project</a>

      <button
        className="nav-burger"
        aria-label="Open menu"
        onClick={() => setOpen(v => !v)}
      >
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
          <path d="M0 1H16M0 9H16" stroke="currentColor" strokeWidth="1.2"/>
        </svg>
      </button>

      {open && (
        <div style={{
          position: "absolute", top: "100%", left: 0, right: 0,
          background: "var(--bg)", borderBottom: "1px solid var(--rule-soft)",
          padding: "8px 24px 16px", display: "flex", flexDirection: "column", gap: 0,
        }}>
          {NAV_ITEMS.map(n => (
            <a
              key={n.id}
              href={`#${n.id}`}
              onClick={() => setOpen(false)}
              style={{
                padding: "14px 0",
                borderBottom: "1px solid var(--rule-soft)",
                fontFamily: "var(--ff-display)",
                color: "var(--brown)",
                fontSize: 15,
              }}
            >{n.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;