// PRLX site — top navigation bar (thin chrome over footage); hamburger on mobile
function Nav({ onNav, active }) {
  const { Button } = window.PRLXDesignSystem_b1b8b9;
  const { Icon, useViewport } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const { isMobile } = useViewport();

  React.useEffect(() => {
    const root = document.getElementById("prlx-scroll");
    const onScroll = () => setScrolled((root ? root.scrollTop : window.scrollY) > 40);
    const t = root || window;
    t.addEventListener("scroll", onScroll);
    return () => t.removeEventListener("scroll", onScroll);
  }, []);

  // Close the drawer if we grow back to desktop.
  React.useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]);

  const links = ["Work", "Services", "Hire", "Contact"];
  const go = (id) => { setOpen(false); onNav(id); };
  const solid = scrolled || open;
  const isActive = (l) => active && l.toLowerCase() === active.toLowerCase();

  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 100,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: isMobile ? "14px 20px" : "16px 32px",
        background: solid ? "rgba(10,10,10,0.72)" : "transparent",
        backdropFilter: solid ? "blur(12px)" : "none",
        borderBottom: `1px solid ${solid ? "rgba(255,255,255,0.10)" : "transparent"}`,
        transition: "background 220ms cubic-bezier(0.22,1,0.36,1), border-color 220ms, padding 220ms",
      }}
    >
      <img
        src="../../assets/logos/prlx-horizontal-rev.png"
        alt="PRLX — Video Production, Hobart &amp; Darwin"
        style={{ height: isMobile ? 28 : 33, cursor: "pointer" }}
        onClick={() => go("top")}
      />

      {!isMobile && (
        <React.Fragment>
          <nav style={{ display: "flex", alignItems: "center", gap: 30 }}>
            {links.map((l) => (
              <a
                key={l}
                onClick={() => onNav(l.toLowerCase())}
                style={{
                  fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12,
                  textTransform: "uppercase", letterSpacing: "0.16em",
                  color: isActive(l) ? "#fff" : "var(--prlx-graphite-200)", cursor: "pointer", transition: "color 120ms",
                  position: "relative", paddingBottom: 3,
                  borderBottom: isActive(l) ? "2px solid var(--accent)" : "2px solid transparent",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                onMouseLeave={(e) => (e.currentTarget.style.color = isActive(l) ? "#fff" : "var(--prlx-graphite-200)")}
              >
                {l}
              </a>
            ))}
          </nav>
          <Button variant="primary" size="sm" iconRight={<Icon name="ArrowUpRight" size={15} />} onClick={() => onNav("contact")}>
            Start a project
          </Button>
        </React.Fragment>
      )}

      {isMobile && (
        <button
          onClick={() => setOpen((o) => !o)}
          aria-label={open ? "Close menu" : "Open menu"}
          style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            width: 44, height: 44, margin: -8, padding: 0,
            background: "transparent", border: 0, color: "#fff", cursor: "pointer",
          }}
        >
          <Icon name={open ? "X" : "Menu"} size={26} />
        </button>
      )}

      {/* mobile drawer */}
      {isMobile && (
        <div
          style={{
            position: "absolute", top: "100%", left: 0, right: 0,
            background: "rgba(10,10,10,0.94)", backdropFilter: "blur(16px)",
            borderBottom: open ? "1px solid rgba(255,255,255,0.10)" : "1px solid transparent",
            overflow: "hidden",
            maxHeight: open ? 420 : 0,
            opacity: open ? 1 : 0,
            transition: "max-height 320ms cubic-bezier(0.22,1,0.36,1), opacity 220ms ease, border-color 220ms",
          }}
        >
          <nav style={{ display: "flex", flexDirection: "column", padding: "8px 20px 22px" }}>
            {links.map((l) => (
              <a
                key={l}
                onClick={() => go(l.toLowerCase())}
                style={{
                  fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26,
                  textTransform: "uppercase", letterSpacing: "-0.01em",
                  color: isActive(l) ? "var(--accent)" : "#fff", cursor: "pointer", padding: "14px 0",
                  borderBottom: "1px solid rgba(255,255,255,0.08)",
                }}
              >
                {l}
              </a>
            ))}
            <div style={{ marginTop: 20 }}>
              <Button variant="primary" size="md" fullWidth iconRight={<Icon name="ArrowUpRight" size={16} />} onClick={() => go("contact")}>
                Start a project
              </Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { Nav });