import { createFileRoute, Link } from "@tanstack/react-router";
import { useLang } from "@/lib/language";
import { Nav } from "@/components/landing/Nav";
import { Footer } from "@/components/landing/Footer";
import {
  Building2,
  Car,
  CheckCircle,
  HeadphonesIcon,
  ShieldCheck,
  Star,
  Truck,
  Users,
  ArrowRight,
  PhoneCall,
  FileText,
  Handshake,
  BadgeCheck,
  TrendingUp,
  Clock,
} from "lucide-react";

export const Route = createFileRoute("/concessionnaire")({
  head: () => ({
    meta: [
      { title: "Concessionnaires — Partenariat Al-Arabat" },
      {
        name: "description",
        content:
          "Offrez à vos clients une assistance routière 24/7 incluse dans leur achat. Partenariat exclusif Al-Arabat pour les concessionnaires algériens.",
      },
    ],
  }),
  component: ConcessionnairePage,
});

/* ─── data ─────────────────────────────────────────────────────────────── */
const BENEFITS = [
  {
    icon: ShieldCheck,
    fr: "Fidélisez vos clients",
    ar: "ولاء العملاء",
    descFr:
      "Un service de dépannage inclus renforce la confiance et incite vos acheteurs à revenir pour leur prochain véhicule.",
    descAr: "خدمة المساعدة المضمنة تعزز الثقة وتحفز العملاء على العودة.",
  },
  {
    icon: TrendingUp,
    fr: "Valorisez votre offre",
    ar: "عزّز عرضك",
    descFr:
      "Différenciez-vous de la concurrence en proposant une assistance routière 24/7 sans supplément.",
    descAr: "تميّز عن المنافسين بتقديم مساعدة طريق 24/7 بدون تكلفة إضافية.",
  },
  {
    icon: HeadphonesIcon,
    fr: "Support dédié",
    ar: "دعم مخصص",
    descFr:
      "Un account manager Al-Arabat suit vos dossiers et répond à vos demandes en moins de 2 heures.",
    descAr: "مدير حساب مخصص يتابع ملفاتكم ويرد على طلباتكم في أقل من ساعتين.",
  },
  {
    icon: BadgeCheck,
    fr: "Chauffeurs certifiés",
    ar: "سائقون معتمدون",
    descFr:
      "Tous nos dépanneurs sont vérifiés, assurés et évalués par nos clients. Zéro mauvaise surprise.",
    descAr: "جميع سائقينا محققون ومؤمَّنون ومُقيَّمون. لا مفاجآت سيئة.",
  },
  {
    icon: Clock,
    fr: "Intervention rapide",
    ar: "تدخل سريع",
    descFr:
      "Délai moyen d'intervention inférieur à 28 minutes dans les grandes wilayas.",
    descAr: "متوسط وقت التدخل أقل من 28 دقيقة في الولايات الكبرى.",
  },
  {
    icon: FileText,
    fr: "Rapports mensuels",
    ar: "تقارير شهرية",
    descFr:
      "Tableau de bord en temps réel : nombre d'interventions, satisfaction client, temps moyen.",
    descAr: "لوحة تحكم فورية: عدد التدخلات، رضا العملاء، الوقت المتوسط.",
  },
];

const SERVICES = [
  { icon: Truck, fr: "Remorquage", ar: "قطر المركبة" },
  { icon: Car, fr: "Batterie à plat", ar: "البطارية الفارغة" },
  { icon: PhoneCall, fr: "Crevaison", ar: "الإطار المثقوب" },
  { icon: Truck, fr: "Panne de carburant", ar: "نفاد الوقود" },
  { icon: ShieldCheck, fr: "Assistance accident", ar: "المساعدة عند الحادث" },
  { icon: HeadphonesIcon, fr: "Dépannage mécanique", ar: "الإصلاح الميكانيكي" },
];

