// Top navigation — sticky, with burger menu on mobile

const Nav = ({ active = "home" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const isMobile = useIsMobile();

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

  // Lock body scroll when burger menu is open
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close menu when navigating to a different breakpoint
  React.useEffect(() => {
    if (!isMobile && open) setOpen(false);
  }, [isMobile, open]);

  const links = [
    { id: "home", label: "Accueil", href: "index.html" },
    { id: "offers", label: "Offres", href: "offres.html" },
    { id: "trainings", label: "Formations", href: "formations.html" },
    { id: "case", label: "Études de cas", href: "etude-de-cas.html" },
    { id: "contact", label: "Contact", href: "contact.html" },
  ];

  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled || open ? "rgba(255,255,255,.96)" : "#fff",
      backdropFilter: scrolled || open ? "blur(14px)" : "none",
      borderBottom: scrolled || open ? "1px solid var(--ahead-line)" : "1px solid transparent",
      transition: "all 200ms cubic-bezier(.2,.7,.2,1)",
      fontFamily: "var(--font-sans)",
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", gap: 24,
        padding: isMobile ? "14px 24px" : "16px 48px",
        maxWidth: 1240,
      }}>
        {/* Logo */}
        <a href="index.html" style={{ textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, flex: "0 0 auto" }}>
          <img src="design/logos/good-things-ahead-white.png" alt="ahead digital"
            style={{ height: isMobile ? 32 : 38, width: "auto", display: "block" }} />
          <span style={{
            fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--ahead-secondary)",
            padding: "4px 10px", borderRadius: 999,
            background: "rgba(255,85,91,.08)",
            whiteSpace: "nowrap",
          }}>AI Practice</span>
        </a>

        {/* Desktop links + CTA */}
        {!isMobile && (
          <>
            <div style={{ display: "flex", gap: 28, marginLeft: 24, flexWrap: "wrap" }}>
              {links.map(l => (
                <a key={l.id} href={l.href}
                  className={`nav-link ${active === l.id ? "is-active" : ""}`}>
                  {l.label}
                </a>
              ))}
            </div>
            <div style={{ marginLeft: "auto" }}>
              <Button variant="accent" size="sm" icon="arrow-right" href="contact.html">
                Échanger
              </Button>
            </div>
          </>
        )}

        {/* Mobile burger button */}
        {isMobile && (
          <button
            onClick={() => setOpen(!open)}
            aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
            aria-expanded={open}
            style={{
              marginLeft: "auto",
              width: 44, height: 44,
              border: "1px solid var(--ahead-line)",
              borderRadius: 10,
              background: open ? "var(--ahead-primary)" : "#fff",
              color: open ? "#fff" : "var(--ahead-primary)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              cursor: "pointer",
              transition: "all 200ms",
            }}
          >
            <Icon name={open ? "x" : "menu"} size={22} stroke={2} color={open ? "#fff" : "var(--ahead-primary)"} />
          </button>
        )}
      </div>

      {/* Mobile dropdown menu */}
      {isMobile && open && (
        <div style={{
          position: "absolute", left: 0, right: 0, top: "100%",
          background: "#fff",
          borderBottom: "1px solid var(--ahead-line)",
          boxShadow: "0 12px 32px -8px rgba(25,23,56,.16)",
          padding: "16px 24px 28px",
          animation: "slide-in-up 240ms cubic-bezier(.2,.7,.2,1) both",
        }}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {links.map(l => (
              <a key={l.id} href={l.href} onClick={() => setOpen(false)}
                style={{
                  textDecoration: "none",
                  fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 500,
                  color: active === l.id ? "var(--ahead-secondary)" : "var(--ahead-primary)",
                  padding: "14px 0",
                  borderBottom: "1px solid var(--ahead-line)",
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                }}>
                {l.label}
                <Icon name="arrow-right" size={16} color={active === l.id ? "var(--ahead-secondary)" : "var(--ahead-fg-3)"} />
              </a>
            ))}
            <div style={{ marginTop: 20 }}>
              <Button variant="accent" icon="arrow-right" href="contact.html"
                style={{ width: "100%", justifyContent: "center" }}>
                Échanger sur votre besoin
              </Button>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

Object.assign(window, { Nav });