import { SITE, type Lang } from "@/lib/config";

export const revalidate = SITE.revalidateSeconds;

export default function IntegrationsPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const isAr = params.lang === "ar";
  const integrations = [
    {
      nameEn: "Tap Payments",
      nameAr: "تاب للمدفوعات",
      categoryEn: "Payments",
      categoryAr: "المدفوعات",
    },
    {
      nameEn: "PayTabs",
      nameAr: "باي تابز",
      categoryEn: "Payments",
      categoryAr: "المدفوعات",
    },
    {
      nameEn: "HyperPay",
      nameAr: "هايبر باي",
      categoryEn: "Payments",
      categoryAr: "المدفوعات",
    },
    {
      nameEn: "Google Calendar",
      nameAr: "تقويم Google",
      categoryEn: "Scheduling",
      categoryAr: "الجدولة",
    },
    {
      nameEn: "Microsoft Outlook",
      nameAr: "مايكروسوفت أوتلوك",
      categoryEn: "Scheduling",
      categoryAr: "الجدولة",
    },
    {
      nameEn: "Salesforce Health Cloud",
      nameAr: "سيلزفورس هيلث كلاود",
      categoryEn: "CRM",
      categoryAr: "إدارة العلاقات",
    },
  ];
  return (
    <main className="max-w-6xl mx-auto px-4 py-16 space-y-12">
      <section>
        <h1 className="text-3xl md:text-4xl font-extrabold">
          {isAr ? "يتكامل مع أدواتك الحالية" : "Plug into your existing stack"}
        </h1>
        <p className="mt-4 text-neutral-600 text-lg">
          {isAr
            ? "ندعم بوابات الدفع المحلية وجداول العيادات وأدوات CRM الشائعة لضمان تدفق الاتصالات والبيانات بسلاسة."
            : "We support local payment rails, clinic calendars, and popular CRMs to keep messages and data flowing."}
        </p>
      </section>
      <section className="grid md:grid-cols-3 gap-6">
        {integrations.map((integration) => (
          <div
            key={integration.nameEn}
            className="border rounded-xl p-6 bg-white"
          >
            <div className="text-sm uppercase tracking-wide text-brand-green">
              {isAr ? integration.categoryAr : integration.categoryEn}
            </div>
            <div className="mt-2 text-xl font-semibold">
              {isAr ? integration.nameAr : integration.nameEn}
            </div>
            <p className="text-neutral-600 mt-3">
              {isAr
                ? "ربط آمن خلال OAuth أو مفاتيح API مع مراقبة مستمرة للأداء."
                : "Secure OAuth/API key connections with continuous monitoring."}
            </p>
          </div>
        ))}
      </section>
      <section className="bg-slate-50 rounded-3xl p-8">
        <h2 className="text-2xl font-bold">
          {isAr ? "مسار التكامل" : "Integration playbook"}
        </h2>
        <ol className="mt-4 space-y-3 text-neutral-600">
          {[
            isAr
              ? "نجمع متطلبات الربط ونختار نموذج التفويض المناسب."
              : "Gather requirements and select the right authorization model.",
            isAr
              ? "نختبر في بيئة تجريبية قبل الإطلاق."
              : "Test in sandbox before launch.",
            isAr
              ? "نراقب الأداء ونرسل تنبيهات لأي انقطاع محتمل."
              : "Monitor uptime with proactive alerts.",
          ].map((step, idx) => (
            <li key={step} className="flex gap-3">
              <span className="font-semibold text-brand-green">{idx + 1}</span>
              <span>{step}</span>
            </li>
          ))}
        </ol>
      </section>
    </main>
  );
}