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

window.Nav = function Nav({ lang, setLang, current = "home", forceScrolled = false }) {
  const [scrolled, setScrolled] = useNavState(forceScrolled);
  const [open, setOpen] = useNavState(false);

  useNavEffect(() => {
    if (forceScrolled) { setScrolled(true); return; }
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [forceScrolled]);

  // Lock body scroll when drawer is open
  useNavEffect(() => {
    if (typeof document === "undefined") return;
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close drawer on escape
  useNavEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  // Reflects the real navigation from tecnolife.com/it/
  const items = lang === "it"
    ? [
        { id: "chi-siamo", label: "Chi siamo", href: "chi-siamo.html" },
        { id: "cosa-facciamo", label: "Cosa facciamo", href: "factory.html" },
        { id: "servizi", label: "Servizi", href: "servizi.html" },
        { id: "clienti", label: "Clienti", href: "clienti.html" },
        { id: "lavora-con-noi", label: "Lavora con noi", href: "lavora-con-noi.html" },
        { id: "contatti", label: "Contatti", href: "contatti.html" },
      ]
    : [
        { id: "chi-siamo", label: "About", href: "chi-siamo.html" },
        { id: "cosa-facciamo", label: "What we do", href: "factory.html" },
        { id: "servizi", label: "Services", href: "servizi.html" },
        { id: "clienti", label: "They chose us", href: "clienti.html" },
        { id: "lavora-con-noi", label: "Careers", href: "lavora-con-noi.html" },
        { id: "contatti", label: "Contact", href: "contatti.html" },
      ];

  // On mobile, force a solid pill so the nav never looks transparent over hero gradients
  // (avoids iOS Safari backdrop-filter quirks where fixed translucent panels can render
  // as ghosted bars over scrolling content).
  const pillBg = scrolled ? "rgba(255,255,255,0.86)" : "rgba(8,12,26,0.32)";
  const pillBorder = scrolled ? "1px solid rgba(220,228,238,0.9)" : "1px solid rgba(255,255,255,0.14)";
  const pillColor = scrolled ? "var(--fg-1)" : "#fff";

  return (
    <React.Fragment>
      <nav style={{ position: "fixed", top: 14, left: 0, right: 0, zIndex: 60, display: "flex", justifyContent: "center", pointerEvents: "none" }}>
        <div className="tl-nav-pill" style={{
          pointerEvents: "auto",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          width: "min(1180px, calc(100% - 24px))",
          padding: "10px 14px 10px 22px",
          borderRadius: 999,
          background: pillBg,
          border: pillBorder,
          backdropFilter: "blur(18px) saturate(140%)",
          WebkitBackdropFilter: "blur(18px) saturate(140%)",
          boxShadow: scrolled ? "var(--shadow-md)" : "0 8px 24px rgba(2,40,163,.18)",
          transition: "all 240ms cubic-bezier(.22,1,.36,1)",
          color: pillColor,
        }}>
          <a href="index.html" style={{ display: "inline-flex", alignItems: "center", gap: 10 }} aria-label="Tecnolife — Home">
            <img
              src={scrolled ? "assets/Logo_Esteso_Blu.png" : "assets/Logo_Esteso_Bianco.png"}
              alt="Tecnolife"
              style={{ height: 26 }}
            />
          </a>

          <div className="tl-nav-links" style={{ display: "flex", alignItems: "center", gap: 22 }}>
            {items.map((it) => {
              const active = current === it.id;
              return (
                <a key={it.id} href={it.href} style={{
                  fontSize: 13, fontWeight: active ? 600 : 500,
                  color: "inherit",
                  opacity: active ? 1 : 0.85,
                  position: "relative",
                  paddingBottom: 2,
                  borderBottom: active ? "1.5px solid currentColor" : "1.5px solid transparent",
                  transition: "opacity 140ms",
                }}>
                  {it.label}
                </a>
              );
            })}
          </div>

          {/* Desktop right cluster: language toggle + Contattaci */}
          <div className="tl-nav-actions" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{
              display: "inline-flex", fontSize: 12, fontWeight: 600, borderRadius: 999, padding: 2,
              background: scrolled ? "var(--tl-grey-100)" : "rgba(255,255,255,.10)",
            }}>
              {["it", "en"].map((l) => (
                <button key={l} onClick={() => setLang(l)} style={{
                  border: 0, cursor: "pointer", padding: "5px 11px", borderRadius: 999,
                  background: lang === l ? (scrolled ? "#fff" : "rgba(255,255,255,.20)") : "transparent",
                  color: scrolled ? (lang === l ? "var(--tl-blue-deep)" : "var(--fg-2)") : "#fff",
                  fontWeight: 600, fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase",
                  boxShadow: lang === l && scrolled ? "var(--shadow-xs)" : "none",
                }}>
                  {l}
                </button>
              ))}
            </div>
            <window.Button variant={scrolled ? "primary" : "glass"} size="sm" href="contatti.html" icon={<window.Icon name="arrow" size={14} />}>
              {lang === "it" ? "Contattaci" : "Contact us"}
            </window.Button>
          </div>

          {/* Mobile right cluster: compact lang toggle + hamburger */}
          <div className="tl-nav-mobile-actions" style={{ display: "none", alignItems: "center", gap: 8 }}>
            <div style={{
              display: "inline-flex", fontSize: 11, fontWeight: 600, borderRadius: 999, padding: 2,
              background: scrolled ? "var(--tl-grey-100)" : "rgba(255,255,255,.10)",
            }}>
              {["it", "en"].map((l) => (
                <button key={l} onClick={() => setLang(l)} aria-label={`Switch to ${l.toUpperCase()}`} style={{
                  border: 0, cursor: "pointer", padding: "4px 9px", borderRadius: 999,
                  background: lang === l ? (scrolled ? "#fff" : "rgba(255,255,255,.20)") : "transparent",
                  color: scrolled ? (lang === l ? "var(--tl-blue-deep)" : "var(--fg-2)") : "#fff",
                  fontWeight: 600, fontSize: 10, letterSpacing: ".06em", textTransform: "uppercase",
                  boxShadow: lang === l && scrolled ? "var(--shadow-xs)" : "none",
                }}>
                  {l}
                </button>
              ))}
            </div>
            <button
              type="button"
              aria-label={open ? (lang === "it" ? "Chiudi menu" : "Close menu") : (lang === "it" ? "Apri menu" : "Open menu")}
              aria-expanded={open}
              aria-controls="tl-mobile-drawer"
              onClick={() => setOpen((v) => !v)}
              style={{
                width: 40, height: 40, borderRadius: 999, border: 0, cursor: "pointer",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                background: scrolled ? "var(--tl-blue-primary)" : "rgba(255,255,255,.16)",
                color: "#fff",
                transition: "background 200ms ease",
              }}
            >
              {/* Hamburger / close icon (animated) */}
              <span aria-hidden="true" style={{ position: "relative", width: 18, height: 14, display: "inline-block" }}>
                <span style={{
                  position: "absolute", left: 0, right: 0, height: 2, background: "currentColor", borderRadius: 2,
                  top: open ? 6 : 0,
                  transform: open ? "rotate(45deg)" : "rotate(0)",
                  transition: "top 180ms ease, transform 220ms ease",
                }} />
                <span style={{
                  position: "absolute", left: 0, right: 0, top: 6, height: 2, background: "currentColor", borderRadius: 2,
                  opacity: open ? 0 : 1,
                  transition: "opacity 140ms ease",
                }} />
                <span style={{
                  position: "absolute", left: 0, right: 0, height: 2, background: "currentColor", borderRadius: 2,
                  top: open ? 6 : 12,
                  transform: open ? "rotate(-45deg)" : "rotate(0)",
                  transition: "top 180ms ease, transform 220ms ease",
                }} />
              </span>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile drawer + scrim */}
      <div
        aria-hidden={!open}
        onClick={() => setOpen(false)}
        style={{
          position: "fixed", inset: 0, zIndex: 55,
          background: "rgba(8,12,26,0.55)",
          backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "opacity 240ms cubic-bezier(.22,1,.36,1)",
        }}
      />
      <aside
        id="tl-mobile-drawer"
        role="dialog"
        aria-modal="true"
        aria-label={lang === "it" ? "Menu" : "Menu"}
        style={{
          position: "fixed", top: 0, left: 0, right: 0, zIndex: 56,
          background: "#fff",
          borderBottomLeftRadius: 24, borderBottomRightRadius: 24,
          boxShadow: "0 24px 60px rgba(2,40,163,.18)",
          padding: "84px 22px 28px",
          transform: open ? "translateY(0)" : "translateY(-110%)",
          transition: "transform 320ms cubic-bezier(.22,1,.36,1)",
          maxHeight: "92vh", overflowY: "auto",
        }}
      >
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 2 }}>
          {items.map((it) => {
            const active = current === it.id;
            return (
              <li key={it.id}>
                <a
                  href={it.href}
                  onClick={() => setOpen(false)}
                  style={{
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    padding: "16px 6px",
                    fontSize: 20, fontWeight: active ? 700 : 600,
                    color: active ? "var(--tl-blue-primary)" : "var(--fg-1)",
                    borderBottom: "1px solid var(--border)",
                    letterSpacing: "-0.01em",
                  }}
                >
                  <span>{it.label}</span>
                  <span aria-hidden="true" style={{
                    width: 32, height: 32, borderRadius: 999,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    background: active ? "var(--tl-blue-primary)" : "var(--tl-grey-100)",
                    color: active ? "#fff" : "var(--fg-2)",
                  }}>
                    <window.Icon name="arrow" size={14} />
                  </span>
                </a>
              </li>
            );
          })}
        </ul>
        <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 14 }}>
          <window.Button
            variant="primary"
            size="md"
            href="contatti.html"
            icon={<window.Icon name="arrow" size={14} />}
            style={{ width: "100%", justifyContent: "center" }}
          >
            {lang === "it" ? "Contattaci" : "Contact us"}
          </window.Button>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
            <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--fg-3)" }}>
              {lang === "it" ? "Lingua" : "Language"}
            </span>
            <div style={{
              display: "inline-flex", fontSize: 12, fontWeight: 600, borderRadius: 999, padding: 2,
              background: "var(--tl-grey-100)",
            }}>
              {["it", "en"].map((l) => (
                <button key={l} onClick={() => setLang(l)} style={{
                  border: 0, cursor: "pointer", padding: "6px 14px", borderRadius: 999,
                  background: lang === l ? "#fff" : "transparent",
                  color: lang === l ? "var(--tl-blue-deep)" : "var(--fg-2)",
                  fontWeight: 600, fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase",
                  boxShadow: lang === l ? "var(--shadow-xs)" : "none",
                }}>
                  {l}
                </button>
              ))}
            </div>
          </div>
        </div>
      </aside>

      <style>{`
        @media (max-width: 980px) {
          .tl-nav-links { display: none !important; }
          .tl-nav-actions { display: none !important; }
          .tl-nav-mobile-actions { display: inline-flex !important; }
          .tl-nav-pill { padding: 8px 8px 8px 18px !important; }
        }
        @media (min-width: 981px) {
          .tl-nav-mobile-actions { display: none !important; }
        }
      `}</style>
    </React.Fragment>
  );
};