/* global React, Icon, t */

function Nav({ lang, setLang, route, navigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { key: "about",    route: "about",    label: t("nav.about", lang) },
    { key: "idia",     route: "idia",     label: t("nav.idia", lang) },
    { key: "programs", route: "program",  label: t("nav.programs", lang) },
    { key: "events",   route: "event",    label: t("nav.events", lang) },
    { key: "media",    route: "media",    label: t("nav.media", lang) },
    { key: "blog",     route: "blog",     label: t("nav.blog", lang) },
  ];

  const onClick = (e, target) => {
    e.preventDefault();
    setOpen(false);
    navigate(target);
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.84)" : "rgba(255,255,255,0.0)",
      backdropFilter: scrolled ? "saturate(160%) blur(10px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(160%) blur(10px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line-1)" : "1px solid transparent",
      transition: "background 200ms var(--ease-out), border-color 200ms var(--ease-out)",
    }}>
      <div className="container-wide nav-shell" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 72, gap: 24,
      }}>
        <a href="#home" onClick={(e) => onClick(e, "home")} className="nav-logo" style={{
          display: "flex", alignItems: "center", gap: 10, borderBottom: "none",
        }}>
          <img src="assets/logo-immersia.png" alt="ImmersIA"
               style={{ height: 36, width: "auto" }} />
        </a>

        <nav style={{
          display: "flex", alignItems: "center", gap: 4,
        }} className="primary-nav">
          {links.map((l) => {
            const active = route === l.route || (l.key === "events" && ["vibe", "community"].includes(route));
            return (
              <a key={l.key}
                 href={`#${l.route}`}
                 onClick={(e) => onClick(e, l.route)}
                 style={{
                   padding: "9px 14px",
                   fontFamily: "var(--font-display)",
                   fontWeight: 500, fontSize: 14,
                   color: active ? "var(--brand)" : "var(--fg-2)",
                   borderBottom: "none",
                   borderRadius: 8,
                   position: "relative",
                 }}>
                {l.label}
                {active && (
                  <span style={{
                    position: "absolute", left: 14, right: 14, bottom: 4,
                    height: 2, background: "var(--brand)", borderRadius: 2,
                  }}/>
                )}
              </a>
            );
          })}
        </nav>

        <div className="nav-actions" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div role="group" aria-label="Language" style={{
            display: "inline-flex", border: "1px solid var(--line-1)",
            borderRadius: 999, padding: 3, gap: 0, background: "white",
          }} className="lang-switch">
            {["en", "fr"].map((code) => (
              <button key={code}
                onClick={() => setLang(code)}
                style={{
                  border: "none", background: lang === code ? "var(--brand)" : "transparent",
                  color: lang === code ? "white" : "var(--fg-2)",
                  fontFamily: "var(--font-display)",
                  fontWeight: 600, fontSize: 12, letterSpacing: "0.08em",
                  padding: "6px 12px", borderRadius: 999, textTransform: "uppercase",
                  transition: "all 200ms var(--ease-out)",
                }}>{code}</button>
            ))}
          </div>
          <a href="#contact" onClick={(e) => onClick(e, "contact")}
             className="btn btn-primary btn-sm nav-contact">
            {t("nav.contact", lang)}
            <Icon name="arrow-right" size={14} />
          </a>
          <button
            type="button"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            className="mobile-menu-button"
            style={{
              display: "none",
              width: 42,
              height: 42,
              borderRadius: 999,
              border: "1px solid var(--line-1)",
              background: "white",
              color: "var(--fg-1)",
              alignItems: "center",
              justifyContent: "center",
            }}>
            <Icon name={open ? "x" : "menu"} size={19}/>
          </button>
        </div>
      </div>

      {open && (
        <div className="mobile-nav-panel" style={{
          display: "none",
          borderTop: "1px solid var(--line-1)",
          background: "rgba(255,255,255,0.96)",
          backdropFilter: "saturate(160%) blur(10px)",
          WebkitBackdropFilter: "saturate(160%) blur(10px)",
        }}>
          <div className="container-wide" style={{ paddingTop: 14, paddingBottom: 18 }}>
            <nav style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {links.map((l) => (
                <a key={l.key}
                   href={`#${l.route}`}
                   onClick={(e) => onClick(e, l.route)}
                   style={{
                     border: "1px solid var(--line-1)",
                     borderRadius: 12,
                     padding: "14px 16px",
                     color: route === l.route ? "var(--brand)" : "var(--fg-1)",
                     background: route === l.route ? "var(--purple-50)" : "white",
                     fontFamily: "var(--font-display)",
                     fontWeight: 700,
                     fontSize: 14,
                     textDecoration: "none",
                   }}>
                  {l.label}
                </a>
              ))}
              <a href="#contact" onClick={(e) => onClick(e, "contact")}
                 style={{
                   gridColumn: "1 / -1",
                   border: "none",
                   borderRadius: 12,
                   padding: "15px 16px",
                   color: "white",
                   background: "var(--brand)",
                   fontFamily: "var(--font-display)",
                   fontWeight: 800,
                   fontSize: 14,
                   textDecoration: "none",
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "space-between",
                 }}>
                {t("nav.contact", lang)}
                <Icon name="arrow-right" size={16}/>
              </a>
            </nav>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 1180px) {
          .primary-nav a:nth-child(n+6) { display: none; }
        }
        @media (max-width: 880px) {
          .primary-nav { display: none !important; }
          .nav-contact { display: none !important; }
          .mobile-menu-button { display: inline-flex !important; }
          .mobile-nav-panel { display: block !important; }
        }
        @media (max-width: 460px) {
          .nav-shell {
            padding-left: 12px !important;
            padding-right: 12px !important;
            gap: 8px !important;
          }
          .nav-logo img { height: 30px !important; }
          .nav-actions { gap: 8px !important; }
          .lang-switch { padding: 2px !important; }
          .lang-switch button {
            padding: 5px 8px !important;
            font-size: 11px !important;
          }
          .mobile-menu-button {
            width: 38px !important;
            height: 38px !important;
          }
          .mobile-nav-panel nav { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 350px) {
          .nav-logo img { height: 27px !important; }
          .nav-actions { gap: 6px !important; }
          .lang-switch button { padding: 5px 6px !important; }
          .mobile-menu-button {
            width: 36px !important;
            height: 36px !important;
          }
        }
      `}</style>
    </header>
  );
}

Object.assign(window, { Nav });