import { useLang } from "@/lib/language";
import { Fuel, LifeBuoy, Truck, Warehouse } from "lucide-react";

export function Services() {
  const { t } = useLang();
  const urgence = [
    {
      icon: Truck,
      fr: "Remorquage",
      ar: "قطر السيارة",
      dFr: "Voitures en panne, accidents légers, plateau pour SUV et véhicules AWD.",
      dAr: "سيارات معطلة، حوادث خفيفة، منصة مسطحة للسيارات الفاخرة ورباعية الدفع.",
    },
    {
      icon: LifeBuoy,
      fr: "Assistance routière",
      ar: "النجدة على الطريق",
      dFr: "Changement de pneu, démarrage batterie, ouverture de porte — sur place.",
      dAr: "تغيير العجلات، تشغيل البطارية، فتح الأبواب — على الفور.",
    },
    {
      icon: Fuel,
      fr: "Ravitaillement",
      ar: "توصيل الوقود",
      dFr: "En panne d'essence ou de diesel ? On vous en apporte à votre position.",
      dAr: "نفد منك البنزين أو المازوت؟ نجلبه إلى موقعك.",
    },
  ];
  const logistique = [
    {
      icon: Warehouse,
      fr: "Concessionnaire → Client",
      ar: "من الوكالة إلى العميل",
      dFr: "Transport programmé de véhicules neufs, service B2B distinct de l'urgence.",
      dAr: "نقل مبرمج للسيارات الجديدة، خدمة مؤسسية منفصلة عن الطوارئ.",
    },
  ];

  return (
    <section id="services" className="border-b border-ink/15 bg-sand py-20 md:py-28">
      <div className="mx-auto max-w-6xl px-4 md:px-8">
        <div className="mb-12 flex flex-wrap items-end justify-between gap-4">
          <div>
            <span className="text-xs font-bold uppercase tracking-[0.25em] text-terracotta">
              02 — {t("Nos services", "خدماتنا")}
            </span>
            <h2 className="mt-2 font-display text-4xl uppercase leading-none tracking-tight md:text-6xl">
              {t("Tout ce dont", "كل ما تحتاجه")}
              <br />
              {t("vous avez besoin.", "على الطريق.")}
            </h2>
          </div>
          <p className="max-w-sm text-ink/60">
            {t(
              "Deux catégories : l'urgence à la demande, et la logistique programmée.",
              "فئتان: الطوارئ الفورية، والنقل المبرمج.",
            )}
          </p>
        </div>

        <div className="mb-4 flex items-center gap-3">
          <span className="size-3 bg-terracotta" />
          <span className="text-xs font-bold uppercase tracking-widest">
            {t("Urgence / à la demande", "طوارئ / عند الطلب")}
          </span>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          {urgence.map((s) => (
            <ServiceCard key={s.fr} s={s} accent />
          ))}
        </div>

        <div className="mb-4 mt-10 flex items-center gap-3">
          <span className="size-3 bg-ink" />
          <span className="text-xs font-bold uppercase tracking-widest">
            {t("Logistique / programmée", "لوجستية / مبرمجة")}
          </span>
        </div>
        <div className="grid gap-4 md:grid-cols-3">
          {logistique.map((s) => (
            <ServiceCard key={s.fr} s={s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({
  s,
  accent,
}: {
  s: { icon: React.ComponentType<{ className?: string }>; fr: string; ar: string; dFr: string; dAr: string };
  accent?: boolean;
}) {
  const { t } = useLang();
  const Icon = s.icon;
  return (
    <div className="group relative border border-ink/20 bg-white p-6 transition-all hover:-translate-y-1 hover:shadow-[8px_8px_0_0_hsl(220_15%_10%)]">
      <div
        className={`mb-6 inline-flex size-12 items-center justify-center ${accent ? "bg-brand text-ink" : "bg-ink text-sand"}`}
      >
        <Icon className="size-6" />
      </div>
      <h3 className="font-display text-2xl uppercase leading-none tracking-tight">
        {t(s.fr, s.ar)}
      </h3>
      <p className="mt-3 text-sm leading-relaxed text-ink/65">{t(s.dFr, s.dAr)}</p>
    </div>
  );
}