/* global React, LockupStacked, Monogram */
const { useEffect: useNavEffect, useState: useNavState } = React;

const NAV_LINKS = [
  { label: "About", href: "#about", index: "01" },
  { label: "Services", href: "#services", index: "02" },
  { label: "Process", href: "#process", index: "03" },
  { label: "Experience", href: "#experience", index: "04" },
];

function Nav() {
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);
  const [progress, setProgress] = useNavState(0);

  useNavEffect(() => {
    const onScroll = () => {
      const top = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setScrolled(top > 12);
      setProgress(max > 0 ? top / max : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50, transition: "background .3s, border-color .3s",
      borderBottom: `1px solid ${scrolled ? "rgba(255,255,255,.06)" : "transparent"}`,
      background: scrolled ? "rgba(8,9,13,.82)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
    }}>
      <nav style={{
        margin: "0 auto", maxWidth: "var(--max-wide)", height: 68, display: "flex",
        alignItems: "center", justifyContent: "space-between", padding: "0 28px",
      }}>
        <a href="#top" aria-label="Applied Decisions, home" className="focus-ring"
          style={{ textDecoration: "none" }}>
          <span className="brand-full"><LockupStacked markSize={26} fontSize={17} /></span>
          <span className="brand-mono"><Monogram markSize={24} fontSize={18} /></span>
        </a>

        <ul style={{ display: "flex", alignItems: "center", gap: 30, listStyle: "none", margin: 0, padding: 0 }} className="nav-desktop">
          {NAV_LINKS.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="focus-ring link-underline nav-link"
                style={{ display: "inline-flex", alignItems: "baseline", gap: 6, textDecoration: "none",
                  fontSize: 14, fontWeight: 500, color: "var(--text-body-2)", transition: "color .2s" }}>
                <span className="kicker nav-idx tnum" style={{ fontSize: 9, color: "var(--text-muted)", transition: "color .2s" }} aria-hidden="true">{l.index}</span>
                {l.label}
              </a>
            </li>
          ))}
          <li>
            <a href="#contact" className="btn-ghost focus-ring" style={{ textDecoration: "none" }}>Book a call</a>
          </li>
        </ul>

        <button type="button" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open}
          onClick={() => setOpen((v) => !v)} className="focus-ring nav-toggle"
          style={{ display: "none", height: 44, width: 44, alignItems: "center", justifyContent: "center",
            background: "transparent", border: "none", color: "#fff", borderRadius: 10, cursor: "pointer" }}>
          <div style={{ position: "relative", height: 16, width: 20 }}>
            <span style={{ position: "absolute", left: 0, height: 2, width: 20, background: "currentColor", transition: "all .3s",
              top: open ? "50%" : 0, transform: open ? "translateY(-50%) rotate(45deg)" : "none" }} />
            <span style={{ position: "absolute", left: 0, top: "50%", height: 2, width: 20, background: "currentColor",
              transform: "translateY(-50%)", transition: "opacity .2s", opacity: open ? 0 : 1 }} />
            <span style={{ position: "absolute", left: 0, height: 2, width: 20, background: "currentColor", transition: "all .3s",
              bottom: open ? "auto" : 0, top: open ? "50%" : "auto", transform: open ? "translateY(-50%) rotate(-45deg)" : "none" }} />
          </div>
        </button>
      </nav>

      <div aria-hidden="true" style={{ height: 1, transformOrigin: "left", transform: `scaleX(${progress})`,
        background: "linear-gradient(to right, rgba(79,124,255,.4), var(--accent))", opacity: scrolled ? 1 : 0, transition: "opacity .3s" }} />

      {open && (
        <div className="nav-mobile" style={{ borderBottom: "1px solid rgba(255,255,255,.06)", background: "rgba(8,9,13,.96)", backdropFilter: "blur(12px)" }}>
          <ul style={{ margin: "0 auto", maxWidth: "var(--max-wide)", display: "flex", flexDirection: "column", gap: 4, padding: "16px 28px", listStyle: "none" }}>
            {NAV_LINKS.map((l) => (
              <li key={l.href}>
                <a href={l.href} onClick={() => setOpen(false)} className="focus-ring"
                  style={{ display: "flex", alignItems: "baseline", gap: 10, borderRadius: 10, padding: "12px 8px", fontSize: 16, fontWeight: 500, color: "var(--text-body)", textDecoration: "none" }}>
                  <span className="kicker tnum" style={{ fontSize: 10, color: "var(--text-muted)" }}>{l.index}</span>
                  {l.label}
                </a>
              </li>
            ))}
            <li style={{ paddingTop: 8 }}>
              <a href="#contact" onClick={() => setOpen(false)} className="focus-ring"
                style={{ display: "block", textAlign: "center", borderRadius: 999, border: "1px solid var(--accent)", background: "var(--accent-soft)", padding: "12px 16px", fontSize: 16, fontWeight: 500, color: "#fff", textDecoration: "none" }}>
                Book a call
              </a>
            </li>
          </ul>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;