// NavV2 — top nav with hamburger on mobile. SideRail hidden below 1024px.
function NavV2() {
  const { lang, setLang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Close overlay when switching to desktop
  React.useEffect(() => {
    if (!isMobile && !isTablet) setMenuOpen(false);
  }, [isMobile]);

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

  const links = lang === 'de'
    ? [
        { id: "philosophy",   label: "Philosophie" },
        { id: "capabilities", label: "Leistungen" },
        { id: "thinking",     label: "Notizen" },
      ]
    : [
        { id: "philosophy",   label: "Philosophy" },
        { id: "capabilities", label: "Services" },
        { id: "thinking",     label: "Notes" },
      ];

  const contactLabel = lang === 'de' ? 'Kontakt' : 'Connect';

  const labelStyle = {
    fontFamily: "Montserrat", fontWeight: 400, fontSize: 11,
    letterSpacing: "0.22em", textTransform: "uppercase",
    color: "#a8a8b8", textDecoration: "none",
  };

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: scrolled ? "16px 32px" : isMobile ? "20px 24px" : "28px 56px",
      background: scrolled && !menuOpen
        ? "linear-gradient(180deg, rgba(15,15,18,0.94) 0%, rgba(15,15,18,0.74) 100%)"
        : "transparent",
      borderBottom: scrolled && !menuOpen ? "1px solid rgba(45,45,56,0.55)" : "1px solid transparent",
      backdropFilter: scrolled && !menuOpen ? "blur(18px)" : "none",
      WebkitBackdropFilter: scrolled && !menuOpen ? "blur(18px)" : "none",
      transition: "padding 240ms ease, background 240ms ease, border-color 240ms ease",
    }}>
      {/* Logo */}
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none" }}>
        <Logotype height={20} />
      </a>

      {(isMobile || isTablet) ? (
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="#connect" style={{
            fontFamily: "Montserrat", fontWeight: 400, fontSize: 10,
            letterSpacing: "0.22em", textTransform: "uppercase",
            color: "#0db8cc",
            border: "1px solid rgba(13,184,204,0.32)",
            background: "rgba(13,184,204,0.10)",
            borderRadius: 5,
            padding: "7px 14px",
            textDecoration: "none",
            opacity: scrolled ? 1 : 0,
            pointerEvents: scrolled ? "auto" : "none",
            transition: "opacity 300ms ease",
          }}>{contactLabel}</a>
          <button
            onClick={() => setMenuOpen(true)}
            aria-label="Open menu"
            style={{
              background: "none", border: "none", cursor: "pointer",
              display: "flex", flexDirection: "column", gap: 5,
              padding: 8,
            }}
          >
            {[0,1,2].map(i => (
              <span key={i} style={{ display: "block", width: 22, height: 1.5, background: "#d4d4dc", borderRadius: 1 }} />
            ))}
          </button>
        </div>
      ) : (
        /* Desktop nav */
        <div style={{ display: "flex", gap: 40, alignItems: "center" }}>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} style={labelStyle}>{l.label}</a>
          ))}
          <a href="#connect" style={{
            ...labelStyle,
            color: "#0db8cc",
            border: "1px solid rgba(13,184,204,0.32)",
            background: "rgba(13,184,204,0.10)",
            borderRadius: 5,
            padding: "7px 16px",
          }}>{contactLabel}</a>
          <button
            onClick={() => setLang(lang === 'en' ? 'de' : 'en')}
            style={{
              background: "rgba(255,255,255,0.05)",
              border: "1px solid rgba(255,255,255,0.20)",
              borderRadius: 3, cursor: "pointer",
              display: "flex", gap: 8, alignItems: "center",
              padding: "7px 12px",
              fontFamily: "Montserrat", fontWeight: 400, fontSize: 10,
              letterSpacing: "0.22em", textTransform: "uppercase",
              transition: "border-color 200ms ease, background 200ms ease",
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.38)"; e.currentTarget.style.background = "rgba(255,255,255,0.09)"; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.20)"; e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
          >
            <span style={{ color: lang === 'de' ? '#ffffff' : '#8080a0' }}>DE</span>
            <span style={{ color: '#8080a0' }}>·</span>
            <span style={{ color: lang === 'en' ? '#ffffff' : '#8080a0' }}>EN</span>
          </button>
        </div>
      )}

      {/* Mobile fullscreen overlay */}
      {menuOpen && (
        <div style={{
          position: "fixed", top: 0, left: 0, right: 0, bottom: 0,
          background: "rgba(12,12,15,0.97)",
          backdropFilter: "blur(24px)",
          WebkitBackdropFilter: "blur(24px)",
          zIndex: 200,
          display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center",
          gap: 8,
        }}>
          {/* Close */}
          <button
            onClick={() => setMenuOpen(false)}
            aria-label="Close menu"
            style={{
              position: "absolute", top: 24, right: 24,
              background: "none", border: "none", cursor: "pointer",
              color: "#8080a0", fontSize: 24, lineHeight: 1, padding: 8,
            }}
          >✕</button>

          {/* Links */}
          {[...links, { id: "connect", label: contactLabel }].map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              onClick={() => setMenuOpen(false)}
              style={{
                fontFamily: "Montserrat", fontWeight: 200,
                fontSize: "clamp(28px, 8vw, 40px)",
                letterSpacing: "-0.02em",
                color: l.id === "connect" ? "#ffffff" : "#a8a8b8",
                textDecoration: "none",
                padding: "12px 0",
              }}
            >{l.label}</a>
          ))}

          {/* Language toggle */}
          <div style={{ display: "flex", gap: 24, marginTop: 32, alignItems: "center" }}>
            {['de', 'en'].map((l, i) => (
              <React.Fragment key={l}>
                {i > 0 && <span style={{ color: "#3a3a48" }}>·</span>}
                <button
                  onClick={() => { setLang(l); setMenuOpen(false); }}
                  style={{
                    background: "none", border: "none", cursor: "pointer",
                    fontFamily: "Montserrat", fontWeight: 400, fontSize: 12,
                    letterSpacing: "0.28em", textTransform: "uppercase",
                    color: lang === l ? "#ffffff" : "#4a4a5a",
                    padding: 0,
                  }}
                >{l.toUpperCase()}</button>
              </React.Fragment>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
}

// SideRail — hidden below 1024px. Labels only shown at ≥ 1440px.
function SideRail() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [vw, setVw] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const h = () => setVw(window.innerWidth);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);
  const showLabels = vw >= 1440;

  const sections = lang === 'de'
    ? [
        { id: "top",          n: "00", label: "Start" },
        { id: "philosophy",   n: "01", label: "Philosophie" },
        { id: "iceberg",      n: "02", label: "Tiefe" },
        { id: "method",       n: "03", label: "Methode" },
        { id: "capabilities", n: "04", label: "Leistungen" },
        { id: "notfor",       n: "05", label: "Einsatzfelder" },
        { id: "addons",       n: "06", label: "Bausteine" },
        { id: "position",     n: "07", label: "Positionierung" },
        { id: "thinking",     n: "08", label: "Notizen" },
        { id: "connect",      n: "09", label: "Kontakt" },
      ]
    : [
        { id: "top",          n: "00", label: "Start" },
        { id: "philosophy",   n: "01", label: "Philosophy" },
        { id: "iceberg",      n: "02", label: "Depth" },
        { id: "method",       n: "03", label: "Method" },
        { id: "capabilities", n: "04", label: "Services" },
        { id: "notfor",       n: "05", label: "Focus Areas" },
        { id: "addons",       n: "06", label: "Add-ons" },
        { id: "position",     n: "07", label: "Position" },
        { id: "thinking",     n: "08", label: "Notes" },
        { id: "connect",      n: "09", label: "Connect" },
      ];

  const [active, setActive] = React.useState("top");
  const [hoveredId, setHoveredId] = React.useState(null);
  React.useEffect(() => {
    const onScroll = () => {
      let current = "top";
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (!el) continue;
        if (el.getBoundingClientRect().top < 200) current = s.id;
      }
      setActive(current);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [lang]);

  if (isMobile) return (
    <div style={{
      position: "fixed", right: 10, top: "50%", transform: "translateY(-50%)",
      zIndex: 90, display: "flex", flexDirection: "column", gap: 10,
      pointerEvents: "auto",
    }}>
      {sections.map(s => {
        const isActive = active === s.id;
        return (
          <a key={s.id} href={`#${s.id}`} style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            width: 16, height: 16, textDecoration: "none",
          }}>
            <span style={{
              width: isActive ? 7 : 4,
              height: isActive ? 7 : 4,
              borderRadius: "50%",
              background: isActive ? "#0db8cc" : "rgba(74,74,90,0.7)",
              boxShadow: isActive ? "0 0 8px rgba(13,184,204,0.55)" : "none",
              transition: "all 260ms ease",
              display: "block",
            }} />
          </a>
        );
      })}
    </div>
  );

  if (isTablet) return null;

  return (
    <aside style={{
      position: "fixed", top: "50%", left: 24, transform: "translateY(-50%)",
      zIndex: 90, display: "flex", flexDirection: "column", gap: 12,
      pointerEvents: "auto",
    }}>
      {sections.map(s => {
        const isActive = active === s.id;
        const isHovered = hoveredId === s.id;
        return (
          <a key={s.id} href={`#${s.id}`}
            onMouseEnter={() => setHoveredId(s.id)}
            onMouseLeave={() => setHoveredId(null)}
            style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", padding: "4px 0" }}>
            <span style={{
              width: isActive ? 24 : isHovered ? 18 : 12, height: 1,
              background: isActive ? "#0db8cc" : isHovered ? "#5a5a70" : "#3a3a48",
              transition: "all 260ms ease",
            }}></span>
            <span style={{
              fontFamily: "Montserrat", fontWeight: 400, fontSize: 9,
              letterSpacing: "0.28em", textTransform: "uppercase",
              color: isActive ? "#d4d4dc" : isHovered ? "#9090a8" : "#4a4a5a",
              transition: "color 260ms ease",
            }}>{s.n}</span>
            <span style={{
              fontFamily: "Montserrat", fontWeight: 400, fontSize: 9,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: isActive ? "#d4d4dc" : "#9090a8",
              maxWidth: showLabels && (isActive || isHovered) ? 120 : 0,
              overflow: "hidden",
              opacity: showLabels && (isActive || isHovered) ? 1 : 0,
              whiteSpace: "nowrap",
              transition: "opacity 260ms ease, max-width 300ms ease",
            }}>{s.label}</span>
          </a>
        );
      })}
    </aside>
  );
}

window.NavV2 = NavV2;
window.SideRail = SideRail;