// Inera People — marketing site: top navigation
(() => {
const { Logo, Button } = window.IneraPeopleDesignSystem_7b6830;

function scrollToId(id) {
  const el = document.getElementById(id);
  const sc = document.querySelector("[data-scroll]");
  if (el && sc) sc.scrollTo({ top: el.offsetTop - 12, behavior: "smooth" });
}

function SiteNav({ onContact }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  // Whole site is a single dark family — the nav stays on the dark theme throughout.
  // We only track whether the page has scrolled, to fade in a subtle sticky backdrop.
  React.useEffect(() => {
    const sc = document.querySelector("[data-scroll]");
    if (!sc) return;
    const onScroll = () => setScrolled(sc.scrollTop > 40);
    onScroll();
    sc.addEventListener("scroll", onScroll, { passive: true });
    return () => sc.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Métiers", "métiers"], ["Missions", "missions"], ["Approche", "approche"],
    ["Fondatrice", "fondatrice"],
  ];
  const go = (id) => { scrollToId(id); setOpen(false); };

  const linkBase = "var(--ink-300)";
  const linkHover = "var(--ink-50)";
  const burgerColor = "var(--ink-50)";
  const burgerBorder = "var(--border-on-ink-strong)";
  const logoSrc = "assets/logo-silver.png";
  const showBackdrop = open || scrolled;

  return (
    <header style={{
      position: "sticky", top: 0, left: 0, right: 0, zIndex: 50, marginBottom: -66,
      background: showBackdrop ? "rgba(13,13,13,0.72)" : "transparent",
      backdropFilter: showBackdrop ? "blur(14px) saturate(1.4)" : "none",
      WebkitBackdropFilter: showBackdrop ? "blur(14px) saturate(1.4)" : "none",
      borderBottom: showBackdrop ? "1px solid var(--border-on-ink)" : "1px solid transparent",
      transition: "background-color 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease",
    }}>
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "14px clamp(20px, 5vw, 56px)",
      }}>
        <img src={logoSrc} alt="Inera People" style={{ height: 38, width: "auto", display: "block", transition: "opacity 200ms ease" }} />

        {/* desktop links */}
        <nav className="site-nav-links" style={{ display: "flex", alignItems: "center", gap: 34 }}>
          <div style={{ display: "flex", gap: 30 }}>
            {links.map(([label, id]) => (
              <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); go(id); }} style={{
                fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)",
                fontWeight: 600, color: linkBase, textDecoration: "none",
                transition: "color 160ms ease", cursor: "pointer",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = linkHover)}
              onMouseLeave={(e) => (e.currentTarget.style.color = linkBase)}>{label}</a>
            ))}
          </div>
          <Button variant="metal" size="sm" onClick={() => go("contact")} style={{ borderRadius: 10 }}>Prendre contact</Button>
        </nav>

        {/* mobile hamburger */}
        <button className="nav-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((v) => !v)} style={{
          display: "none", width: 42, height: 42, alignItems: "center", justifyContent: "center",
          background: "transparent", border: `1px solid ${burgerBorder}`, borderRadius: "var(--radius-md)",
          cursor: "pointer", color: burgerColor, transition: "color 200ms ease, border-color 200ms ease",
        }}>
          <span style={{ position: "relative", width: 18, height: 12, display: "inline-block" }}>
            <span style={{ position: "absolute", left: 0, top: open ? 5 : 0, width: 18, height: 1.5, background: "currentColor", transform: open ? "rotate(45deg)" : "none", transition: "transform 220ms ease, top 220ms ease, opacity 220ms ease" }} />
            <span style={{ position: "absolute", left: 0, top: 5, width: 18, height: 1.5, background: "currentColor", opacity: open ? 0 : 1, transition: "opacity 160ms ease" }} />
            <span style={{ position: "absolute", left: 0, top: open ? 5 : 10, width: 18, height: 1.5, background: "currentColor", transform: open ? "rotate(-45deg)" : "none", transition: "transform 220ms ease, top 220ms ease" }} />
          </span>
        </button>
      </div>

      {/* mobile dropdown */}
      <div className="nav-mobile" style={{
        display: "none", overflow: "hidden",
        maxHeight: open ? 400 : 0, opacity: open ? 1 : 0,
        transition: "max-height 320ms var(--ease-out), opacity 240ms ease",
        borderTop: open ? "1px solid var(--border-on-ink)" : "1px solid transparent",
      }}>
        <div style={{ display: "flex", flexDirection: "column", padding: "10px clamp(20px,5vw,56px) 22px", gap: 4 }}>
          {links.map(([label, id]) => (
            <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); go(id); }} style={{
              fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", fontWeight: 600,
              color: "var(--ink-200)", textDecoration: "none", padding: "12px 0",
              borderBottom: "1px solid var(--border-on-ink)",
            }}>{label}</a>
          ))}
          <div style={{ marginTop: 14 }}>
            <Button variant="metal" size="md" fullWidth onClick={() => go("contact")} style={{ borderRadius: 10 }}>Prendre contact</Button>
          </div>
        </div>
      </div>
    </header>
  );
}

window.SiteNav = SiteNav;
})();