import { notFound } from "next/navigation";
import Link from "next/link";
import ConversationMockup from "@/components/ConversationMockup";
import {
  SITE,
  SERVICES,
  LOCATIONS,
  SERVICE_KEYS,
  LOCATION_KEYS,
  type Lang,
  type ServiceKey,
  type LocationKey,
} from "@/lib/config";

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  const langs: Lang[] = ["ar", "en"];
  const pairs: { lang: Lang; location: string; service: string }[] = [];
  for (const lang of langs) {
    for (const lk of LOCATION_KEYS) {
      for (const sk of SERVICE_KEYS) {
        pairs.push({
          lang,
          location: LOCATIONS[lk].slug[lang],
          service: SERVICES[sk].slug[lang],
        });
      }
    }
  }
  return pairs;
}

function findBySlug<
  T extends { slug: Record<Lang, string>; name: Record<Lang, string> },
>(items: T[], lang: Lang, slug: string): T | null {
  return items.find((i) => i.slug[lang] === slug) ?? null;
}

export default function ServiceLocationPage({
  params,
}: {
  params: { lang: Lang; location: string; service: string };
}) {
  const lang = params.lang;
  const svc = findBySlug(
    SERVICE_KEYS.map((k: ServiceKey) => SERVICES[k]) as Array<
      (typeof SERVICES)[ServiceKey]
    >,
    lang,
    params.service,
  );
  const loc = findBySlug(
    LOCATION_KEYS.map((k: LocationKey) => LOCATIONS[k]) as Array<
      (typeof LOCATIONS)[LocationKey]
    >,
    lang,
    params.location,
  );
  if (!svc || !loc) return notFound();

  const isAr = lang === "ar";
  const isBookingAutomation = params.service === "booking-automation";

  // Enhanced content for booking automation service
  if (isBookingAutomation) {
    return (
      <main className="bg-white dark:bg-slate-900">
        {/* Enhanced Hero with Visual Appeal */}
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-brand-green/10 via-brand-green/5 to-transparent dark:from-brand-green/20 dark:via-brand-green/10" />
          <div className="absolute inset-0 bg-[url('/images/hero-pattern.svg')] opacity-5" />

          <div className="relative max-w-7xl mx-auto px-4 py-20 md:py-28">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <div className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/30 dark:to-emerald-900/30 px-5 py-2.5 mb-6 shadow-sm">
                  <span className="animate-pulse">🟢</span>
                  <span className="text-sm font-semibold text-brand-green">
                    {isAr
                      ? "نشط الآن • يرد خلال 10 ثوانٍ"
                      : "Live Now • Responds in 10 seconds"}
                  </span>
                </div>

                <h1 className="text-4xl md:text-6xl font-extrabold mb-6">
                  <span className="bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-200 bg-clip-text text-transparent">
                    {isAr ? "أتمتة الحجز الذكية" : "Smart Booking Automation"}
                  </span>
                  <br />
                  <span className="text-brand-green">
                    {isAr ? `في ${loc.name.ar}` : `in ${loc.name.en}`}
                  </span>
                </h1>

                <p className="text-xl text-slate-600 dark:text-slate-300 mb-8 leading-relaxed">
                  {isAr
                    ? "حوّل واتساب إلى مكتب استقبال يعمل 24/7. يتحدث العربية والإنجليزية، يأخذ المدفوعات، ويملأ جدولك بالمواعيد المؤكدة."
                    : "Transform WhatsApp into a 24/7 reception desk. Speaks Arabic & English, takes payments, and fills your calendar with confirmed appointments."}
                </p>

                {/* Trust Badges */}
                <div className="flex flex-wrap gap-6 mb-8">
                  <div className="flex items-center gap-2">
                    <span className="text-green-500">✓</span>
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                      {isAr ? "معتمد من واتساب" : "WhatsApp Verified"}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-green-500">✓</span>
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                      {isAr ? "تشفير من طرف لطرف" : "End-to-End Encrypted"}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-green-500">✓</span>
                    <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
                      {isAr ? "متوافق مع GDPR" : "GDPR Compliant"}
                    </span>
                  </div>
                </div>

                <div className="flex flex-wrap gap-4">
                  <Link
                    href={`/${lang}/demo`}
                    className="group inline-flex items-center px-8 py-4 rounded-xl bg-gradient-to-r from-brand-green to-brand-greenHover text-white font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all"
                  >
                    {isAr
                      ? "جرب مجاناً لمدة 14 يوم"
                      : "Start 14-Day Free Trial"}
                    <span className="ml-2 group-hover:translate-x-1 transition-transform">
                      →
                    </span>
                  </Link>
                  <Link
                    href="#demo-video"
                    className="inline-flex items-center px-6 py-4 rounded-xl border-2 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 font-semibold hover:border-brand-green hover:text-brand-green transition-colors"
                  >
                    <span className="mr-2">▶</span>
                    {isAr ? "شاهد العرض (دقيقتان)" : "Watch Demo (2 min)"}
                  </Link>
                </div>
              </div>

              {/* Hero Image/Stats */}
              <div className="relative">
                <div className="bg-gradient-to-br from-brand-green/20 to-emerald-500/20 dark:from-brand-green/30 dark:to-emerald-500/30 rounded-3xl p-8 backdrop-blur-sm">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 text-center shadow-lg">
                      <div className="text-4xl font-bold text-brand-green mb-2">
                        98%
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-300">
                        {isAr ? "رضا العملاء" : "Customer Satisfaction"}
                      </div>
                    </div>
                    <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 text-center shadow-lg">
                      <div className="text-4xl font-bold text-brand-green mb-2">
                        60%
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-300">
                        {isAr ? "تقليل عدم الحضور" : "No-Show Reduction"}
                      </div>
                    </div>
                    <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 text-center shadow-lg">
                      <div className="text-4xl font-bold text-brand-green mb-2">
                        24/7
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-300">
                        {isAr ? "متاح دائماً" : "Always Available"}
                      </div>
                    </div>
                    <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 text-center shadow-lg">
                      <div className="text-4xl font-bold text-brand-green mb-2">
                        10s
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-300">
                        {isAr ? "وقت الاستجابة" : "Response Time"}
                      </div>
                    </div>
                  </div>

                  {/* Floating Elements */}
                  <div className="absolute -top-4 -right-4 bg-white dark:bg-slate-800 rounded-full p-3 shadow-lg animate-bounce">
                    <span className="text-2xl">💬</span>
                  </div>
                  <div
                    className="absolute -bottom-4 -left-4 bg-white dark:bg-slate-800 rounded-full p-3 shadow-lg animate-bounce"
                    style={{ animationDelay: "0.5s" }}
                  >
                    <span className="text-2xl">✅</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Live Demo Section */}
        <section
          id="demo-video"
          className="py-20 bg-gradient-to-b from-white to-slate-50 dark:from-slate-900 dark:to-slate-800"
        >
          <div className="max-w-7xl mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-4xl md:text-5xl font-bold mb-4 text-center text-slate-900 dark:text-white">
                {isAr ? "شاهدها في العمل" : "See It In Action"}
              </h2>
              <p className="text-xl text-center text-slate-600 dark:text-slate-300">
                {isAr
                  ? "محادثات حقيقية مع عملاء حقيقيين، تحدث الآن"
                  : "Real conversations with real customers, happening right now"}
              </p>
            </div>

            <ConversationMockup lang={lang} />

            {/* Key Features Below Demo */}
            <div className="grid md:grid-cols-4 gap-6 mt-12">
              {[
                { icon: "⚡", text: isAr ? "رد فوري" : "Instant Response" },
                {
                  icon: "🌐",
                  text: isAr ? "عربي و إنجليزي" : "Arabic & English",
                },
                { icon: "💳", text: isAr ? "دفع آمن" : "Secure Payment" },
                { icon: "📊", text: isAr ? "تقارير مباشرة" : "Live Analytics" },
              ].map((item, i) => (
                <div
                  key={i}
                  className="flex items-center gap-3 bg-white dark:bg-slate-800 rounded-xl p-4 shadow-sm"
                >
                  <span className="text-2xl">{item.icon}</span>
                  <span className="font-medium text-slate-700 dark:text-slate-300">
                    {item.text}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* WhatsApp Template Section */}
        <section className="py-16 bg-white dark:bg-slate-900">
          <div className="max-w-6xl mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12 text-slate-900 dark:text-white">
              {isAr
                ? "قوالب واتساب بيزنس المعتمدة"
                : "Approved WhatsApp Business Templates"}
            </h2>
            <div className="grid md:grid-cols-3 gap-6">
              {[
                {
                  icon: "📋",
                  titleEn: "Appointment Booking",
                  titleAr: "حجز المواعيد",
                  descEn:
                    "Pre-approved templates for confirming appointments, collecting patient info, and service selection",
                  descAr:
                    "قوالب معتمدة مسبقاً لتأكيد المواعيد وجمع معلومات المرضى واختيار الخدمات",
                },
                {
                  icon: "🔔",
                  titleEn: "Smart Reminders",
                  titleAr: "التذكيرات الذكية",
                  descEn:
                    "24hr, 2hr, and 30min automated reminders with rescheduling options built-in",
                  descAr:
                    "تذكيرات آلية قبل 24 ساعة وساعتين و30 دقيقة مع خيارات إعادة الجدولة",
                },
                {
                  icon: "💳",
                  titleEn: "Payment Collection",
                  titleAr: "تحصيل المدفوعات",
                  descEn:
                    "Secure payment links with Mada, Apple Pay, and Sadad integration for deposits",
                  descAr: "روابط دفع آمنة مع تكامل مدى وآبل باي وسداد للعربون",
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm hover:shadow-lg transition-shadow"
                >
                  <div className="text-3xl mb-4">{item.icon}</div>
                  <h3 className="text-xl font-semibold mb-2 text-slate-900 dark:text-white">
                    {isAr ? item.titleAr : item.titleEn}
                  </h3>
                  <p className="text-slate-600 dark:text-slate-300">
                    {isAr ? item.descAr : item.descEn}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Detailed Booking Process */}
        <section id="process" className="py-16 bg-white dark:bg-slate-900">
          <div className="max-w-6xl mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-4 text-slate-900 dark:text-white">
              {isAr ? "عملية الحجز الكاملة" : "Complete Booking Process"}
            </h2>
            <p className="text-center text-lg text-slate-600 dark:text-slate-300 mb-12">
              {isAr
                ? "من الرسالة الأولى إلى التأكيد النهائي - كل شيء آلي"
                : "From first message to final confirmation - everything automated"}
            </p>

            <div className="space-y-8">
              {[
                {
                  stepEn: "Customer Initiates",
                  stepAr: "العميل يبدأ",
                  icon: "💬",
                  titleEn: "Message or Call",
                  titleAr: "رسالة أو مكالمة",
                  descEn:
                    "Customer sends WhatsApp message or calls. AI responds instantly in their preferred language.",
                  descAr:
                    "العميل يرسل رسالة واتساب أو يتصل. الذكاء الاصطناعي يرد فوراً بلغته المفضلة.",
                },
                {
                  stepEn: "AI Understanding",
                  stepAr: "فهم الذكاء الاصطناعي",
                  icon: "🤖",
                  titleEn: "Intent Recognition",
                  titleAr: "التعرف على النية",
                  descEn:
                    "AI understands booking intent - appointment, viewing, repair request - and collects required details.",
                  descAr:
                    "الذكاء الاصطناعي يفهم نية الحجز - موعد، معاينة، طلب إصلاح - ويجمع التفاصيل المطلوبة.",
                },
                {
                  stepEn: "Real-time Check",
                  stepAr: "فحص فوري",
                  icon: "📅",
                  titleEn: "Availability Verification",
                  titleAr: "التحقق من التوفر",
                  descEn:
                    "System checks calendar in real-time and offers 3-6 available slots matching customer preferences.",
                  descAr:
                    "النظام يفحص التقويم فورياً ويعرض 3-6 مواعيد متاحة تناسب تفضيلات العميل.",
                },
                {
                  stepEn: "Payment Processing",
                  stepAr: "معالجة الدفع",
                  icon: "💳",
                  titleEn: "Secure Deposit Collection",
                  titleAr: "تحصيل العربون الآمن",
                  descEn:
                    "If configured, sends secure payment link for deposit via Mada, Apple Pay, or Sadad.",
                  descAr:
                    "إذا كان مفعلاً، يرسل رابط دفع آمن للعربون عبر مدى، آبل باي، أو سداد.",
                },
                {
                  stepEn: "Confirmation",
                  stepAr: "التأكيد",
                  icon: "✅",
                  titleEn: "Instant Confirmation",
                  titleAr: "تأكيد فوري",
                  descEn:
                    "Sends confirmation to customer and business owner via email and WhatsApp with calendar invite.",
                  descAr:
                    "يرسل التأكيد للعميل وصاحب العمل عبر البريد الإلكتروني وواتساب مع دعوة التقويم.",
                },
                {
                  stepEn: "Dashboard Access",
                  stepAr: "لوحة التحكم",
                  icon: "📊",
                  titleEn: "Central Management",
                  titleAr: "الإدارة المركزية",
                  descEn:
                    "View all bookings, reschedule with reasons, track payments, and generate reports from one dashboard.",
                  descAr:
                    "عرض جميع الحجوزات، إعادة الجدولة مع الأسباب، تتبع المدفوعات، وإنشاء التقارير من لوحة واحدة.",
                },
              ].map((step, i) => (
                <div
                  key={i}
                  className="flex flex-col md:flex-row gap-6 items-start"
                >
                  <div className="flex-shrink-0">
                    <div className="w-16 h-16 rounded-full bg-brand-green/10 flex items-center justify-center">
                      <span className="text-2xl">{step.icon}</span>
                    </div>
                  </div>
                  <div className="flex-1">
                    <div className="text-sm font-semibold text-brand-green mb-1">
                      {isAr ? step.stepAr : step.stepEn}
                    </div>
                    <h3 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">
                      {isAr ? step.titleAr : step.titleEn}
                    </h3>
                    <p className="text-slate-600 dark:text-slate-300">
                      {isAr ? step.descAr : step.descEn}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Industry-Specific Use Cases */}
        <section className="py-16 bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-900">
          <div className="max-w-6xl mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12 text-slate-900 dark:text-white">
              {isAr ? "حلول مخصصة لكل صناعة" : "Industry-Specific Solutions"}
            </h2>

            <div className="grid md:grid-cols-2 gap-8">
              {/* Real Estate */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-8 shadow-lg">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-3xl">🏢</span>
                  <h3 className="text-2xl font-bold text-slate-900 dark:text-white">
                    {isAr ? "العقارات" : "Real Estate"}
                  </h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "حجز معاينات العقارات مع طلب المستندات المطلوبة"
                        : "Property viewing bookings with required document requests"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "روابط آمنة لرفع الهوية والمستندات المالية"
                        : "Secure links for ID and financial document uploads"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "حجز تلقائي بدون الحاجة للرد على المكالمات"
                        : "Automatic booking without answering calls or messages"}
                    </span>
                  </li>
                </ul>
              </div>

              {/* Maintenance */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-8 shadow-lg">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-3xl">🔧</span>
                  <h3 className="text-2xl font-bold text-slate-900 dark:text-white">
                    {isAr ? "الصيانة" : "Maintenance"}
                  </h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "تسجيل طلبات الإصلاح مع الصور والوصف"
                        : "Register repair requests with photos and descriptions"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "إرسال عروض الأسعار تلقائياً للموافقة"
                        : "Automatic quote generation and approval process"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "جدولة الزيارات بدون تدخل يدوي"
                        : "Schedule visits without manual intervention"}
                    </span>
                  </li>
                </ul>
              </div>

              {/* Medical/Beauty */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-8 shadow-lg">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-3xl">⚕️</span>
                  <h3 className="text-2xl font-bold text-slate-900 dark:text-white">
                    {isAr ? "الطبي والتجميل" : "Medical & Beauty"}
                  </h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "حجز المواعيد مع اختيار الطبيب والخدمة"
                        : "Appointment booking with doctor and service selection"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "تحصيل العربون للإجراءات التجميلية"
                        : "Deposit collection for aesthetic procedures"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "تذكيرات التحضير قبل الموعد"
                        : "Pre-appointment preparation reminders"}
                    </span>
                  </li>
                </ul>
              </div>

              {/* General Business */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-8 shadow-lg">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-3xl">💼</span>
                  <h3 className="text-2xl font-bold text-slate-900 dark:text-white">
                    {isAr ? "الأعمال العامة" : "General Business"}
                  </h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "جدولة الاجتماعات والاستشارات"
                        : "Meeting and consultation scheduling"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "إدارة المواعيد لفرق متعددة"
                        : "Multi-team appointment management"}
                    </span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-green mt-1">✓</span>
                    <span className="text-slate-600 dark:text-slate-300">
                      {isAr
                        ? "تكامل مع أنظمة CRM الحالية"
                        : "Integration with existing CRM systems"}
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className="py-20 bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-800 dark:via-slate-900 dark:to-slate-800">
          <div className="max-w-6xl mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-center text-slate-900 dark:text-white">
                {isAr ? "ماذا يقول عملاؤنا" : "What Our Clients Say"}
              </h2>
              <p className="text-lg text-center text-slate-600 dark:text-slate-300">
                {isAr
                  ? "انضم إلى مئات العيادات الناجحة في الخليج"
                  : "Join hundreds of successful clinics across the GCC"}
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {[
                {
                  nameEn: "Dr. Ahmed Al-Rashid",
                  nameAr: "د. أحمد الراشد",
                  roleEn: "Dental Clinic Owner, Riyadh",
                  roleAr: "صاحب عيادة أسنان، الرياض",
                  quoteEn:
                    "We reduced no-shows by 65% in just 2 months. The Arabic language support is perfect for our patients.",
                  quoteAr:
                    "قللنا عدم الحضور بنسبة 65% في شهرين فقط. دعم اللغة العربية مثالي لمرضانا.",
                  rating: 5,
                  avatar: "👨‍⚕️",
                },
                {
                  nameEn: "Sara Abdullah",
                  nameAr: "سارة عبدالله",
                  roleEn: "Beauty Center Manager, Jeddah",
                  roleAr: "مديرة مركز تجميل، جدة",
                  quoteEn:
                    "The deposit collection feature alone paid for the entire system. Our revenue increased by 40%.",
                  quoteAr:
                    "ميزة تحصيل العربون وحدها غطت تكلفة النظام بالكامل. زاد دخلنا بنسبة 40%.",
                  rating: 5,
                  avatar: "👩‍💼",
                },
                {
                  nameEn: "Mohammed Al-Suwaidi",
                  nameAr: "محمد السويدي",
                  roleEn: "Hospital Admin, Dubai",
                  roleAr: "إداري مستشفى، دبي",
                  quoteEn:
                    "24/7 availability means we never miss a booking. The bilingual support is seamless.",
                  quoteAr:
                    "التوفر 24/7 يعني أننا لا نفوت أي حجز. الدعم ثنائي اللغة سلس.",
                  rating: 5,
                  avatar: "👨‍💻",
                },
              ].map((testimonial, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow"
                >
                  <div className="flex items-center gap-4 mb-4">
                    <div className="text-4xl">{testimonial.avatar}</div>
                    <div>
                      <div className="font-semibold text-slate-900 dark:text-white">
                        {isAr ? testimonial.nameAr : testimonial.nameEn}
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-400">
                        {isAr ? testimonial.roleAr : testimonial.roleEn}
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-1 mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <span key={i} className="text-yellow-500">
                        ⭐
                      </span>
                    ))}
                  </div>
                  <p className="text-slate-600 dark:text-slate-300 italic">
                    &ldquo;{isAr ? testimonial.quoteAr : testimonial.quoteEn}
                    &rdquo;
                  </p>
                </div>
              ))}
            </div>

            {/* Success Metrics */}
            <div className="mt-16 bg-gradient-to-r from-brand-green to-emerald-600 rounded-3xl p-8 md:p-12 text-white">
              <h3 className="text-2xl md:text-3xl font-bold text-center mb-8">
                {isAr
                  ? "نتائج مثبتة من عملائنا"
                  : "Proven Results From Our Clients"}
              </h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
                {[
                  {
                    value: "500+",
                    label: isAr ? "عيادة نشطة" : "Active Clinics",
                  },
                  {
                    value: "2M+",
                    label: isAr ? "موعد محجوز" : "Bookings Made",
                  },
                  {
                    value: "98%",
                    label: isAr ? "رضا العملاء" : "Satisfaction Rate",
                  },
                  { value: "<10s", label: isAr ? "وقت الرد" : "Response Time" },
                ].map((stat, i) => (
                  <div key={i} className="text-center">
                    <div className="text-3xl md:text-4xl font-bold mb-2">
                      {stat.value}
                    </div>
                    <div className="text-white/80 text-sm md:text-base">
                      {stat.label}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Voice & Bilingual Features */}
        <section className="py-16 bg-white dark:bg-slate-900">
          <div className="max-w-6xl mx-auto px-4">
            <div className="bg-gradient-to-r from-brand-green to-brand-greenHover rounded-2xl p-8 md:p-12 text-white">
              <div className="max-w-3xl mx-auto text-center">
                <h2 className="text-3xl md:text-4xl font-bold mb-6 text-center">
                  {isAr
                    ? "وكلاء بشريون يتحدثون لغتك"
                    : "Human Agents Speaking Your Language"}
                </h2>
                <p className="text-xl mb-8 text-white/90">
                  {isAr
                    ? "فريقنا من الوكلاء المدربين يتحدثون العربية والإنجليزية بطلاقة، متاحون 24/7 للرد على المكالمات والرسائل"
                    : "Our trained agents speak fluent Arabic and English, available 24/7 to handle calls and messages"}
                </p>
                <div className="grid md:grid-cols-3 gap-6">
                  {[
                    {
                      icon: "🌍",
                      titleEn: "Native Speakers",
                      titleAr: "متحدثون أصليون",
                      descEn: "Gulf dialect Arabic & professional English",
                      descAr: "اللهجة الخليجية والإنجليزية المهنية",
                    },
                    {
                      icon: "📞",
                      titleEn: "Voice & Text",
                      titleAr: "صوت ونص",
                      descEn: "Handle phone calls and WhatsApp seamlessly",
                      descAr: "معالجة المكالمات وواتساب بسلاسة",
                    },
                    {
                      icon: "🎯",
                      titleEn: "Industry Trained",
                      titleAr: "مدربون مهنياً",
                      descEn: "Specialized in your business domain",
                      descAr: "متخصصون في مجال عملك",
                    },
                  ].map((item, i) => (
                    <div
                      key={i}
                      className="bg-white/10 backdrop-blur rounded-xl p-6"
                    >
                      <div className="text-3xl mb-3">{item.icon}</div>
                      <h3 className="text-lg font-semibold mb-2">
                        {isAr ? item.titleAr : item.titleEn}
                      </h3>
                      <p className="text-white/80 text-sm">
                        {isAr ? item.descAr : item.descEn}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Block 2: Local pain points */}
        <section className="bg-slate-50 dark:bg-slate-800/50">
          <div className="max-w-6xl mx-auto px-4 py-12 grid md:grid-cols-3 gap-6">
            {[
              isAr ? "ذروة الجمعة/السبت" : "Fri/Sat peak",
              isAr ? "ساعات رمضان" : "Ramadan hours",
              isAr ? "تعامل بالعربية + الإنجليزية" : "Arabic + English ops",
            ].map((t, i) => (
              <div
                key={t}
                className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6"
              >
                <div className="text-2xl">{["📈", "🌙", "🇶🇦"][i]}</div>
                <h3 className="font-semibold mt-2 text-slate-900 dark:text-white">
                  {t}
                </h3>
                <p className="text-slate-600 dark:text-slate-300">
                  {isAr
                    ? [
                        "إدارة الطلب العالي بدون تفويت رسائل.",
                        "تذكير قبل الإفطار؛ إيقاف أثناء الأذان.",
                        "صياغات مهذبة بلهجة خليجية.",
                      ][i]
                    : [
                        "Handle high demand; no missed DMs.",
                        "Pre-Iftar reminders; prayer-aware pauses.",
                        "Polite Gulf dialect phrasing.",
                      ][i]}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* Block 5: Stats (trust) */}
        <section className="bg-brand-green text-white">
          <div className="max-w-6xl mx-auto px-4 py-10 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            {[
              { v: "30–60%", l: isAr ? "انخفاض التخلف" : "No-show drop" },
              { v: ">40%", l: isAr ? "مدفوع مسبقاً" : "Prepaid bookings" },
              { v: "<10s", l: isAr ? "زمن الرد" : "Reply time" },
              { v: "24/7", l: isAr ? "تغطية" : "Coverage" },
            ].map((s) => (
              <div key={s.l}>
                <div className="text-4xl font-bold">{s.v}</div>
                <div>{s.l}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Block 6: FAQ */}
        <section className="max-w-6xl mx-auto px-4 py-12">
          <h2 className="text-2xl md:text-3xl font-bold text-center text-slate-900 dark:text-white">
            {isAr ? "أسئلة شائعة" : "FAQ"}
          </h2>
          <div className="mt-4 space-y-4">
            <details className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-white dark:bg-slate-800">
              <summary className="font-semibold cursor-pointer text-slate-900 dark:text-white">
                {isAr
                  ? "هل تحتاجون إلى بوابة دفع جديدة؟"
                  : "Do we need a new payment gateway?"}
              </summary>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {isAr
                  ? "نستخدم ما لديكم بالفعل (Tap/PayTabs/Checkout/HyperPay/Paymob)."
                  : "We use what you already have (Tap/PayTabs/Checkout/HyperPay/Paymob)."}
              </p>
            </details>
            <details className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-white dark:bg-slate-800">
              <summary className="font-semibold cursor-pointer text-slate-900 dark:text-white">
                {isAr ? "كيف تعمل العربية؟" : "How is Arabic handled?"}
              </summary>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {isAr
                  ? "افتراضي خليجي + إنجليزي؛ صياغات مهذبة وجندر عند الحاجة."
                  : "Gulf dialect default + English; polite/gender-aware phrasing."}
              </p>
            </details>
            <details className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-white dark:bg-slate-800">
              <summary className="font-semibold cursor-pointer text-slate-900 dark:text-white">
                {isAr
                  ? "ماذا عن التكامل مع الأنظمة الحالية؟"
                  : "What about integration with existing systems?"}
              </summary>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {isAr
                  ? "نتكامل مع أنظمة CRM وEMR الموجودة لديكم عبر واجهات API أو Webhooks."
                  : "We integrate with your existing CRM and EMR systems via APIs or Webhooks."}
              </p>
            </details>
            <details className="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-white dark:bg-slate-800">
              <summary className="font-semibold cursor-pointer text-slate-900 dark:text-white">
                {isAr
                  ? "كم يستغرق التشغيل؟"
                  : "How long does implementation take?"}
              </summary>
              <p className="text-slate-600 dark:text-slate-300 mt-2">
                {isAr
                  ? "عادة 24-48 ساعة للإعداد الأساسي، و3-5 أيام للتخصيص الكامل."
                  : "Usually 24-48 hours for basic setup, 3-5 days for full customization."}
              </p>
            </details>
          </div>
        </section>

        {/* Block 7: CTA */}
        <section className="bg-gradient-to-br from-slate-100 to-white dark:from-slate-800 dark:to-slate-900">
          <div className="max-w-6xl mx-auto px-4 py-16 text-center">
            <h2 className="text-3xl font-bold mb-4 text-center text-slate-900 dark:text-white">
              {isAr
                ? "جاهز لأتمتة حجوزاتك؟"
                : "Ready to Automate Your Bookings?"}
            </h2>
            <p className="text-lg mb-8 text-slate-600 dark:text-slate-300">
              {isAr
                ? "انضم إلى المئات من العيادات والأعمال التي توفر ساعات كل يوم"
                : "Join hundreds of clinics and businesses saving hours every day"}
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <a
                href={`/${lang}/contact`}
                className="inline-block px-8 py-4 rounded-lg bg-brand-green text-white font-semibold text-lg hover:bg-brand-greenHover transition-colors"
              >
                {isAr ? "ابدأ التجربة المجانية" : "Start Free Trial"}
              </a>
              <a
                href={`/${lang}/demo`}
                className="inline-block px-8 py-4 rounded-lg border-2 border-brand-green text-brand-green font-semibold text-lg hover:bg-brand-green hover:text-white transition-colors"
              >
                {isAr ? "احجز عرض توضيحي" : "Book a Demo"}
              </a>
            </div>
          </div>
        </section>
      </main>
    );
  }

  // Default template for other services
  return (
    <main>
      {/* Block 1: Localized Hero */}
      <section className="max-w-6xl mx-auto px-4 py-14">
        <h1 className="text-3xl md:text-4xl font-extrabold">
          {isAr
            ? `${svc.name.ar} في ${loc.name.ar}`
            : `${svc.name.en} in ${loc.name.en}`}
        </h1>
        <p className="text-neutral-600 mt-2">{svc.summary[lang]}</p>
      </section>

      {/* Block 2: Local pain points */}
      <section className="bg-slate-50">
        <div className="max-w-6xl mx-auto px-4 py-12 grid md:grid-cols-3 gap-6">
          {[
            isAr ? "ذروة الجمعة/السبت" : "Fri/Sat peak",
            isAr ? "ساعات رمضان" : "Ramadan hours",
            isAr ? "تعامل بالعربية + الإنجليزية" : "Arabic + English ops",
          ].map((t, i) => (
            <div key={t} className="border rounded-xl p-6">
              <div className="text-2xl">{["📈", "🌙", "🇶🇦"][i]}</div>
              <h3 className="font-semibold mt-2">{t}</h3>
              <p className="text-neutral-600">
                {isAr
                  ? [
                      "إدارة الطلب العالي بدون تفويت رسائل.",
                      "تذكير قبل الإفطار؛ إيقاف أثناء الأذان.",
                      "صياغات مهذبة بلهجة خليجية.",
                    ][i]
                  : [
                      "Handle high demand; no missed DMs.",
                      "Pre-Iftar reminders; prayer-aware pauses.",
                      "Polite Gulf dialect phrasing.",
                    ][i]}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Block 3: Feature grid */}
      <section className="max-w-6xl mx-auto px-4 py-12 grid md:grid-cols-3 gap-6">
        {[
          {
            i: "💬",
            t: isAr ? "رد فوري" : "Instant reply",
            d: isAr ? "<10 ثوانٍ" : "<10 seconds",
          },
          {
            i: "💳",
            t: isAr ? "عربون محلي" : "Local deposits",
            d: isAr ? "مدى/Apple Pay/سداد" : "Mada/Apple Pay/Sadad",
          },
          {
            i: "📅",
            t: isAr ? "خيارات فورية" : "Live options",
            d: isAr ? "3–6 مواعيد" : "3–6 slots",
          },
        ].map((f) => (
          <div key={f.t} className="border rounded-xl p-6">
            <div className="text-2xl">{f.i}</div>
            <h3 className="font-semibold mt-2">{f.t}</h3>
            <p className="text-neutral-600">{f.d}</p>
          </div>
        ))}
      </section>

      {/* Block 4: Process steps */}
      <section className="border-y">
        <div className="max-w-6xl mx-auto px-4 py-12 grid md:grid-cols-4 gap-6">
          {["Message", "Qualify", "Pay", "Confirm"].map((s, i) => (
            <div key={s}>
              <div className="text-2xl">{["💬", "🎯", "💳", "✅"][i]}</div>
              <h4 className="font-semibold mt-2">
                {isAr ? ["رسالة", "تأهيل", "دفع", "تأكيد"][i] : s}
              </h4>
              <p className="text-neutral-600">
                {isAr
                  ? [
                      "رد فوري.",
                      "الخدمة/الفرع/الوقت.",
                      "رابط آمن.",
                      ".ics + تذكيرات.",
                    ][i]
                  : [
                      "Instant reply.",
                      "Service/branch/time.",
                      "Secure link.",
                      ".ics + reminders.",
                    ][i]}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Block 5: Stats (trust) */}
      <section className="bg-brand-green text-white">
        <div className="max-w-6xl mx-auto px-4 py-10 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
          {[
            { v: "30–60%", l: isAr ? "انخفاض التخلف" : "No-show drop" },
            { v: ">40%", l: isAr ? "مدفوع مسبقاً" : "Prepaid bookings" },
            { v: "<10s", l: isAr ? "زمن الرد" : "Reply time" },
            { v: "24/7", l: isAr ? "تغطية" : "Coverage" },
          ].map((s) => (
            <div key={s.l}>
              <div className="text-4xl font-bold">{s.v}</div>
              <div>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Block 6: FAQ */}
      <section className="max-w-6xl mx-auto px-4 py-12">
        <h2 className="text-2xl md:text-3xl font-bold">
          {isAr ? "أسئلة شائعة" : "FAQ"}
        </h2>
        <div className="mt-4 space-y-4">
          <details className="border rounded p-4">
            <summary>
              {isAr
                ? "هل تحتاجون إلى بوابة دفع جديدة؟"
                : "Do we need a new payment gateway?"}
            </summary>
            <p className="text-neutral-600 mt-2">
              {isAr
                ? "نستخدم ما لديكم بالفعل (Tap/PayTabs/Checkout/HyperPay/Paymob)."
                : "We use what you already have (Tap/PayTabs/Checkout/HyperPay/Paymob)."}
            </p>
          </details>
          <details className="border rounded p-4">
            <summary>
              {isAr ? "كيف تعمل العربية؟" : "How is Arabic handled?"}
            </summary>
            <p className="text-neutral-600 mt-2">
              {isAr
                ? "افتراضي خليجي + إنجليزي؛ صياغات مهذبة وجندر عند الحاجة."
                : "Gulf dialect default + English; polite/gender-aware phrasing."}
            </p>
          </details>
        </div>
      </section>

      {/* Block 7: CTA */}
      <section className="bg-slate-100">
        <div className="max-w-6xl mx-auto px-4 py-12">
          <a
            href={`/${lang}/contact`}
            className="inline-block px-6 py-3 rounded bg-brand-green text-white"
          >
            {isAr ? "ابدأ التجربة الآن" : "Start your pilot"}
          </a>
        </div>
      </section>
    </main>
  );
}