import Link from "next/link";
import { site } from "@/lib/content";
import { LogoLockup } from "@/components/graphics/Logo";
import { Button } from "@/components/ui/Button";
import { MobileNav } from "./MobileNav";
import { NavLinks } from "./NavLinks";

export function Header() {
  return (
    <header className="bg-ivory-100/90 supports-[backdrop-filter]:bg-ivory-100/80 sticky top-0 z-40 backdrop-blur-sm">
      <div className="container-site flex items-center justify-between gap-5 py-3 md:py-4">
        <Link href="/" className="min-w-0 rounded-md" aria-label={`${site.brand.name} — Accueil`}>
          <LogoLockup name={site.brand.name} tagline={site.brand.tagline} />
        </Link>

        <nav aria-label="Navigation principale" className="hidden lg:block">
          <NavLinks items={site.navigation} className="flex items-center gap-5 xl:gap-7" />
        </nav>

        <div className="hidden lg:block">
          <Button href={site.headerCta.href} size="md" className="whitespace-nowrap">
            {site.headerCta.label}
          </Button>
        </div>

        <MobileNav items={site.navigation} cta={site.headerCta} brandName={site.brand.name} />
      </div>
    </header>
  );
}