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

export function Footer() {
  const { t } = useLang();
  return (
    <footer className="bg-ink pb-32 pt-16 text-sand md:pb-28">
      <div className="mx-auto max-w-6xl px-4 md:px-8">
        <div className="grid gap-10 md:grid-cols-3">
          <div>
            <div className="font-display text-3xl uppercase tracking-tight">Al-Arabat</div>
            <div className="mt-1 font-arabic text-lg text-brand" dir="rtl">
              العربات
            </div>
            <p className="mt-4 max-w-xs text-sm text-sand/60">
              {t(
                "Dépannage & remorquage à la demande, partout en Algérie. 24 heures sur 24.",
                "قطر ونجدة عند الطلب في كامل الجزائر. على مدار 24 ساعة.",
              )}
            </p>
          </div>
          <div>
            <div className="mb-3 text-xs font-bold uppercase tracking-widest text-brand">
              {t("Navigation", "التنقل")}
            </div>
            <ul className="space-y-2 text-sm">
              <li><a href="#services" className="hover:text-brand">{t("Services", "الخدمات")}</a></li>
              <li><a href="#how" className="hover:text-brand">{t("Comment ça marche", "كيف يعمل")}</a></li>
              <li><a href="#driver" className="hover:text-brand">{t("Devenir chauffeur", "كن سائقًا")}</a></li>
              <li><Link to="/concessionnaire" className="hover:text-brand">{t("Concessionnaires", "الوكلاء")}</Link></li>
            </ul>
          </div>
          <div>
            <div className="mb-3 text-xs font-bold uppercase tracking-widest text-brand">
              {t("Contact", "اتصال")}
            </div>
            <a href="tel:+213555000000" className="font-display text-2xl tracking-wider text-sand">
              0555 00 00 00
            </a>
            <p className="mt-3 text-sm text-sand/60">
              contact@al-arabat.dz
            </p>
          </div>
        </div>
        <div className="mt-14 flex flex-col justify-between gap-3 border-t border-sand/15 pt-6 text-xs text-sand/50 md:flex-row">
          <span>© {new Date().getFullYear()} Al-Arabat — {t("Tous droits réservés.", "جميع الحقوق محفوظة.")}</span>
          <span>{t("Fait en Algérie 🇩🇿", "صُنع في الجزائر 🇩🇿")}</span>
        </div>
      </div>
    </footer>
  );
}