"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Logo } from "./logo";
import { IconHeart, IconSearch, IconUser } from "./icons";

const NAV = [
  { href: "/recherche?marche=achat", label: "Acheter", match: /^\/recherche(?!.*marche=location)/ },
  { href: "/recherche?marche=location", label: "Louer", match: /marche=location/ },
  { href: "/estimer", label: "Estimer", match: /^\/estimer/ },
  { href: "/carte", label: "Carte", match: /^\/carte/ },
  { href: "/marche", label: "Marché", match: /^\/marche/ },
  { href: "/financement", label: "Financer", match: /^\/financement/ },
];

export function SiteHeader() {
  const path = usePathname() ?? "/";
  return (
    <header className="sticky top-0 z-40 bg-white/90 backdrop-blur border-b border-line">
      <div className="mx-auto max-w-7xl px-4 h-14 md:h-16 flex items-center gap-4">
        <Logo />
        <nav className="hidden md:flex items-center gap-1 ml-4" aria-label="Navigation principale">
          {NAV.map((n) => (
            <Link key={n.href} href={n.href} className={`px-3 py-2 rounded-full text-sm font-medium transition ${n.match.test(path) ? "text-brand-dark bg-brand-soft" : "text-ink-2 hover:text-ink hover:bg-surface-2"}`}>{n.label}</Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <Link href="/recherche" className="md:hidden p-2 rounded-full hover:bg-surface-2" aria-label="Rechercher"><IconSearch /></Link>
          <Link href="/favoris" className="p-2 rounded-full hover:bg-surface-2 text-ink-2" aria-label="Mes favoris"><IconHeart /></Link>
          <Link href="/membre" className="hidden md:inline-flex p-2 rounded-full hover:bg-surface-2 text-ink-2" aria-label="Mon compte"><IconUser /></Link>
          <Link href="/membre/annonces/nouvelle" className="inline-flex tv-btn tv-btn-primary !py-2 text-sm whitespace-nowrap"><span className="sm:hidden">Publier</span><span className="hidden sm:inline">Publier une propriété</span></Link>
        </div>
      </div>
    </header>
  );
}