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";

const WHATSAPP_DEMO_NUMBER = ""; // Configure in production
const WHATSAPP_LINK = `https://wa.me/${WHATSAPP_DEMO_NUMBER}?text=Book%20an%20appointment`;

export function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Metadata {
  return buildPageMetadata({
    lang: params.lang,
    title:
      params.lang === "ar"
        ? "جرّب موعدي فورًا عبر واتساب | Mawidi"
        : "Try Mawidi Instantly via WhatsApp | Mawidi",
    description:
      params.lang === "ar"
        ? "جرّب مساعد الذكاء الاصطناعي من موعدي عبر واتساب في 30 ثانية — بدون تسجيل. شاهد كيف يتعامل المساعد مع حجز المواعيد تلقائيًا."
        : "Experience Mawidi's AI receptionist via WhatsApp in 30 seconds — no signup needed. See how it handles appointment bookings automatically.",
    path: "/demo/instant",
    keywords: [
      "whatsapp booking demo",
      "AI receptionist demo",
      "مساعد واتساب تجريبي",
      "حجز مواعيد واتساب",
      "mawidi demo",
      "whatsapp appointment booking",
      "AI booking assistant",
    ],
  });
}

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

  return (
    <div dir={isAr ? "rtl" : "ltr"} className="bg-white dark:bg-slate-950">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white px-6 pb-16 pt-24 dark:from-slate-900 dark:to-slate-950 md:pb-24 md:pt-32">
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-green-200 bg-green-50 px-4 py-2 text-sm font-medium text-green-700 dark:border-green-800 dark:bg-green-900/30 dark:text-green-300">
            <span className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse" />
            {isAr
              ? "تجربة مباشرة — بدون تسجيل"
              : "Live Demo — No Signup Required"}
          </div>

          <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white md:text-6xl">
            {isAr
              ? "جرّب موعدي في 30 ثانية"
              : "Experience Mawidi in 30 Seconds"}
          </h1>

          <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-600 dark:text-slate-300 md:text-xl">
            {isAr
              ? "شاهد كيف يتعامل مساعدنا الذكي مع حجز المواعيد عبر واتساب — بدون تسجيل"
              : "See how our AI receptionist handles appointment bookings via WhatsApp — no signup needed"}
          </p>

          <div className="mt-10 flex flex-col items-center gap-6">
            {/* WhatsApp CTA Button */}
            <a
              href={WHATSAPP_LINK}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-3 rounded-2xl px-10 py-5 text-lg font-bold text-white shadow-lg transition-all hover:scale-105 hover:shadow-xl md:text-xl"
              style={{ backgroundColor: "#25D366" }}
            >
              <svg className="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
              </svg>
              {isAr ? "ابدأ التجربة عبر واتساب" : "Start Demo on WhatsApp"}
            </a>

            {/* QR Code - Desktop Only */}
            <div className="hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800 md:block">
              <div className="flex h-48 w-48 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-700">
                <div className="text-center text-sm text-slate-500 dark:text-slate-400">
                  <svg
                    className="mx-auto mb-2 h-12 w-12"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5z"
                    />
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d="M6.75 6.75h.75v.75h-.75zM6.75 16.5h.75v.75h-.75zM16.5 6.75h.75v.75h-.75zM13.5 13.5h.75v.75h-.75zM13.5 19.5h.75v.75h-.75zM19.5 13.5h.75v.75h-.75zM19.5 19.5h.75v.75h-.75zM16.5 16.5h.75v.75h-.75z"
                    />
                  </svg>
                  {isAr ? "رمز QR سيظهر هنا" : "QR code placeholder"}
                </div>
              </div>
              <p className="mt-3 text-center text-sm text-slate-500 dark:text-slate-400">
                {isAr
                  ? "امسح الرمز بكاميرا هاتفك"
                  : "Scan with your phone camera"}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "كيف يعمل؟" : "How It Works"}
          </h2>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {[
              {
                step: 1,
                icon: (
                  <svg
                    className="h-8 w-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5z"
                    />
                  </svg>
                ),
                title: isAr
                  ? "امسح رمز QR أو اضغط الزر"
                  : "Scan the QR Code or Tap the Button",
                description: isAr
                  ? "على الجوال، اضغط الزر مباشرة. على الكمبيوتر، امسح رمز QR بكاميرا هاتفك."
                  : "On mobile, tap the button directly. On desktop, scan the QR code with your phone camera.",
              },
              {
                step: 2,
                icon: (
                  <svg
                    className="h-8 w-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
                    />
                  </svg>
                ),
                title: isAr ? 'قل "احجز موعد"' : 'Say "Book an appointment"',
                description: isAr
                  ? "المحادثة ستبدأ تلقائيًا. تحدث بالعربية أو الإنجليزية — المساعد يفهم كلاهما."
                  : "The conversation starts automatically. Speak Arabic or English — the assistant understands both.",
              },
              {
                step: 3,
                icon: (
                  <svg
                    className="h-8 w-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
                    />
                  </svg>
                ),
                title: isAr ? "شاهد السحر" : "Watch the Magic",
                description: isAr
                  ? "شاهد المساعد يعرض الخدمات، يختار الوقت المناسب، ويؤكد الحجز — كل شيء تلقائي."
                  : "Watch the assistant show services, pick a time slot, and confirm the booking — all automated.",
              },
            ].map(({ step, icon, title, description }) => (
              <div
                key={step}
                className="relative rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900"
              >
                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-brand-green px-3 py-1 text-sm font-bold text-white">
                  {step}
                </div>
                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-brand-green/10 text-brand-green">
                  {icon}
                </div>
                <h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
                  {title}
                </h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What You'll Experience */}
      <section className="bg-slate-50 px-6 py-16 dark:bg-slate-900 md:py-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "ماذا ستجرّب؟" : "What You'll Experience"}
          </h2>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            {[
              {
                en: "Real-time appointment booking",
                ar: "حجز مواعيد في الوقت الفعلي",
              },
              {
                en: "Intelligent rescheduling",
                ar: "إعادة جدولة ذكية",
              },
              {
                en: "Deposit collection (simulated)",
                ar: "تحصيل العربون (محاكاة)",
              },
              {
                en: "Bilingual Arabic/English support",
                ar: "دعم ثنائي اللغة عربي/إنجليزي",
              },
              {
                en: "24/7 availability",
                ar: "متاح على مدار الساعة",
              },
              {
                en: "Automated reminders & follow-ups",
                ar: "تذكيرات ومتابعات تلقائية",
              },
            ].map((feature) => (
              <div
                key={feature.en}
                className="flex items-start gap-3 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-800"
              >
                <div className="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-brand-green/10">
                  <svg
                    className="h-4 w-4 text-brand-green"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2.5}
                      d="M4.5 12.75l6 6 9-13.5"
                    />
                  </svg>
                </div>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
                  {isAr ? feature.ar : feature.en}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Demo Clinic Info */}
      <section className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24">
        <div className="mx-auto max-w-3xl">
          <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 dark:border-slate-700 dark:bg-slate-900 md:p-10">
            <div className="mb-6 flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
                <svg
                  className="h-5 w-5 text-blue-600 dark:text-blue-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.5}
                    d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"
                  />
                </svg>
              </div>
              <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
                {isAr
                  ? "ستتحدث مع عيادة النور التجريبية"
                  : "You'll Be Chatting with Al Noor Demo Clinic"}
              </h2>
            </div>

            <p className="mb-6 text-slate-600 dark:text-slate-400">
              {isAr
                ? "هذه عيادة تجريبية مُعدّة لتجربة كل ميزات المساعد الذكي."
                : "This is a demo clinic set up to showcase every feature of the AI assistant."}
            </p>

            <div className="mb-6">
              <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                {isAr ? "الخدمات المتاحة" : "Available Services"}
              </h3>
              <div className="space-y-2">
                {[
                  {
                    en: "General Consultation",
                    ar: "استشارة عامة",
                    price: "SAR 200",
                    priceAr: "200 ريال",
                  },
                  {
                    en: "Dental Cleaning",
                    ar: "تنظيف أسنان",
                    price: "SAR 350",
                    priceAr: "350 ريال",
                  },
                  {
                    en: "Dermatology",
                    ar: "جلدية",
                    price: "SAR 500",
                    priceAr: "500 ريال",
                  },
                ].map((service) => (
                  <div
                    key={service.en}
                    className="flex items-center justify-between rounded-lg bg-white px-4 py-3 dark:bg-slate-800"
                  >
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
                      {isAr ? service.ar : service.en}
                    </span>
                    <span className="text-sm font-bold text-brand-green">
                      {isAr ? service.priceAr : service.price}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <h3 className="mb-2 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                {isAr ? "ساعات العمل" : "Operating Hours"}
              </h3>
              <div className="space-y-1 text-sm text-slate-600 dark:text-slate-400">
                <p>
                  {isAr
                    ? "الأحد — الخميس: 9 صباحًا — 9 مساءً"
                    : "Sun — Thu: 9:00 AM — 9:00 PM"}
                </p>
                <p>
                  {isAr
                    ? "السبت: 10 صباحًا — 4 مساءً"
                    : "Sat: 10:00 AM — 4:00 PM"}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Social Proof */}
      <section className="bg-slate-50 px-6 py-16 dark:bg-slate-900 md:py-24">
        <div className="mx-auto max-w-5xl">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {[
              {
                stat: "30% → 8%",
                label: isAr
                  ? "انخفاض معدل عدم الحضور"
                  : "No-show rate reduction",
              },
              {
                stat: isAr ? "< 10 ثوانٍ" : "< 10 seconds",
                label: isAr ? "متوسط زمن الاستجابة" : "Average response time",
              },
              {
                stat: "24/7",
                label: isAr ? "متاح طوال الأسبوع" : "Always available",
              },
            ].map(({ stat, label }) => (
              <div key={label} className="text-center">
                <div className="text-4xl font-bold text-brand-green md:text-5xl">
                  {stat}
                </div>
                <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
                  {label}
                </p>
              </div>
            ))}
          </div>

          <blockquote className="mx-auto mt-12 max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-800">
            <p className="text-lg italic text-slate-700 dark:text-slate-300">
              {isAr
                ? '"قلّلنا نسبة عدم الحضور من 30% إلى 8% في أول شهرين. المرضى يحبون سهولة الحجز عبر واتساب."'
                : '"We reduced no-shows from 30% to 8% in the first two months. Patients love the ease of booking via WhatsApp."'}
            </p>
            <footer className="mt-4 text-sm text-slate-500 dark:text-slate-400">
              {isAr ? "— مدير عيادة في الرياض" : "— Clinic Manager, Riyadh"}
            </footer>
          </blockquote>
        </div>
      </section>

      {/* FAQ */}
      <section className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24">
        <div className="mx-auto max-w-3xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "أسئلة شائعة" : "Frequently Asked Questions"}
          </h2>

          <div className="space-y-6">
            {[
              {
                q: isAr ? "هل هذه تجربة حقيقية؟" : "Is this a real demo?",
                a: isAr
                  ? "نعم، أنت تتفاعل مع مساعدنا الذكي الفعلي. عيادة النور التجريبية هي بيئة مُعدّة لعرض جميع الميزات — بما في ذلك الحجز وإعادة الجدولة وتحصيل العربون."
                  : "Yes, you're interacting with our actual AI agent. Al Noor Demo Clinic is a sandbox environment set up to showcase every feature — including booking, rescheduling, and deposit collection.",
              },
              {
                q: isAr ? "هل سأتحدث مع شخص حقيقي؟" : "Will I talk to a human?",
                a: isAr
                  ? "لا، المحادثة بالكامل يتولاها الذكاء الاصطناعي. هذا بالضبط ما سيختبره عملاؤك عند استخدام موعدي."
                  : "No, the entire conversation is handled by AI. This is exactly what your customers would experience when using Mawidi.",
              },
              {
                q: isAr
                  ? "كم يستغرق الإعداد لعملي؟"
                  : "How long does setup take?",
                a: isAr
                  ? "معظم الأعمال تكون جاهزة للعمل خلال 48 ساعة. نتولى كل شيء — من إعداد الخدمات إلى ربط واتساب."
                  : "Most businesses are live within 48 hours. We handle everything — from configuring your services to connecting WhatsApp.",
              },
              {
                q: isAr ? "هل بياناتي آمنة؟" : "Is my data safe?",
                a: isAr
                  ? "هذه بيئة تجريبية. لن يتم تخزين بيانات شخصية حقيقية. أي حجوزات تتم هنا هي لأغراض العرض فقط."
                  : "This is a demo environment. No real personal data is stored. Any bookings made here are for demonstration purposes only.",
              },
            ].map(({ q, a }) => (
              <details
                key={q}
                className="group rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
              >
                <summary className="flex cursor-pointer items-center justify-between p-6 text-left font-semibold text-slate-900 dark:text-white">
                  {q}
                  <svg
                    className="h-5 w-5 flex-shrink-0 text-slate-400 transition-transform group-open:rotate-180"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </summary>
                <p className="px-6 pb-6 text-slate-600 dark:text-slate-400">
                  {a}
                </p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="bg-gradient-to-b from-slate-50 to-white px-6 py-16 dark:from-slate-900 dark:to-slate-950 md:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr
              ? "جاهز لتفعيل هذا لعملك؟"
              : "Ready to Set This Up for Your Business?"}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "ابدأ تجربة مجانية لمدة 14 يومًا — بدون بطاقة ائتمان."
              : "Start a 14-day free trial — no credit card required."}
          </p>

          <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            <Link
              href={`/${lang}/signup?plan=tier2`}
              className="inline-flex w-full items-center justify-center rounded-xl bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover sm:w-auto"
            >
              {isAr ? "ابدأ تجربة مجانية" : "Start Your 14-Day Free Trial"}
            </Link>
            <Link
              href={`/${lang}/tools/roi-calculator`}
              className="inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-8 py-4 text-lg font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 sm:w-auto"
            >
              {isAr ? "احسب توفيرك" : "Calculate Your Savings"}
            </Link>
            <Link
              href={`/${lang}/demo`}
              className="inline-flex w-full items-center justify-center rounded-xl px-8 py-4 text-lg font-semibold text-brand-green underline-offset-4 transition-colors hover:underline sm:w-auto"
            >
              {isAr ? "احجز عرض توضيحي" : "Book a Demo Call"}
            </Link>
          </div>
        </div>
      </section>

      {/* JSON-LD FAQPage */}
      <JsonLd
        type="FAQPage"
        data={{
          mainEntity: [
            {
              "@type": "Question",
              name: "Is this a real WhatsApp booking demo?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "Yes, you interact with Mawidi's actual AI agent. Al Noor Demo Clinic is a sandbox environment showcasing booking, rescheduling, and deposit collection features.",
              },
            },
            {
              "@type": "Question",
              name: "Will I talk to a human during the demo?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "No, the entire conversation is handled by AI. This is exactly what your customers experience when using Mawidi for appointment booking.",
              },
            },
            {
              "@type": "Question",
              name: "How long does it take to set up Mawidi for my business?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "Most businesses are live within 48 hours. Mawidi handles everything from configuring services to connecting WhatsApp.",
              },
            },
            {
              "@type": "Question",
              name: "Is my data safe during the demo?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "This is a demo environment. No real personal data is stored. Any bookings made are for demonstration purposes only.",
              },
            },
          ],
        }}
      />
    </div>
  );
}