// Top navigation — sticky, paper background, blue Contact pill

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

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

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

  const links = [
    { label: copyText("shared.nav.link_about"), id: "01", anchor: "#about" },
    { label: copyText("shared.nav.link_services"), id: "02", anchor: "#services" },
    { label: copyText("shared.nav.link_ai"), id: "03", anchor: "#ai-innovation" },
    { label: copyText("shared.nav.link_cases"), id: "04", anchor: "#case-studies" },
    { label: copyText("shared.nav.link_newsroom"), id: "05", href: "Subpages.html#newsroom" },
    { label: copyText("shared.nav.link_careers"), id: "06", href: "Subpages.html#careers" },
  ];

  const linkHref = (l) => {
    if (l.href) return l.href;
    const anchor = l.anchor || "#";
    const onHomepage = /(^|\/)(index\.html)?$/i.test(window.location.pathname);
    return onHomepage ? anchor : "index.html" + anchor;
  };

  return (
    <>
    <style>{`
      .r-nav-link { transition: color .2s ease; }
      .r-nav-link::after {
        content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px;
        height: 1.5px; background: var(--blue);
        transform: scaleX(0); transform-origin: left center;
        transition: transform .24s cubic-bezier(.22,1,.36,1);
      }
      .r-nav-link:hover { color: var(--blue); }
      .r-nav-link:hover::after { transform: scaleX(1); }
    `}</style>
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: scrolled ? "rgba(244,241,234,0.85)" : "transparent",
        backdropFilter: scrolled ? "blur(12px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(12px) saturate(140%)" : "none",
        borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
        transition: "background .2s ease, border-color .2s ease",
      }}
    >
      <div
        className="container r-nav-row"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          height: 88,
          gap: 32,
        }}
      >
        <a
          href="index.html"
          aria-label="Ignited home"
          onClick={(e) => {
            if (window.location.pathname.endsWith("index.html") || window.location.pathname.endsWith("/")) {
              e.preventDefault();
              window.scrollTo({ top: 0, behavior: "smooth" });
            }
          }}
          style={{ display: "flex", alignItems: "center" }}
        >
          <Logo />
        </a>

        <nav className="r-nav-links" style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {links.map((l) => (
            <a
              key={l.label}
              href={linkHref(l)}
              className="r-nav-link"
              style={{
                position: "relative",
                padding: "10px 14px",
                fontSize: 13,
                fontWeight: 500,
                letterSpacing: "-0.005em",
                color: "var(--ink)",
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="mono r-nav-est" style={{ color: "var(--muted)", fontSize: 10 }}>{copyText("shared.nav.est")}</span>
          <span className="r-nav-meta" style={{ display: "inline-flex" }}>
            <PillButton as="a" href="Subpages.html#contact" variant="blue" size="sm">
              {copyText("shared.nav.cta")} <ArrowUpRight size={12} />
            </PillButton>
          </span>
          <button
            className="r-nav-toggle"
            aria-label="Open menu"
            onClick={() => setOpen(true)}
            style={{ cursor: "pointer" }}
          >
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none" aria-hidden="true">
              <path d="M1 1h16M1 7h16M1 13h16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </div>

    </header>
    {ReactDOM.createPortal(
      <div className={`r-mobile-drawer${open ? " open" : ""}`} aria-hidden={!open}>
        <button className="r-drawer-close" onClick={() => setOpen(false)}>Close ✕</button>
        {links.map((l) => (
          <a
            key={l.label}
            href={linkHref(l)}
            onClick={() => setOpen(false)}
          >
            {l.label}
          </a>
        ))}
        <div style={{ marginTop: 24 }}>
          <PillButton as="a" href="Subpages.html#contact" variant="blue" size="md" onClick={() => setOpen(false)}>
            {copyText("shared.nav.cta")} <ArrowUpRight size={12} />
          </PillButton>
        </div>
      </div>,
      document.body
    )}
    </>
  );
};

window.Nav = Nav;