function Nav({ onNavigate, route }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    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 items = [
    { label: "Behandlungen", href: "Anti-Aging.html" },
    { label: "Über mich", href: "Ueber-mich.html" },
    { label: "Ablauf", id: "ablauf" },
    { label: "Kontakt", href: "Kontakt.html" },
    { label: "Termin", id: "kontakt" },
  ];

  const go = (item) => {
    setOpen(false);
    if (item.href) {
      window.location.href = item.href;
      return;
    }
    const id = item.id;
    if (route !== "home") {
      onNavigate("home");
      setTimeout(() => {
        document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 80);
    } else {
      document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  return (
    <React.Fragment>
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 40,
          background: scrolled ? "rgba(244,234,220,.88)" : "transparent",
          backdropFilter: scrolled ? "blur(12px)" : "none",
          WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
          borderBottom: scrolled ? "1px solid var(--hair-soft)" : "1px solid transparent",
          transition: "background .3s, border-color .3s",
        }}
      >
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "16px 22px", maxWidth: 1280, margin: "0 auto",
        }}>
          <button
            onClick={() => onNavigate("home")}
            style={{
              fontFamily: "var(--serif)", fontSize: 22, letterSpacing: ".01em",
              fontStyle: "italic", fontWeight: 400, color: "var(--ink)",
              whiteSpace: "nowrap",
            }}
          >
            Maison&nbsp;<span style={{ letterSpacing: ".06em", fontStyle: "normal", fontSize: 18 }}>Velours</span>
          </button>

          {/* desktop */}
          <nav className="nav-desktop" style={{ display: "none", gap: 30 }}>
            {items.map(it => (
              <button key={it.label} onClick={() => go(it)} style={{
                fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase",
                color: "var(--ink-2)", padding: "6px 0",
              }}>{it.label}</button>
            ))}
          </nav>

          <button
            aria-label="Menü"
            onClick={() => setOpen(v => !v)}
            style={{
              width: 40, height: 40, display: "grid", placeItems: "center",
              border: "1px solid var(--hair)", borderRadius: 999,
            }}
          >
            <div style={{ position: "relative", width: 16, height: 10 }}>
              <span style={{ position: "absolute", left: 0, right: 0, top: open ? 4 : 0, height: 1, background: "var(--ink)", transform: open ? "rotate(45deg)" : "none", transition: "all .25s" }} />
              <span style={{ position: "absolute", left: 0, right: 0, bottom: open ? 4 : 0, height: 1, background: "var(--ink)", transform: open ? "rotate(-45deg)" : "none", transition: "all .25s" }} />
            </div>
          </button>
        </div>
      </header>

      {/* Mobile overlay */}
      <div
        onClick={() => setOpen(false)}
        style={{
          position: "fixed", inset: 0, zIndex: 35,
          background: "var(--cream)",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "opacity .3s",
          display: "flex", flexDirection: "column",
        }}
      >
        <div style={{ height: 72 }} />
        <div style={{ padding: "40px 32px", display: "flex", flexDirection: "column", gap: 24 }}>
          <div className="eyebrow"><span className="dot" />Navigation</div>
          {items.map(it => (
            <button
              key={it.label}
              onClick={(e) => { e.stopPropagation(); go(it); }}
              style={{
                fontFamily: "var(--serif)", fontSize: 40, textAlign: "left",
                color: "var(--ink)", fontStyle: "italic", fontWeight: 400,
                lineHeight: 1, padding: "8px 0",
                borderBottom: "1px solid var(--hair-soft)",
              }}
            >{it.label}</button>
          ))}

          <div style={{ marginTop: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot" />Termin</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic" }}>+49 30 5555 0184</div>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>Di – Sa · 10 – 19 Uhr</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (min-width: 880px) {
          .nav-desktop { display: flex !important; }
        }
      `}</style>
    </React.Fragment>
  );
}

window.Nav = Nav;