"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu } from "lucide-react";
import { Logo } from "@/components/common/Logo";
import { ThemeToggle } from "@/components/theme/ThemeToggle";
import { LanguageDropdown } from "@/components/i18n/LanguageDropdown";
import { ButtonLink } from "@/components/common/Button";
import { Container } from "@/components/common/Container";
import { MobileMenu } from "./MobileMenu";
import { NAV_LINKS } from "@/constants/site";
import { useTranslation } from "@/hooks/useTranslation";
import { useAuth } from "@/hooks/useAuth";
import { useAgentAuth } from "@/hooks/useAgentAuth";
import { cn } from "@/lib/utils";
export function Header() {
const { t, locale } = useTranslation();
const { user, hydrated } = useAuth();
const { user: agentUser, hydrated: agentHydrated } = useAgentAuth();
const pathname = usePathname();
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
useEffect(() => {
function onScroll() {
setScrolled(window.scrollY > 8);
}
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
setMobileOpen(false);
}, [pathname]);
const isAuthenticated = hydrated && !!user;
const isAgentAuthenticated = agentHydrated && !!agentUser;
return (
<>
Skip to main content
{/* Flexible middle column — its own grid track, so nav text length (which
varies a lot by locale) can never push into or overlap the right-side
controls the way it could in the old flex `justify-between` layout.
`scrollbar-hide` is a last-resort escape hatch if a locale is ever wide
enough to exceed the track — it never has to activate at ≥1200px in
practice, but it's a strictly safer failure mode than overlap. */}