import { Link } from "@tanstack/react-router";
import { useLang } from "@/lib/language";



export function Nav() {
  const { lang, setLang, t } = useLang();
  const isAr = lang === "ar";
  return (
    <nav className="sticky top-0 z-50 border-b border-ink/15 bg-sand/90 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3 md:px-8">
        <a href="#top" className="flex flex-col leading-none">
          <span className="font-display text-2xl uppercase tracking-tight md:text-3xl">
            Al-Arabat
          </span>
          <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-terracotta">
            {t("Algérie · Assistance routière", "الجزائر · النجدة على الطريق")}
          </span>
        </a>
        <div className="flex items-center gap-4">
          <a
            href="#services"
            className="hidden text-xs font-bold uppercase tracking-widest hover:text-terracotta md:inline"
          >
            {t("Services", "خدمات")}
          </a>
          <a
            href="#how"
            className="hidden text-xs font-bold uppercase tracking-widest hover:text-terracotta md:inline"
          >
            {t("Comment", "كيف")}
          </a>
          <a
            href="#driver"
            className="hidden text-xs font-bold uppercase tracking-widest hover:text-terracotta md:inline"
          >
            {t("Chauffeurs", "السائقون")}
          </a>
          <Link
            to="/concessionnaire"
            className="hidden text-xs font-bold uppercase tracking-widest hover:text-terracotta md:inline"
          >
            {t("Concessionnaires", "الوكلاء")}
          </Link>
          <Link
            to="/login"
            className="border-2 border-ink px-3 py-1.5 text-xs font-bold uppercase tracking-widest hover:bg-ink hover:text-brand"
          >
            {t("Se connecter", "دخول")}
          </Link>
          <div className="flex items-center gap-0.5 rounded-sm bg-ink/5 p-1">
            <button
              onClick={() => setLang("fr")}
              className={`px-2.5 py-1 text-xs font-bold ${!isAr ? "bg-white shadow-sm" : "text-ink/50"}`}
            >
              FR
            </button>
            <button
              onClick={() => setLang("ar")}
              className={`px-2.5 py-1 font-arabic text-xs font-bold ${isAr ? "bg-white shadow-sm" : "text-ink/50"}`}
              dir="rtl"
            >
              عربي
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}