const STEPS = [
  {
    n: "01",
    icon: Handshake,
    fr: "Contactez-nous",
    ar: "تواصل معنا",
    descFr: "Remplissez le formulaire ci-dessous ou appelez directement notre équipe partenaires.",
    descAr: "أملأ النموذج أدناه أو اتصل مباشرة بفريق الشراكات.",
  },
  {
    n: "02",
    icon: FileText,
    fr: "Signez le contrat",
    ar: "وقّع العقد",
    descFr: "Un contrat simple et transparent. Tarification à l'usage ou forfait mensuel selon votre volume.",
    descAr: "عقد بسيط وشفاف. تسعير حسب الاستخدام أو اشتراك شهري حسب حجمكم.",
  },
  {
    n: "03",
    icon: Users,
    fr: "Intégrez vos clients",
    ar: "أضف عملاءك",
    descFr: "Nous créons les comptes de vos acheteurs automatiquement à l'activation du véhicule.",
    descAr: "نُنشئ حسابات المشترين تلقائيًا عند تفعيل السيارة.",
  },
  {
    n: "04",
    icon: Star,
    fr: "Suivez & analysez",
    ar: "تابع وحلّل",
    descFr: "Accédez à votre tableau de bord pour voir les interventions, les notes et les économies générées.",
    descAr: "ادخل إلى لوحة التحكم لرؤية التدخلات والتقييمات والمدخرات.",
  },
];

const TESTIMONIALS = [
  {
    name: "Karim Benali",
    role: "Directeur, Auto Plus Oran",
    text: "Depuis le partenariat avec Al-Arabat, nos clients ne nous quittent plus. Le taux de renouvellement de véhicule a augmenté de 18% en un an.",
    stars: 5,
  },
  {
    name: "Samira Hadj",
    role: "Responsable SAV, MotoAuto Alger",
    text: "Le tableau de bord est très clair et l'équipe réactive. Nos acheteurs adorent l'application, ça fait vraiment la différence.",
    stars: 5,
  },
  {
    name: "Yacine Ouali",
    role: "Gérant, Constantine Cars",
    text: "On offre l'assistance sur 2 ans à chaque voiture vendue. Résultat : zéro retour négatif lié à une panne depuis 8 mois.",
    stars: 5,
  },
];

