import type { Metadata } from "next";
import Link from "next/link";
import type { Lang } from "@/lib/config";
import JsonLd from "@/components/JsonLd";
import { buildPageMetadata } from "@/lib/seo";

export function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Metadata {
  return buildPageMetadata({
    lang: params.lang,
    title:
      params.lang === "ar"
        ? "مقارنة موعدي | مقارنة المساعد الذكي"
        : "Compare Mawidi | AI Receptionist Comparison",
    description:
      params.lang === "ar"
        ? "قارن بين موعدي الذكي وموظف الاستقبال التقليدي: التكلفة، السرعة، والكفاءة. موعدي يبدأ من 500 ريال مقابل 5,000+ ريال للموظف"
        : "Compare Mawidi AI vs a human receptionist: cost, speed, and efficiency. Mawidi starts at SAR 500 vs SAR 5,000+ for a receptionist",
    path: "/comparison",
  });
}

export default function ComparisonPage({ params }: { params: { lang: Lang } }) {
  const { lang } = params;
  const isAr = lang === "ar";

  return (
    <div className="bg-white py-20 dark:bg-slate-950">
      <div className="mx-auto max-w-6xl px-6">
        <header className="mb-16 text-center">
          <h1 className="text-3xl font-bold text-slate-900 dark:text-white md:text-5xl">
            {isAr
              ? "موعدي AI مقابل الاستقبال التقليدي"
              : "Mawidi AI vs. Traditional Receptionist"}
          </h1>
          <p className="mt-4 text-xl text-slate-600 dark:text-slate-300">
            {isAr
              ? "مقارنة التكلفة، السرعة، والكفاءة"
              : "Comparing Cost, Speed, and Efficiency"}
          </p>
        </header>

        <div className="overflow-hidden rounded-2xl border border-slate-200 shadow-lg dark:border-slate-800">
          <table className="w-full border-collapse bg-white text-left text-sm dark:bg-slate-900">
            <thead>
              <tr className="bg-slate-50 dark:bg-slate-800">
                <th className="px-6 py-4 font-bold text-slate-900 dark:text-white">
                  {isAr ? "المعيار" : "Criteria"}
                </th>
                <th className="bg-red-50 px-6 py-4 font-bold text-red-900 dark:bg-red-900/20 dark:text-red-100">
                  {isAr ? "موظف استقبال (بشري)" : "Human Receptionist"}
                </th>
                <th className="bg-brand-green/10 px-6 py-4 font-bold text-brand-green">
                  {isAr ? "مساعد موعدي الذكي" : "Mawidi AI Agent"}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
              <tr>
                <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                  {isAr ? "ساعات العمل" : "Availability"}
                </td>
                <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                  {isAr
                    ? "8 ساعات / يوم (مع إجازات)"
                    : "8 hours/day (excludes weekends)"}
                </td>
                <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                  {isAr ? "24/7 طوال العام" : "24/7/365"}
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                  {isAr ? "زمن الرد" : "Response Time"}
                </td>
                <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                  {isAr ? "5 دقائق - 4 ساعات" : "5 mins - 4 hours"}
                </td>
                <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                  {isAr ? "أقل من 10 ثوانٍ" : "< 10 seconds"}
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                  {isAr ? "التكلفة الشهرية" : "Monthly Cost"}
                </td>
                <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                  {isAr ? "5,000+ ريال سعودي" : "SAR 5,000+ (Salary + Visa)"}
                </td>
                <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                  {isAr ? "تبدأ من 500 ريال" : "Starts at SAR 500"}
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                  {isAr ? "القدرة الاستيعابية" : "Capacity"}
                </td>
                <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                  {isAr ? "محادثة واحدة في المرة" : "1 chat at a time"}
                </td>
                <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                  {isAr
                    ? "غير محدود (آلاف المحادثات)"
                    : "Unlimited concurrent chats"}
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                  {isAr ? "تحصيل العربون" : "Deposit Collection"}
                </td>
                <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                  {isAr ? "يدوي (تحويل بنكي)" : "Manual (Bank Transfer)"}
                </td>
                <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                  {isAr ? "آلي (رابط دفع فوري)" : "Automated (Instant Link)"}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div className="mt-12 text-center">
          <p className="mb-6 text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "ملاحظة: موعدي لا يستبدل فريقك، بل يمنحهم قوى خارقة للتركيز على خدمة المريض داخل العيادة."
              : "Note: Mawidi doesn't replace your team; it gives them superpowers to focus on in-clinic patient care."}
          </p>
          <Link
            href={`/${lang}/tools/roi-calculator`}
            className="inline-flex items-center justify-center rounded-lg bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover"
          >
            {isAr ? "احسب توفيرك الآن" : "Calculate Your Savings"}
          </Link>
        </div>
      </div>

      <JsonLd
        type="FAQPage"
        data={{
          mainEntity: [
            {
              "@type": "Question",
              name: isAr
                ? "هل موعدي أرخص من توظيف موظف استقبال؟"
                : "Is Mawidi cheaper than hiring a receptionist?",
              acceptedAnswer: {
                "@type": "Answer",
                text: isAr
                  ? "نعم، تكلفة موعدي تبدأ من حوالي 10% فقط من راتب موظف استقبال واحد، مع توفير تغطية 24/7."
                  : "Yes, Mawidi costs approximately 10% of a single receptionist's salary while providing 24/7 coverage.",
              },
            },
          ],
        }}
      />
    </div>
  );
}