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

export const metadata: Metadata = {
  title: "Why Clinic Automation? The Definitive Guide | Mawidi",
  description:
    "Learn why GCC clinics are switching to AI receptionists. Reduce no-shows by 38% and increase bookings with WhatsApp automation.",
};

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

  const title = isAr
    ? "لماذا تحتاج عيادتك إلى أتمتة الاستقبال؟"
    : "Why Your Clinic Needs Reception Automation";
  const subtitle = isAr
    ? "الدليل الشامل لتحويل واتساب العيادة من عبء تشغيلي إلى محرك أرباح"
    : "The definitive guide to turning your clinic WhatsApp from a cost center into a profit engine";

  return (
    <main className="bg-white dark:bg-slate-950">
      <article className="mx-auto max-w-4xl px-6 py-20">
        <header className="mb-12 text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-brand-green/10 px-4 py-2 text-sm font-semibold text-brand-green">
            {isAr ? "دليل العيادات 2025" : "2025 Clinic Guide"}
          </div>
          <h1 className="text-4xl font-bold leading-tight text-slate-900 dark:text-white md:text-6xl">
            {title}
          </h1>
          <p className="mt-6 text-xl text-slate-600 dark:text-slate-300">
            {subtitle}
          </p>
        </header>

        <div className="prose prose-lg prose-slate mx-auto dark:prose-invert">
          {isAr ? (
            <>
              <p className="lead">
                في عام 2024، خسر قطاع العيادات في الخليج ما يقارب 1.2 مليار ريال
                سعودي بسبب المواعيد الفائتة (No-Shows) والاستجابة المتأخرة على
                واتساب.
              </p>
              <h2>المشكلة: عنق الزجاجة في الاستقبال</h2>
              <p>
                يعتمد المريض الخليجي اليوم بنسبة 94% على واتساب للتواصل مع
                العيادات. ومع ذلك، لا تزال معظم العيادات تعتمد على موظفي استقبال
                للرد يدوياً، مما يؤدي إلى:
              </p>
              <ul>
                <li>
                  <strong>زمن رد بطيء:</strong> متوسط 4 ساعات للرد، بينما يغادر
                  المريض المحتمل بعد 5 دقائق.
                </li>
                <li>
                  <strong>عدم تحصيل العربون:</strong> صعوبة إرسال روابط الدفع
                  ومتابعتها يدوياً.
                </li>
                <li>
                  <strong>فوضى الرسائل:</strong> ضياع رسائل المرضى الجدد وسط
                  مئات الرسائل اليومية.
                </li>
              </ul>

              <h2>الحل: موظف استقبال ذكي لا ينام</h2>
              <p>
                الأتمتة ليست مجرد "بوت" للرد الآلي. إنها نظام متكامل يربط بين
                واتساب وملف المريض ونظام الدفع.
              </p>

              <h3>1. الرد الفوري (Instant Response)</h3>
              <p>
                الرد في أقل من 10 ثوانٍ يرفع احتمالية الحجز بنسبة 700%. موعدي
                يضمن هذا السرعة 24/7 باللغتين العربية والإنجليزية.
              </p>

              <h3>2. الالتزام عبر العربون (Commitment via Deposit)</h3>
              <p>
                أثبتت بياناتنا أن تحصيل 50-100 ريال كعربون يقلل نسبة عدم الحضور
                من 40% إلى أقل من 3%. الأتمتة ترسل الرابط، وتتحقق من الدفع،
                وتؤكد الموعد فوراً.
              </p>

              <h3>3. إعادة التنشيط (Reactivation)</h3>
              <p>
                لديك آلاف المرضى السابقين الذين لم يزوروا العيادة منذ أشهر.
                الأتمتة يمكنها إرسال عروض مخصصة لهم (مثل: "حنا اشتقنا لك، تفضلي
                خصم 20% على الليزر") دون أي جهد يدوي.
              </p>

              <div className="my-12 rounded-2xl bg-slate-50 p-8 text-center dark:bg-slate-900">
                <h3 className="mt-0 text-brand-green">النتيجة بالأرقام</h3>
                <div className="grid gap-4 md:grid-cols-3">
                  <div>
                    <div className="text-3xl font-bold">38%</div>
                    <div className="text-sm">انخفاض في عدم الحضور</div>
                  </div>
                  <div>
                    <div className="text-3xl font-bold">24/7</div>
                    <div className="text-sm">تغطية للاستفسارات</div>
                  </div>
                  <div>
                    <div className="text-3xl font-bold">41%</div>
                    <div className="text-sm">زيادة في التحويل</div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              <p className="lead">
                In 2024, the GCC clinic sector lost an estimated SAR 1.2 billion
                due to no-shows and delayed WhatsApp responses. It's time for a
                change.
              </p>
              <h2>The Problem: The Reception Bottleneck</h2>
              <p>
                94% of patients in the GCC prefer WhatsApp for clinic
                communication. Yet, most clinics still rely on manual human
                responses, leading to:
              </p>
              <ul>
                <li>
                  <strong>Slow Response Times:</strong> Average 4-hour delay,
                  while leads go cold in 5 minutes.
                </li>
                <li>
                  <strong>Lost Deposits:</strong> Chasing payments manually is
                  awkward and inefficient.
                </li>
                <li>
                  <strong>Inbox Chaos:</strong> New patient leads get buried
                  under hundreds of daily operational messages.
                </li>
              </ul>

              <h2>The Solution: An AI Receptionist That Never Sleeps</h2>
              <p>
                Automation isn't just a "chatbot." It's an integrated system
                bridging WhatsApp, your EMR, and payment gateways.
              </p>

              <h3>1. Instant Response</h3>
              <p>
                Responding in under 10 seconds increases booking probability by
                700%. Mawidi guarantees this speed 24/7 in fluent Arabic and
                English.
              </p>

              <h3>2. Commitment via Deposit</h3>
              <p>
                Our data shows that collecting a small deposit (SAR 50-100)
                reduces no-shows from 40% to under 3%. Automation handles the
                link sending, verification, and booking confirmation instantly.
              </p>

              <h3>3. Patient Reactivation</h3>
              <p>
                You have thousands of dormant patients. Automation can wake them
                up with personalized offers (e.g., "We miss you, here is 20% off
                laser") without any manual effort from your staff.
              </p>

              <div className="my-12 rounded-2xl bg-slate-50 p-8 text-center dark:bg-slate-900">
                <h3 className="mt-0 text-brand-green">The Impact in Numbers</h3>
                <div className="grid gap-4 md:grid-cols-3">
                  <div>
                    <div className="text-3xl font-bold">38%</div>
                    <div className="text-sm">Reduction in No-Shows</div>
                  </div>
                  <div>
                    <div className="text-3xl font-bold">24/7</div>
                    <div className="text-sm">Inquiry Coverage</div>
                  </div>
                  <div>
                    <div className="text-3xl font-bold">41%</div>
                    <div className="text-sm">Conversion Increase</div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="mt-16 flex flex-col items-center justify-center gap-4 text-center">
          <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
            {isAr
              ? "هل أنت جاهز لأتمتة عيادتك؟"
              : "Ready to Automate Your Clinic?"}
          </h2>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${lang}/contact`}
              className="rounded-lg bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover"
            >
              {isAr ? "ابدأ التجربة المجانية" : "Start Free Pilot"}
            </Link>
            <Link
              href={`/${lang}/pricing`}
              className="rounded-lg border border-slate-200 px-8 py-4 text-lg font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
            >
              {isAr ? "شاهد الأسعار" : "View Pricing"}
            </Link>
          </div>
        </div>
      </article>

      <JsonLd
        type="Article"
        data={{
          headline: title,
          description: subtitle,
          author: {
            "@type": "Organization",
            name: "Mawidi Team",
          },
          publisher: {
            "@type": "Organization",
            name: "Mawidi",
            logo: {
              "@type": "ImageObject",
              url: `https://${SITE.domain}/images/logos/mawidi-logo.png`,
            },
          },
          datePublished: "2024-01-15",
          dateModified: new Date().toISOString().split("T")[0],
        }}
      />
    </main>
  );
}