import Link from "next/link";
import { Check } from "lucide-react";
import Navbar from "@/app/components/layout/Navbar";
import Logo from "@/src/utils/logo";

const plans = [
  {
    name: "أساسي",
    price: "499",
    period: "شهريًا",
    description: "مناسبة للفرق الصغيرة التي تبدأ في تنظيم أسطولها.",
    features: [
      "حتى 10 مركبات",
      "حتى 15 سائقًا",
      "إدارة الطلبات والرحلات",
      "دعم عبر البريد الإلكتروني",
    ],
    highlighted: false,
  },
  {
    name: "احترافي",
    price: "1,299",
    period: "شهريًا",
    description: "الأنسب للشركات متوسطة الحجم مع عدة فروع.",
    features: [
      "حتى 50 مركبة",
      "عدد غير محدود من السائقين",
      "إدارة الفروع والصلاحيات",
      "تقارير وتحليلات متقدمة",
      "دعم فني مباشر",
    ],
    highlighted: true,
  },
  {
    name: "مؤسسات",
    price: "تواصل معنا",
    period: "",
    description: "حلول مخصصة للمؤسسات الكبيرة وأصحاب الأساطيل الضخمة.",
    features: [
      "عدد غير محدود من المركبات والفروع",
      "تكاملات مخصصة",
      "مدير حساب مخصص",
      "اتفاقية مستوى خدمة (SLA)",
    ],
    highlighted: false,
  },
];

export default function PricesPage() {
  return (
    <main className="min-h-screen bg-[#ECEEF2] text-slate-900" dir="rtl">
      <Navbar />

      <section className="bg-[linear-gradient(145deg,#0D47A1_0%,#1A73E8_45%,#1565C0_100%)] text-white">
        <div className="mx-auto max-w-7xl px-6 py-14 text-center lg:px-8">
          <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
            الأسعار
          </p>
          <h1 className="mx-auto mt-3 max-w-2xl text-[30px] font-extrabold leading-tight lg:text-[36px]">
            خطط تناسب حجم أسطولك
          </h1>
          <p className="mx-auto mt-3 max-w-2xl text-[14px] leading-7 text-white/75">
            جميع الأسعار بالريال السعودي وغير شاملة ضريبة القيمة المضافة. يمكنك
            تغيير خطتك أو إلغاؤها في أي وقت.
          </p>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-14 lg:px-8">
        <div className="grid gap-6 md:grid-cols-3">
          {plans.map((plan) => (
            <article
              key={plan.name}
              className={`flex flex-col rounded-3xl border p-7 shadow-sm ${
                plan.highlighted
                  ? "border-blue-600 bg-white ring-2 ring-blue-600"
                  : "border-slate-200 bg-white"
              }`}
            >
              {plan.highlighted && (
                <span className="mb-4 inline-flex w-fit rounded-full bg-blue-600 px-3 py-1 text-[11px] font-bold text-white">
                  الأكثر طلبًا
                </span>
              )}
              <h3 className="text-[18px] font-extrabold text-slate-900">
                {plan.name}
              </h3>
              <p className="mt-2 text-[13px] leading-6 text-slate-500">
                {plan.description}
              </p>
              <div className="mt-5 flex items-end gap-1">
                <span className="text-[32px] font-extrabold text-slate-900">
                  {plan.price}
                </span>
                {plan.period && (
                  <span className="pb-1.5 text-[13px] text-slate-500">
                    ر.س / {plan.period}
                  </span>
                )}
              </div>
              <ul className="mt-6 flex-1 space-y-3 text-[13px] text-slate-700">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2">
                    <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-emerald-600" strokeWidth={2.5} />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <Link
                href={plan.name === "مؤسسات" ? "/frequently_asked_questions" : "/login"}
                className={`mt-7 inline-flex h-11 items-center justify-center rounded-xl px-5 text-[13px] font-semibold ${
                  plan.highlighted
                    ? "bg-blue-600 text-white hover:bg-blue-700"
                    : "border border-slate-200 text-slate-700 hover:bg-slate-50"
                }`}
              >
                {plan.name === "مؤسسات" ? "تواصل مع المبيعات" : "ابدأ الآن"}
              </Link>
            </article>
          ))}
        </div>
      </section>

      <footer className="bg-[#0F172A] text-white">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
          <Logo white={true} />
          <div className="text-center text-white/40">
            © 2026 Slash.sa. جميع الحقوق محفوظة.
          </div>
        </div>
      </footer>
    </main>
  );
}