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

export function DriverCTA() {
  const { t } = useLang();
  const reqs = [
    { fr: "Permis de conduire valide", ar: "رخصة سياقة سارية" },
    { fr: "Carte grise & assurance du camion", ar: "بطاقة رمادية وتأمين الشاحنة" },
    { fr: "Carte d'identité nationale", ar: "بطاقة التعريف الوطنية" },
    { fr: "Plateau ou treuil selon vos capacités", ar: "منصة أو ونش حسب إمكانياتك" },
  ];
  return (
    <section id="driver" className="relative overflow-hidden bg-brand py-20 text-ink md:py-28">
      <div className="mx-auto grid max-w-6xl gap-10 px-4 md:grid-cols-5 md:gap-16 md:px-8">
        <div className="md:col-span-3">
          <span className="text-xs font-bold uppercase tracking-[0.25em] text-terracotta">
            05 — {t("Pour les chauffeurs", "للسائقين")}
          </span>
          <h2 className="mt-2 font-display text-4xl uppercase leading-none tracking-tight md:text-6xl">
            {t("Votre camion,", "شاحنتك،")}
            <br />
            {t("vos horaires.", "أوقاتك.")}
          </h2>
          <p className="mt-6 max-w-md text-ink/70">
            {t(
              "Rejoignez le réseau Al-Arabat. Recevez des demandes autour de vous, acceptez selon vos disponibilités, encaissez en espèces à la fin du job.",
              "انضم إلى شبكة العربات. استقبل الطلبات من حولك، اقبل حسب توفرك، واستلم أجرتك نقدًا في نهاية المهمة.",
            )}
          </p>
          <Link
            to="/signup"
            search={{ role: "driver" }}
            className="mt-8 inline-flex items-center gap-3 border-2 border-ink bg-ink px-6 py-4 font-bold uppercase text-brand transition-colors hover:bg-transparent hover:text-ink"
          >
            {t("Rejoindre le réseau", "انضم إلى الشبكة")}
            <span>→</span>
          </Link>
        </div>
        <div className="md:col-span-2">
          <div className="border-2 border-ink bg-sand p-6">
            <div className="mb-4 text-xs font-bold uppercase tracking-widest">
              {t("Ce qu'il vous faut", "ما تحتاجه")}
            </div>
            <ul className="space-y-3">
              {reqs.map((r, i) => (
                <li key={r.fr} className="flex items-start gap-3 border-b border-ink/15 pb-3 last:border-0">
                  <span className="mt-0.5 font-display text-sm text-terracotta">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span className="text-sm font-medium">{t(r.fr, r.ar)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}