/* ─── component ─────────────────────────────────────────────────────────── */
function ConcessionnairePage() {
  const { t } = useLang();

  return (
    <div className="min-h-screen bg-sand font-body text-ink antialiased">
      <Nav />

      {/* ── HERO ── */}
      <section className="relative overflow-hidden border-b-2 border-ink bg-ink text-sand">
        {/* decorative grid */}
        <div
          className="pointer-events-none absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage:
              "repeating-linear-gradient(0deg,transparent,transparent 39px,currentColor 39px,currentColor 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,currentColor 39px,currentColor 40px)",
          }}
        />
        <div className="relative mx-auto max-w-6xl px-4 py-24 md:px-8 md:py-36">
          <div className="inline-flex items-center gap-2 border border-brand/40 bg-brand/10 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand">
            <Building2 className="h-3 w-3" />
            {t("Espace Concessionnaire", "فضاء الوكيل")}
          </div>
          <h1 className="mt-6 max-w-3xl font-display text-5xl uppercase leading-none tracking-tight text-sand md:text-7xl">
            {t(
              "Offrez l'assistance\nroutière à vos clients.",
              "امنح عملاءك\nمساعدة الطريق.",
            )}
          </h1>
          <p className="mt-6 max-w-xl text-lg text-sand/70">
            {t(
              "Partenariat exclusif Al-Arabat pour les concessionnaires algériens. Renforcez la fidélité client, valorisez chaque vente et démarquez-vous.",
              "شراكة حصرية من Al-Arabat للوكلاء الجزائريين. عزّز ولاء العملاء وضاعف قيمة كل عملية بيع.",
            )}
          </p>
          <div className="mt-10 flex flex-wrap gap-4">
            <a
              href="#contact"
              className="inline-flex items-center gap-2 border-2 border-brand bg-brand px-6 py-3 font-display text-sm uppercase tracking-wider text-ink transition-all hover:bg-transparent hover:text-brand"
            >
              {t("Devenir partenaire", "كن شريكًا")}
              <ArrowRight className="h-4 w-4" />
            </a>
            <a
              href="#how"
              className="inline-flex items-center gap-2 border-2 border-sand/30 px-6 py-3 font-display text-sm uppercase tracking-wider text-sand hover:border-sand"
            >
              {t("Comment ça marche", "كيف يعمل")}
            </a>
          </div>

          {/* Stats bar */}
          <div className="mt-16 grid grid-cols-3 gap-px border-t border-sand/15 pt-8 md:grid-cols-3">
            {[
              { n: "120+", fr: "Concessionnaires", ar: "وكيل" },
              { n: "28 min", fr: "Délai moyen", ar: "متوسط الانتظار" },
              { n: "98%", fr: "Satisfaction client", ar: "رضا العملاء" },
            ].map((s) => (
              <div key={s.n}>
                <div className="font-display text-3xl text-brand md:text-4xl">{s.n}</div>
                <div className="mt-1 text-xs text-sand/50 uppercase tracking-wider">{t(s.fr, s.ar)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── BENEFITS ── */}
      <section className="border-b-2 border-ink py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-terracotta">
            {t("Pourquoi nous choisir", "لماذا تختارنا")}
          </div>
          <h2 className="max-w-2xl font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Les avantages du partenariat", "مزايا الشراكة")}
          </h2>
          <div className="mt-12 grid gap-px border-2 border-ink bg-ink md:grid-cols-3">
            {BENEFITS.map((b) => (
              <div key={b.fr} className="group bg-sand p-8 transition-colors hover:bg-brand">
                <b.icon className="h-8 w-8 text-terracotta group-hover:text-ink" />
                <div className="mt-4 font-display text-xl uppercase">{t(b.fr, b.ar)}</div>
                <p className="mt-2 text-sm leading-relaxed text-ink/60 group-hover:text-ink/80">
                  {t(b.descFr, b.descAr)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SERVICES COVERED ── */}
      <section className="border-b-2 border-ink bg-ink py-20 text-sand md:py-28">
        <div className="mx-auto max-w-6xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-brand">
            {t("Ce qu'on couvre", "ما نغطيه")}
          </div>
          <h2 className="font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Services inclus", "الخدمات المشمولة")}
          </h2>
          <div className="mt-12 grid grid-cols-2 gap-4 md:grid-cols-3">
            {SERVICES.map((s) => (
              <div
                key={s.fr}
                className="flex items-center gap-3 border border-sand/15 bg-sand/5 p-5 transition-colors hover:border-brand/50 hover:bg-brand/5"
              >
                <CheckCircle className="h-5 w-5 shrink-0 text-brand" />
                <span className="font-bold uppercase tracking-wide text-sm">{t(s.fr, s.ar)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section id="how" className="border-b-2 border-ink py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-terracotta">
            {t("Processus", "المسار")}
          </div>
          <h2 className="font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Comment devenir partenaire", "كيف تصبح شريكًا")}
          </h2>
          <div className="mt-12 grid gap-8 md:grid-cols-4">
            {STEPS.map((s, i) => (
              <div key={s.n} className="relative">
                {i < STEPS.length - 1 && (
                  <div className="absolute left-full top-8 hidden h-px w-full -translate-y-1/2 border-t-2 border-dashed border-ink/20 md:block" />
                )}
                <div className="flex h-16 w-16 items-center justify-center border-2 border-ink bg-brand font-display text-2xl text-ink">
                  {s.n}
                </div>
                <div className="mt-4 font-display text-lg uppercase">{t(s.fr, s.ar)}</div>
                <p className="mt-2 text-sm leading-relaxed text-ink/60">{t(s.descFr, s.descAr)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="border-b-2 border-ink bg-ink/5 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-terracotta">
            {t("Ils nous font confiance", "يثقون بنا")}
          </div>
          <h2 className="font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Témoignages partenaires", "آراء الشركاء")}
          </h2>
          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {TESTIMONIALS.map((tm) => (
              <div
                key={tm.name}
                className="border-2 border-ink bg-sand p-8 transition-shadow hover:shadow-[6px_6px_0_hsl(220_15%_10%)]"
              >
                <div className="flex gap-0.5">
                  {Array.from({ length: tm.stars }).map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-brand text-brand" />
                  ))}
                </div>
                <p className="mt-4 text-sm leading-relaxed text-ink/70">"{tm.text}"</p>
                <div className="mt-6 border-t border-ink/10 pt-4">
                  <div className="font-bold">{tm.name}</div>
                  <div className="text-xs text-ink/50">{tm.role}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING ── */}
      <section className="border-b-2 border-ink py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-terracotta">
            {t("Tarifs", "الأسعار")}
          </div>
          <h2 className="font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Des formules flexibles", "صيغ مرنة")}
          </h2>
          <div className="mt-12 grid gap-px border-2 border-ink bg-ink md:grid-cols-3">
            {[
              {
                plan: t("Starter", "مبتدئ"),
                price: t("3 500 DZD", "3 500 دج"),
                period: t("/ véhicule / an", "/ سيارة / سنة"),
                features: [
                  t("Jusqu'à 50 véhicules", "حتى 50 سيارة"),
                  t("4 interventions / an", "4 تدخلات / سنة"),
                  t("Application client", "تطبيق العميل"),
                  t("Rapport trimestriel", "تقرير ربع سنوي"),
                ],
                highlighted: false,
              },
              {
                plan: t("Business", "أعمال"),
                price: t("2 800 DZD", "2 800 دج"),
                period: t("/ véhicule / an", "/ سيارة / سنة"),
                features: [
                  t("51 à 200 véhicules", "51 إلى 200 سيارة"),
                  t("6 interventions / an", "6 تدخلات / سنة"),
                  t("Application client", "تطبيق العميل"),
                  t("Rapport mensuel", "تقرير شهري"),
                  t("Account manager dédié", "مدير حساب مخصص"),
                ],
                highlighted: true,
              },
              {
                plan: t("Enterprise", "مؤسسة"),
                price: t("Sur mesure", "حسب الطلب"),
                period: "",
                features: [
                  t("+200 véhicules", "+200 سيارة"),
                  t("Interventions illimitées", "تدخلات غير محدودة"),
                  t("Intégration DMS", "تكامل مع نظام DMS"),
                  t("SLA personnalisé", "اتفاقية مستوى خدمة"),
                  t("Formation équipe SAV", "تدريب فريق خدمة ما بعد البيع"),
                ],
                highlighted: false,
              },
            ].map((p) => (
              <div
                key={p.plan}
                className={`p-8 ${p.highlighted ? "bg-brand" : "bg-sand"}`}
              >
                {p.highlighted && (
                  <div className="mb-4 inline-block border-2 border-ink px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest">
                    {t("Recommandé", "موصى به")}
                  </div>
                )}
                <div className="font-display text-2xl uppercase">{p.plan}</div>
                <div className="mt-3 font-display text-4xl leading-none">{p.price}</div>
                {p.period && <div className="mt-1 text-xs text-ink/50">{p.period}</div>}
                <ul className="mt-6 space-y-3">
                  {p.features.map((f) => (
                    <li key={f} className="flex items-start gap-2 text-sm">
                      <CheckCircle className="mt-0.5 h-4 w-4 shrink-0 text-terracotta" />
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href="#contact"
                  className={`mt-8 inline-flex w-full items-center justify-center gap-2 border-2 border-ink py-3 font-display text-sm uppercase tracking-wider transition-colors ${
                    p.highlighted
                      ? "bg-ink text-brand hover:bg-ink/80"
                      : "hover:bg-ink hover:text-brand"
                  }`}
                >
                  {t("Commencer", "ابدأ الآن")}
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CONTACT FORM ── */}
      <section id="contact" className="border-b-2 border-ink bg-ink py-20 text-sand md:py-28">
        <div className="mx-auto max-w-3xl px-4 md:px-8">
          <div className="mb-3 text-xs font-bold uppercase tracking-widest text-brand">
            {t("Partenariat", "الشراكة")}
          </div>
          <h2 className="font-display text-4xl uppercase leading-none md:text-5xl">
            {t("Contactez notre équipe", "تواصل مع فريقنا")}
          </h2>
          <p className="mt-4 text-sand/60">
            {t(
              "Remplissez ce formulaire et un responsable partenariats vous rappellera sous 24h.",
              "أملأ هذا النموذج وسيتصل بك مسؤول الشراكات خلال 24 ساعة.",
            )}
          </p>
          <form
            className="mt-10 space-y-4"
            onSubmit={(e) => {
              e.preventDefault();
              alert(t("Merci ! Nous vous contacterons sous 24h.", "شكرًا! سنتصل بكم خلال 24 ساعة."));
            }}
          >
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                  {t("Nom & Prénom", "الاسم الكامل")}
                </label>
                <input
                  required
                  type="text"
                  placeholder={t("Ahmed Benaissa", "أحمد بن عيسى")}
                  className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand placeholder:text-sand/30 focus:border-brand focus:outline-none"
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                  {t("Nom de la concession", "اسم الوكالة")}
                </label>
                <input
                  required
                  type="text"
                  placeholder={t("Auto Plus Oran", "أوتو بلس وهران")}
                  className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand placeholder:text-sand/30 focus:border-brand focus:outline-none"
                />
              </div>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                  {t("Téléphone", "الهاتف")}
                </label>
                <input
                  required
                  type="tel"
                  placeholder="0555 00 00 00"
                  className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand placeholder:text-sand/30 focus:border-brand focus:outline-none"
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                  {t("Wilaya", "الولاية")}
                </label>
                <select
                  required
                  className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand focus:border-brand focus:outline-none"
                  defaultValue=""
                >
                  <option value="" disabled className="bg-ink">
                    {t("Choisir une wilaya", "اختر الولاية")}
                  </option>
                  {["Alger", "Oran", "Constantine", "Annaba", "Blida", "Sétif", "Tlemcen", "Autre"].map(
                    (w) => (
                      <option key={w} value={w} className="bg-ink">
                        {w}
                      </option>
                    ),
                  )}
                </select>
              </div>
            </div>
            <div>
              <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                {t("Nombre de véhicules vendus / an", "عدد السيارات المباعة / سنة")}
              </label>
              <select
                required
                className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand focus:border-brand focus:outline-none"
                defaultValue=""
              >
                <option value="" disabled className="bg-ink">
                  {t("Sélectionner", "اختر")}
                </option>
                {[
                  t("Moins de 50", "أقل من 50"),
                  t("50 – 200", "50 – 200"),
                  t("200 – 500", "200 – 500"),
                  t("Plus de 500", "أكثر من 500"),
                ].map((o) => (
                  <option key={o} value={o} className="bg-ink">
                    {o}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="mb-1 block text-xs font-bold uppercase tracking-widest text-sand/60">
                {t("Message (optionnel)", "رسالة (اختياري)")}
              </label>
              <textarea
                rows={4}
                placeholder={t(
                  "Décrivez votre concession, vos besoins…",
                  "صف وكالتك واحتياجاتك...",
                )}
                className="w-full border-2 border-sand/20 bg-sand/5 px-4 py-3 text-sand placeholder:text-sand/30 focus:border-brand focus:outline-none"
              />
            </div>
            <button
              type="submit"
              className="inline-flex w-full items-center justify-center gap-2 border-2 border-brand bg-brand py-4 font-display text-sm uppercase tracking-wider text-ink transition-all hover:bg-transparent hover:text-brand"
            >
              {t("Envoyer la demande", "إرسال الطلب")}
              <ArrowRight className="h-4 w-4" />
            </button>
          </form>

          <div className="mt-10 flex items-center justify-center gap-3 border-t border-sand/10 pt-8 text-sm text-sand/50">
            <PhoneCall className="h-4 w-4 text-brand" />
            {t("Ou appelez directement : ", "أو اتصل مباشرة: ")}
            <a href="tel:+213555000000" className="font-bold text-brand hover:underline">
              0555 00 00 00
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}