// Cook Street Sourcing v2 — Navigation (with language switcher)

function Navigation() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const t = useT();

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

  const links = [
    { label: t.nav.about, href: "#about" },
    { label: t.nav.services, href: "#services" },
    { label: t.nav.categories, href: "#categories" },
    { label: t.nav.process, href: "#process" },
    { label: t.nav.regions, href: "#regions" },
  ];

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      transition: "background 0.5s, border-color 0.5s",
      backgroundColor: scrolled ? "rgba(250,250,247,0.97)" : "transparent",
      borderBottom: `1px solid ${scrolled ? "#E8DFD0" : "transparent"}`,
      backdropFilter: scrolled ? "blur(8px)" : "none",
    }}>
      <div className="cs-container">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 68 }}>
          {/* Logo */}
          <a href="#" style={{ textDecoration: "none", display: "flex", alignItems: "center" }}>
            <img src="logo.png" alt="Cook Street Sourcing" style={{
              height: 36, width: "auto", display: "block",
              filter: scrolled ? "none" : "brightness(0) invert(1)",
              transition: "filter 0.4s",
            }} />
          </a>

          {/* Desktop nav + lang switcher */}
          <div className="desktop-nav" style={{ display: "flex", alignItems: "center", gap: 40 }}>
            <nav style={{ display: "flex", gap: 32, alignItems: "center" }}>
              {links.map(l => (
                <a key={l.href} href={l.href} style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, fontWeight: 400, letterSpacing: "0.06em", color: scrolled ? "#1E1B18" : "rgba(255,255,255,0.8)", textDecoration: "none", transition: "color 0.3s" }}
                  onMouseEnter={e => e.currentTarget.style.color = "#9B7B52"}
                  onMouseLeave={e => e.currentTarget.style.color = scrolled ? "#1E1B18" : "rgba(255,255,255,0.8)"}
                >{l.label}</a>
              ))}
            </nav>

            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <LangSwitcher dark={!scrolled} />
              <a href="#contact" style={{
                fontFamily: "'Raleway', sans-serif", fontSize: 14, fontWeight: 500,
                letterSpacing: "0.1em", textTransform: "uppercase",
                color: scrolled ? "#4A5240" : "rgba(255,255,255,0.9)",
                textDecoration: "none", padding: "8px 20px",
                border: `1px solid ${scrolled ? "#4A5240" : "rgba(255,255,255,0.5)"}`,
                transition: "all 0.3s",
              }}
                onMouseEnter={e => { e.currentTarget.style.backgroundColor = "#4A5240"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#4A5240"; }}
                onMouseLeave={e => { e.currentTarget.style.backgroundColor = "transparent"; e.currentTarget.style.color = scrolled ? "#4A5240" : "rgba(255,255,255,0.9)"; e.currentTarget.style.borderColor = scrolled ? "#4A5240" : "rgba(255,255,255,0.5)"; }}
              >{t.nav.cta}</a>
            </div>
          </div>

          {/* Mobile right: lang + hamburger */}
          <div className="mobile-menu-btn" style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <LangSwitcher dark={!scrolled} />
            <button onClick={() => setMenuOpen(!menuOpen)}
              style={{ background: "none", border: "none", cursor: "pointer", padding: 6, display: "flex", flexDirection: "column", gap: 5 }}>
              {[0,1,2].map(i => (
                <span key={i} style={{
                  display: "block", width: 22, height: 1,
                  backgroundColor: scrolled || menuOpen ? "#1E1B18" : "#fff",
                  transition: "all 0.3s",
                  transform: menuOpen && i===0 ? "rotate(45deg) translate(4px,4px)" : menuOpen && i===2 ? "rotate(-45deg) translate(4px,-4px)" : "none",
                  opacity: menuOpen && i===1 ? 0 : 1,
                }} />
              ))}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile drawer */}
      <div style={{ backgroundColor: "#FAFAF7", borderTop: "1px solid #E8DFD0", maxHeight: menuOpen ? 360 : 0, overflow: "hidden", transition: "max-height 0.35s ease" }}>
        <div className="cs-container" style={{ paddingTop: 20, paddingBottom: 24, display: "flex", flexDirection: "column", gap: 18 }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}
              style={{ fontFamily: "'Raleway', sans-serif", fontSize: 15, color: "#1E1B18", textDecoration: "none", letterSpacing: "0.04em" }}>
              {l.label}
            </a>
          ))}
          <a href="#contact" onClick={() => setMenuOpen(false)}
            style={{ display: "inline-flex", justifyContent: "center", padding: "12px 24px", border: "1px solid #4A5240", color: "#4A5240", fontFamily: "'Raleway', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", textDecoration: "none", marginTop: 4 }}>
            {t.nav.cta}
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Navigation });