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

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  return ["ar", "en"].flatMap((lang) =>
    SERVICE_KEYS.filter((key) => SERVICES[key].slug.en !== "deposits-payments") // Exclude deposits-payments as it has its own page
      .map((key) => ({ lang, service: SERVICES[key].slug[lang as Lang] })),
  );
}

function findServiceBySlug(lang: Lang, slug: string) {
  const entry = Object.values(SERVICES).find((s) => s.slug[lang] === slug);
  return entry ?? null;
}

export default function ServicePage({
  params,
}: {
  params: { lang: Lang; service: string };
}) {
  const svc = findServiceBySlug(params.lang, params.service);
  if (!svc) return notFound();
  const isAr = params.lang === "ar";

  // Check if this is the booking automation or deposits-payments service
  const serviceSlugEn = svc.slug.en as string;
  const serviceSlugAr = svc.slug.ar as string;
  const isBookingAutomation =
    serviceSlugEn === "booking-automation" ||
    serviceSlugAr === "booking-automation";
  const isRemindersReschedule =
    serviceSlugEn === "reminders-reschedule" ||
    serviceSlugAr === "reminders-reschedule";

  // If booking automation, show the editorial design
  if (isBookingAutomation) {
    return (
      <main className="bg-white dark:bg-slate-950">
        {/* Hero Section */}
        <section className="relative min-h-[90vh] flex items-center overflow-hidden">
          {/* Atmospheric Background */}
          <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950" />
          <div
            className="absolute inset-0 opacity-[0.03]"
            style={{
              backgroundImage:
                "linear-gradient(#0F9972 1px, transparent 1px), linear-gradient(90deg, #0F9972 1px, transparent 1px)",
              backgroundSize: "60px 60px",
            }}
          />

          <div className="relative z-10 max-w-7xl mx-auto px-6 py-24">
            <div className="grid lg:grid-cols-[1.3fr_1fr] gap-16 items-center">
              {/* Left Content */}
              <div className={isAr ? "text-right" : ""}>
                <div className="inline-flex items-center gap-3 mb-8">
                  <span className="text-brand-green font-mono text-sm tracking-wider">
                    01
                  </span>
                  <div className="w-12 h-px bg-brand-green" />
                  <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                    {isAr ? "أتمتة الحجوزات" : "Booking Automation"}
                  </span>
                </div>

                <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-[1.1] mb-8">
                  {isAr ? (
                    <>
                      كل محادثة
                      <br />
                      <span className="text-brand-green">حجز مؤكد</span>
                    </>
                  ) : (
                    <>
                      Every Chat
                      <br />
                      Becomes a<br />
                      <span className="text-brand-green">Booking</span>
                    </>
                  )}
                </h1>

                <p className="text-xl text-slate-600 dark:text-slate-400 leading-relaxed mb-10 max-w-xl">
                  {isAr
                    ? "حوّل محادثات واتساب إلى حجوزات مؤكدة ومدفوعة. نظام يعمل 24/7 لزيادة إيراداتك."
                    : "Transform WhatsApp conversations into confirmed, paid bookings. AI-powered system working around the clock."}
                </p>

                <div className="flex flex-wrap gap-4">
                  <Link
                    href={`/${params.lang}/demo`}
                    className="group relative px-8 py-4 bg-brand-green text-white font-semibold overflow-hidden"
                  >
                    <span className="relative z-10 flex items-center gap-2">
                      {isAr ? "احجز عرضاً تجريبياً" : "Book a Demo"}
                      <span className="transition-transform group-hover:translate-x-1">
                        {isAr ? "←" : "→"}
                      </span>
                    </span>
                    <div className="absolute inset-0 bg-[#0D8761] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                  </Link>
                  <a
                    href="#demo-video"
                    className="group px-8 py-4 border-2 border-slate-900 dark:border-white text-slate-900 dark:text-white font-semibold hover:bg-slate-900 hover:text-white dark:hover:bg-white dark:hover:text-slate-900 transition-colors"
                  >
                    {isAr ? "شاهد كيف يعمل" : "See It Work"}
                  </a>
                </div>
              </div>

              {/* Right Stats */}
              <div className="grid grid-cols-2 gap-6">
                {[
                  {
                    value: "500+",
                    label: isAr ? "شريك نشط" : "Active Partners",
                    sub: isAr ? "عبر الخليج" : "Across GCC",
                  },
                  {
                    value: "2M+",
                    label: isAr ? "حجز معالج" : "Bookings Handled",
                    sub: isAr ? "منذ 2023" : "Since 2023",
                  },
                  {
                    value: "85%",
                    label: isAr ? "أقل إلغاءات" : "Fewer Cancellations",
                    sub: isAr ? "مع العربون" : "With deposits",
                  },
                  {
                    value: "24/7",
                    label: isAr ? "متاح دائماً" : "Always On",
                    sub: isAr ? "بدون توقف" : "Never offline",
                  },
                ].map((stat, i) => (
                  <div
                    key={i}
                    className="group p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-brand-green transition-colors"
                  >
                    <div className="text-4xl md:text-5xl font-bold text-brand-green mb-2">
                      {stat.value}
                    </div>
                    <div className="text-slate-900 dark:text-white font-medium mb-1">
                      {stat.label}
                    </div>
                    <div className="text-sm text-slate-500 dark:text-slate-500">
                      {stat.sub}
                    </div>
                    <div className="w-0 group-hover:w-full h-0.5 bg-brand-green mt-4 transition-all duration-300" />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Live Demo Section */}
        <section
          className="py-24 px-6 bg-slate-50 dark:bg-slate-900"
          id="demo-video"
        >
          <div className="max-w-7xl mx-auto">
            <div className="flex items-center gap-4 mb-8">
              <span className="text-brand-green font-mono text-sm">02</span>
              <div className="w-8 h-px bg-brand-green" />
              <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                {isAr ? "تجربة حية" : "Live Demo"}
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-12">
              {isAr ? "شاهد النظام في العمل" : "See It In Action"}
            </h2>
            <ConversationMockup lang={params.lang} />
          </div>
        </section>

        {/* Features Grid */}
        <section className="py-24 px-6" id="features-overview">
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">03</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "المميزات" : "Features"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr
                  ? "كل ما تحتاجه لأتمتة الحجوزات"
                  : "Everything for Booking Automation"}
              </h2>
              <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl">
                {isAr
                  ? "نظام متكامل يغطي جميع مراحل رحلة الحجز"
                  : "Complete system covering every stage of the booking journey"}
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-px bg-slate-200 dark:bg-slate-800">
              {[
                {
                  num: "01",
                  title: isAr ? "ذكاء اصطناعي متقدم" : "Advanced AI",
                  desc: isAr
                    ? "يفهم اللهجات الخليجية والإنجليزية"
                    : "Understands Gulf dialects and English",
                  features: [
                    isAr
                      ? "رد تلقائي على الاستفسارات"
                      : "Auto-reply to inquiries",
                    isAr ? "فهم اللهجات المحلية" : "Understand local dialects",
                    isAr ? "تصعيد ذكي للحالات المعقدة" : "Smart escalation",
                  ],
                },
                {
                  num: "02",
                  title: isAr ? "مدفوعات آمنة" : "Secure Payments",
                  desc: isAr
                    ? "تحصيل عربون واسترداد تلقائي"
                    : "Deposit collection and auto-refunds",
                  features: [
                    isAr ? "مدى، فيزا، أبل باي" : "Mada, Visa, Apple Pay",
                    isAr ? "تشفير PCI-DSS" : "PCI-DSS encryption",
                    isAr ? "استرداد خلال 3-5 أيام" : "Refunds in 3-5 days",
                  ],
                },
                {
                  num: "03",
                  title: isAr ? "منع الحجز المزدوج" : "Zero Double-Booking",
                  desc: isAr
                    ? "مزامنة فورية عبر جميع القنوات"
                    : "Real-time sync across all channels",
                  features: [
                    isAr ? "قفل تلقائي للمواعيد" : "Auto-lock slots",
                    isAr ? "تكامل مع التقويم" : "Calendar integration",
                    isAr ? "إدارة متعدد الفروع" : "Multi-branch management",
                  ],
                },
                {
                  num: "04",
                  title: isAr ? "إعادة جدولة مرنة" : "Flexible Rescheduling",
                  desc: isAr
                    ? "تعديل أو إلغاء بسهولة"
                    : "Easy modifications or cancellations",
                  features: [
                    isAr ? "إعادة جدولة بنقرة واحدة" : "One-click rescheduling",
                    isAr ? "سياسات مخصصة" : "Custom policies",
                    isAr ? "قائمة انتظار ذكية" : "Smart waitlist",
                  ],
                },
                {
                  num: "05",
                  title: isAr ? "إدارة متقدمة" : "Advanced Management",
                  desc: isAr
                    ? "تحكم كامل في جميع الحجوزات"
                    : "Complete control over all bookings",
                  features: [
                    isAr ? "لوحة تحكم موحدة" : "Unified dashboard",
                    isAr ? "ملفات عملاء تلقائية" : "Auto customer profiles",
                    isAr ? "تصدير البيانات" : "Data export",
                  ],
                },
                {
                  num: "06",
                  title: isAr ? "تذكيرات ذكية" : "Smart Reminders",
                  desc: isAr
                    ? "تذكيرات متعددة المراحل"
                    : "Multi-stage reminder system",
                  features: [
                    isAr ? "تذكير T-48 ساعة" : "T-48h reminder",
                    isAr ? "تعليمات التحضير" : "Prep instructions",
                    isAr ? "متابعة بعد الزيارة" : "Post-visit follow-up",
                  ],
                },
                {
                  num: "07",
                  title: isAr ? "إجابة الاستفسارات" : "Query Handling",
                  desc: isAr
                    ? "نظام ذكي يجيب على الأسئلة"
                    : "AI answers customer questions",
                  features: [
                    isAr ? "قاعدة معرفية مخصصة" : "Custom knowledge base",
                    isAr ? "معلومات الأسعار" : "Pricing info",
                    isAr ? "تحويل للموظف" : "Staff transfer",
                  ],
                },
                {
                  num: "08",
                  title: isAr ? "تحليلات شاملة" : "Analytics",
                  desc: isAr
                    ? "تقارير تفصيلية للأداء"
                    : "Detailed performance reports",
                  features: [
                    isAr ? "معدلات التحويل" : "Conversion rates",
                    isAr ? "تحليل أوقات الذروة" : "Peak time analysis",
                    isAr ? "تقارير الإيرادات" : "Revenue reports",
                  ],
                },
                {
                  num: "09",
                  title: isAr ? "أمان عالي" : "Enterprise Security",
                  desc: isAr
                    ? "حماية كاملة للبيانات"
                    : "Complete data protection",
                  features: [
                    isAr ? "تشفير SSL/TLS" : "SSL/TLS encryption",
                    isAr ? "نسخ احتياطي تلقائي" : "Auto backup",
                    isAr ? "متوافق مع PDPL" : "PDPL compliant",
                  ],
                },
              ].map((feature, i) => (
                <div
                  key={i}
                  className="group bg-white dark:bg-slate-950 p-8 hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors"
                >
                  <span className="text-brand-green font-mono text-sm">
                    {feature.num}
                  </span>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white mt-4 mb-2 group-hover:text-brand-green transition-colors">
                    {feature.title}
                  </h3>
                  <p className="text-slate-600 dark:text-slate-400 mb-4 text-sm">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.features.map((item, j) => (
                      <li
                        key={j}
                        className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400"
                      >
                        <div className="w-1 h-1 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-brand-green mt-6 transition-all duration-300" />
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Process Flow */}
        <section
          className="py-24 px-6 bg-slate-900 dark:bg-slate-950 text-white"
          id="taking-bookings"
        >
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">04</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "كيف يعمل" : "Process"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold mb-4">
                {isAr ? "أربع خطوات للحجز" : "Four Steps to Booking"}
              </h2>
            </div>

            <div className="grid md:grid-cols-4 gap-8">
              {[
                {
                  num: "01",
                  title: isAr ? "استقبال الرسالة" : "Receive Message",
                  desc: isAr
                    ? "رد فوري خلال ثوانٍ على استفسارات الحجز"
                    : "Instant reply within seconds to booking inquiries",
                },
                {
                  num: "02",
                  title: isAr ? "تأهيل العميل" : "Qualify Customer",
                  desc: isAr
                    ? "فهم الاحتياجات وعرض الخيارات المتاحة"
                    : "Understand needs and show available options",
                },
                {
                  num: "03",
                  title: isAr ? "تحصيل العربون" : "Collect Deposit",
                  desc: isAr
                    ? "دفع آمن عبر مدى، فيزا، أو أبل باي"
                    : "Secure payment via Mada, Visa, or Apple Pay",
                },
                {
                  num: "04",
                  title: isAr ? "تأكيد الحجز" : "Confirm Booking",
                  desc: isAr
                    ? "تأكيد فوري مع رابط التقويم والتذكيرات"
                    : "Instant confirmation with calendar and reminders",
                },
              ].map((step, i) => (
                <div key={i} className="group relative">
                  <div className="text-6xl font-bold text-brand-green/20 mb-4">
                    {step.num}
                  </div>
                  <h3 className="text-xl font-bold mb-3 group-hover:text-brand-green transition-colors">
                    {step.title}
                  </h3>
                  <p className="text-slate-400 leading-relaxed">{step.desc}</p>
                  {i < 3 && (
                    <div
                      className={`hidden md:block absolute top-8 ${isAr ? "left-0 -translate-x-full" : "right-0 translate-x-full"} text-brand-green/30 text-4xl`}
                    >
                      {isAr ? "←" : "→"}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Testimonials */}
        <section className="py-24 px-6 bg-white dark:bg-slate-950">
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">05</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "قصص النجاح" : "Success Stories"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr ? "من مختلف القطاعات" : "Across Industries"}
              </h2>
            </div>

            <div className="grid md:grid-cols-4 gap-px bg-slate-200 dark:bg-slate-800">
              {[
                {
                  name: isAr ? "ريم العتيبي" : "Reem Al-Otaibi",
                  business: isAr
                    ? "صالون جلامور - الكويت"
                    : "Glamour Salon - Kuwait",
                  text: isAr
                    ? "قلل النظام إلغاءات اللحظة الأخيرة بنسبة 80%"
                    : "Reduced last-minute cancellations by 80%",
                },
                {
                  name: isAr ? "أحمد الدوسري" : "Ahmed Al-Dosari",
                  business: isAr
                    ? "جيم الأبطال - الدوحة"
                    : "Champions Gym - Doha",
                  text: isAr
                    ? "العربون ضاعف التزام العملاء"
                    : "Deposits doubled client commitment",
                },
                {
                  name: isAr ? "مريم الزعابي" : "Mariam Al-Zaabi",
                  business: isAr
                    ? "مركز ليتل جينيس - أبوظبي"
                    : "Little Genius - Abu Dhabi",
                  text: isAr
                    ? "أولياء الأمور سعداء بنظام الحجز السهل"
                    : "Parents love the easy booking system",
                },
                {
                  name: isAr ? "سعود الشمري" : "Saud Al-Shammari",
                  business: isAr
                    ? "مركز السيارات - الرياض"
                    : "Car Care - Riyadh",
                  text: isAr
                    ? "زادت كفاءة الورشة بنسبة 60%"
                    : "Workshop efficiency increased 60%",
                },
                {
                  name: isAr ? "هند الكندي" : "Hind Al-Kindi",
                  business: isAr
                    ? "استوديو اليوغا - مسقط"
                    : "Yoga Studio - Muscat",
                  text: isAr
                    ? "امتلأت الحصص بفضل قائمة الانتظار"
                    : "Classes filled thanks to waitlist",
                },
                {
                  name: isAr ? "عبدالله البحراني" : "Abdullah Al-Bahrani",
                  business: isAr
                    ? "مختبر الصحة - المنامة"
                    : "Health Lab - Manama",
                  text: isAr
                    ? "العربون قلل الحجوزات الوهمية بـ 90%"
                    : "Deposits reduced fake bookings by 90%",
                },
                {
                  name: isAr ? "نوف القاسمي" : "Nouf Al-Qassimi",
                  business: isAr
                    ? "مركز التجميل - الشارقة"
                    : "Beauty Center - Sharjah",
                  text: isAr
                    ? "العميلات يقدرن التذكيرات ثنائية اللغة"
                    : "Clients love bilingual reminders",
                },
                {
                  name: isAr ? "طارق المالكي" : "Tariq Al-Malki",
                  business: isAr ? "عيادة بيطرية - جدة" : "Pet Clinic - Jeddah",
                  text: isAr
                    ? "لا ينسون مواعيد التطعيمات أبداً"
                    : "Never miss vaccination appointments",
                },
              ].map((testimonial, i) => (
                <div
                  key={i}
                  className="group bg-white dark:bg-slate-950 p-6 hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors"
                >
                  <p className="text-slate-700 dark:text-slate-300 mb-6 leading-relaxed text-sm min-h-[60px]">
                    &ldquo;{testimonial.text}&rdquo;
                  </p>
                  <div className="pt-4 border-t border-slate-200 dark:border-slate-800">
                    <div className="font-semibold text-slate-900 dark:text-white text-sm">
                      {testimonial.name}
                    </div>
                    <div className="text-xs text-slate-500 dark:text-slate-500 mt-1">
                      {testimonial.business}
                    </div>
                  </div>
                  <div className="w-0 group-hover:w-8 h-0.5 bg-brand-green mt-4 transition-all duration-300" />
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Reminders & Rescheduling */}
        <section
          className="py-24 px-6 bg-slate-50 dark:bg-slate-900"
          id="reminders-reschedule"
        >
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">06</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "التذكيرات" : "Reminders"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr ? "التذكيرات وإعادة الجدولة" : "Reminders & Rescheduling"}
              </h2>
              <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl">
                {isAr
                  ? "نظام تذكيرات ذكي لتقليل عدم الحضور بنسبة 85%"
                  : "Smart reminder system to reduce no-shows by 85%"}
              </p>
            </div>

            <div className="grid lg:grid-cols-2 gap-8">
              {/* Reminder Timeline */}
              <div className="bg-white dark:bg-slate-950 p-8 border border-slate-200 dark:border-slate-800">
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
                  {isAr ? "جدول التذكيرات" : "Reminder Timeline"}
                </h3>
                <div className="space-y-4">
                  {[
                    {
                      time: "T-7",
                      label: isAr ? "أيام" : "days",
                      title: isAr ? "تأكيد الحجز" : "Booking Confirmation",
                    },
                    {
                      time: "T-48",
                      label: isAr ? "ساعة" : "hours",
                      title: isAr ? "تذكير مبكر" : "Early Reminder",
                    },
                    {
                      time: "T-24",
                      label: isAr ? "ساعة" : "hours",
                      title: isAr ? "تعليمات التحضير" : "Prep Instructions",
                    },
                    {
                      time: "T-6",
                      label: isAr ? "ساعات" : "hours",
                      title: isAr ? "تذكير نهائي" : "Final Reminder",
                    },
                    {
                      time: "T+1",
                      label: isAr ? "ساعة" : "hour",
                      title: isAr
                        ? "متابعة بعد الزيارة"
                        : "Post-Visit Follow-up",
                    },
                  ].map((reminder, i) => (
                    <div
                      key={i}
                      className="flex items-center gap-4 p-4 bg-slate-50 dark:bg-slate-900 border-l-2 border-brand-green"
                    >
                      <div className="flex-shrink-0 w-16">
                        <div className="text-lg font-bold text-brand-green">
                          {reminder.time}
                        </div>
                        <div className="text-xs text-slate-500">
                          {reminder.label}
                        </div>
                      </div>
                      <div className="font-medium text-slate-900 dark:text-white">
                        {reminder.title}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Rescheduling */}
              <div className="bg-white dark:bg-slate-950 p-8 border border-slate-200 dark:border-slate-800">
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
                  {isAr ? "إعادة جدولة سهلة" : "Easy Rescheduling"}
                </h3>
                <div className="space-y-8">
                  <div>
                    <h4 className="font-semibold text-slate-900 dark:text-white mb-3">
                      {isAr ? "للعملاء" : "For Customers"}
                    </h4>
                    <ul className="space-y-2">
                      {[
                        isAr
                          ? "إعادة جدولة بنقرة واحدة عبر واتساب"
                          : "One-click rescheduling via WhatsApp",
                        isAr
                          ? "عرض مواعيد بديلة فوراً"
                          : "Show alternatives instantly",
                        isAr
                          ? "تأكيد جديد تلقائي"
                          : "Automatic new confirmation",
                      ].map((item, i) => (
                        <li
                          key={i}
                          className="flex items-center gap-3 text-slate-600 dark:text-slate-400"
                        >
                          <div className="w-1.5 h-1.5 bg-brand-green" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold text-slate-900 dark:text-white mb-3">
                      {isAr ? "لك" : "For You"}
                    </h4>
                    <ul className="space-y-2">
                      {[
                        isAr
                          ? "إشعار فوري عند التعديل"
                          : "Instant notification on changes",
                        isAr
                          ? "تحديث تلقائي للتقويم"
                          : "Automatic calendar update",
                        isAr
                          ? "قائمة انتظار لملء الإلغاءات"
                          : "Waitlist to fill cancellations",
                      ].map((item, i) => (
                        <li
                          key={i}
                          className="flex items-center gap-3 text-slate-600 dark:text-slate-400"
                        >
                          <div className="w-1.5 h-1.5 bg-brand-green" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            {/* Stats Bar */}
            <div className="grid md:grid-cols-3 gap-px bg-slate-200 dark:bg-slate-800 mt-8">
              {[
                {
                  stat: "85%",
                  label: isAr ? "أقل عدم حضور" : "Fewer No-Shows",
                },
                {
                  stat: "<2min",
                  label: isAr ? "وقت إعادة الجدولة" : "Rescheduling Time",
                },
                {
                  stat: "98%",
                  label: isAr ? "رضا العملاء" : "Customer Satisfaction",
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-950 p-6 text-center"
                >
                  <div className="text-3xl font-bold text-brand-green mb-1">
                    {item.stat}
                  </div>
                  <div className="text-sm text-slate-600 dark:text-slate-400">
                    {item.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Payments Section */}
        <section
          className="py-24 px-6 bg-white dark:bg-slate-950"
          id="payments-deposits"
        >
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">07</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "المدفوعات" : "Payments"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr
                  ? "المدفوعات والعربون الآمنة"
                  : "Secure Payments & Deposits"}
              </h2>
            </div>

            <div className="grid lg:grid-cols-2 gap-8 mb-12">
              {/* Payment Methods */}
              <div className="bg-slate-50 dark:bg-slate-900 p-8 border border-slate-200 dark:border-slate-800">
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
                  {isAr ? "طرق الدفع المدعومة" : "Supported Payment Methods"}
                </h3>
                <div className="grid grid-cols-2 gap-4">
                  {[
                    { name: isAr ? "مدى" : "Mada" },
                    { name: isAr ? "فيزا" : "Visa" },
                    { name: isAr ? "ماستركارد" : "Mastercard" },
                    { name: isAr ? "أبل باي" : "Apple Pay" },
                    { name: isAr ? "سداد" : "Sadad" },
                    { name: isAr ? "تحويل بنكي" : "Bank Transfer" },
                  ].map((method, i) => (
                    <div
                      key={i}
                      className="p-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800"
                    >
                      <span className="font-medium text-slate-900 dark:text-white">
                        {method.name}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Refund Process */}
              <div className="bg-slate-50 dark:bg-slate-900 p-8 border border-slate-200 dark:border-slate-800">
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
                  {isAr
                    ? "عملية الاسترداد التلقائية"
                    : "Automated Refund Process"}
                </h3>
                <ol className="space-y-4">
                  {[
                    isAr
                      ? "العميل يطلب الإلغاء"
                      : "Customer requests cancellation",
                    isAr
                      ? "حساب المبلغ المستحق تلقائياً"
                      : "Auto-calculate refundable amount",
                    isAr
                      ? "إرسال طلب الاسترداد فوراً"
                      : "Send refund request instantly",
                    isAr
                      ? "معالجة خلال 3-5 أيام عمل"
                      : "Process within 3-5 business days",
                    isAr
                      ? "إشعار العميل بالاسترداد"
                      : "Notify customer of refund",
                  ].map((step, i) => (
                    <li key={i} className="flex items-start gap-4">
                      <span className="flex-shrink-0 w-8 h-8 bg-brand-green text-white flex items-center justify-center font-bold text-sm">
                        {i + 1}
                      </span>
                      <span className="text-slate-700 dark:text-slate-300 pt-1">
                        {step}
                      </span>
                    </li>
                  ))}
                </ol>
              </div>
            </div>

            {/* Cancellation Policy Table */}
            <div className="bg-slate-50 dark:bg-slate-900 p-8 border border-slate-200 dark:border-slate-800">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
                {isAr
                  ? "مثال على سياسة الإلغاء"
                  : "Example Cancellation Policy"}
              </h3>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b-2 border-brand-green">
                      <th
                        className={`p-4 text-slate-900 dark:text-white font-semibold ${isAr ? "text-right" : "text-left"}`}
                      >
                        {isAr ? "وقت الإلغاء" : "Cancellation Time"}
                      </th>
                      <th
                        className={`p-4 text-slate-900 dark:text-white font-semibold ${isAr ? "text-right" : "text-left"}`}
                      >
                        {isAr ? "نسبة الاسترداد" : "Refund %"}
                      </th>
                      <th
                        className={`p-4 text-slate-900 dark:text-white font-semibold ${isAr ? "text-right" : "text-left"}`}
                      >
                        {isAr ? "رسوم الإلغاء" : "Cancellation Fee"}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      {
                        time: isAr ? "7+ أيام قبل الموعد" : "7+ days before",
                        refund: "100%",
                        fee: isAr ? "0 ريال" : "0 SAR",
                      },
                      {
                        time: isAr
                          ? "48-72 ساعة قبل الموعد"
                          : "48-72 hours before",
                        refund: "75%",
                        fee: isAr ? "25% من العربون" : "25% of deposit",
                      },
                      {
                        time: isAr
                          ? "24-48 ساعة قبل الموعد"
                          : "24-48 hours before",
                        refund: "50%",
                        fee: isAr ? "50% من العربون" : "50% of deposit",
                      },
                      {
                        time: isAr ? "أقل من 24 ساعة" : "Less than 24 hours",
                        refund: "0%",
                        fee: isAr ? "100% من العربون" : "100% of deposit",
                      },
                    ].map((row, i) => (
                      <tr
                        key={i}
                        className="border-b border-slate-200 dark:border-slate-700"
                      >
                        <td className="p-4 text-slate-600 dark:text-slate-400">
                          {row.time}
                        </td>
                        <td className="p-4 font-semibold text-brand-green">
                          {row.refund}
                        </td>
                        <td className="p-4 text-slate-600 dark:text-slate-400">
                          {row.fee}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="text-sm text-slate-500 mt-4">
                {isAr
                  ? "* جميع السياسات قابلة للتخصيص حسب احتياجاتك"
                  : "* All policies are fully customizable"}
              </p>
            </div>
          </div>
        </section>

        {/* ROI Section */}
        <section className="py-24 px-6 bg-slate-50 dark:bg-slate-900">
          <div className="max-w-7xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">08</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "النتائج" : "Results"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr ? "لماذا تختار موعدي؟" : "Why Choose Mawidi?"}
              </h2>
              <p className="text-xl text-slate-600 dark:text-slate-400">
                {isAr
                  ? "النتائج خلال أول 30 يوماً"
                  : "Results within the first 30 days"}
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {[
                {
                  value: "+40%",
                  title: isAr ? "زيادة الإيرادات" : "Revenue Increase",
                  desc: isAr
                    ? "تحصيل العربون يضمن الحجوزات"
                    : "Deposit collection guarantees bookings",
                },
                {
                  value: "20h",
                  title: isAr ? "توفير أسبوعياً" : "Saved Weekly",
                  desc: isAr
                    ? "أتمتة كاملة للردود والحجوزات"
                    : "Complete automation of replies and bookings",
                },
                {
                  value: "95%",
                  title: isAr ? "رضا العملاء" : "Customer Satisfaction",
                  desc: isAr
                    ? "تجربة حجز سلسة وسريعة"
                    : "Smooth, fast booking experience",
                },
              ].map((benefit, i) => (
                <div
                  key={i}
                  className="group bg-white dark:bg-slate-950 p-8 border border-slate-200 dark:border-slate-800 hover:border-brand-green transition-colors"
                >
                  <div className="text-5xl font-bold text-brand-green mb-4">
                    {benefit.value}
                  </div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
                    {benefit.title}
                  </h3>
                  <p className="text-slate-600 dark:text-slate-400">
                    {benefit.desc}
                  </p>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-brand-green mt-6 transition-all duration-300" />
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section className="py-24 px-6 bg-white dark:bg-slate-950">
          <div className="max-w-4xl mx-auto">
            <div className={`mb-16 ${isAr ? "text-right" : ""}`}>
              <div className="flex items-center gap-4 mb-6">
                <span className="text-brand-green font-mono text-sm">09</span>
                <div className="w-8 h-px bg-brand-green" />
                <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                  {isAr ? "الأسئلة الشائعة" : "FAQ"}
                </span>
              </div>
              <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr ? "الأسئلة الشائعة" : "Frequently Asked Questions"}
              </h2>
            </div>

            <div className="space-y-4">
              {[
                {
                  question: isAr
                    ? "هل يمكن للعملاء إعادة جدولة مواعيدهم؟"
                    : "Can customers reschedule their appointments?",
                  answer: isAr
                    ? "نعم! يستطيع العملاء إعادة جدولة مواعيدهم بسهولة عبر واتساب. يعرض النظام المواعيد البديلة تلقائياً ويمكن للعميل اختيار موعد جديد بنقرة واحدة."
                    : "Yes! Customers can easily reschedule via WhatsApp. The system automatically shows alternatives and customers can select a new time with one click.",
                },
                {
                  question: isAr
                    ? "كيف يعمل نظام رسوم الإلغاء؟"
                    : "How does the cancellation fee system work?",
                  answer: isAr
                    ? "أنت تتحكم بالكامل في سياسة الإلغاء: تحديد الفترات الزمنية ونسب الرسوم لكل فترة. يتم توضيح السياسة للعميل قبل الدفع."
                    : "You have full control: set time windows and fee percentages per window. The policy is clearly communicated before payment.",
                },
                {
                  question: isAr
                    ? "كيف تتم عملية الاسترداد؟"
                    : "How does the refund process work?",
                  answer: isAr
                    ? "عملية الاسترداد آلية بالكامل: يحسب النظام المبلغ المستحق تلقائياً ويتم الاسترداد خلال 3-5 أيام عمل."
                    : "The refund process is fully automated: the system calculates the refundable amount and processes refunds within 3-5 business days.",
                },
                {
                  question: isAr
                    ? "كم يستغرق إعداد النظام؟"
                    : "How long does system setup take?",
                  answer: isAr
                    ? "الإعداد سريع: إنشاء الحساب وربط واتساب في 15 دقيقة، إعداد الخدمات في ساعة، والإطلاق الكامل خلال أسبوع."
                    : "Setup is quick: account creation and WhatsApp connection in 15 min, service configuration in 1 hour, full launch within a week.",
                },
              ].map((faq, i) => (
                <details
                  key={i}
                  className="group border border-slate-200 dark:border-slate-800"
                >
                  <summary className="flex items-center justify-between p-6 cursor-pointer list-none">
                    <h3 className="font-semibold text-slate-900 dark:text-white group-hover:text-brand-green transition-colors pr-4">
                      {faq.question}
                    </h3>
                    <span className="text-brand-green transform transition-transform group-open:rotate-45 flex-shrink-0 text-2xl">
                      +
                    </span>
                  </summary>
                  <div className="px-6 pb-6">
                    <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
                      {faq.answer}
                    </p>
                  </div>
                </details>
              ))}
            </div>

            {/* Contact */}
            <div className="mt-12 p-8 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
                {isAr ? "لديك سؤال آخر؟" : "Have Another Question?"}
              </h3>
              <p className="text-slate-600 dark:text-slate-400 mb-6">
                {isAr
                  ? "فريق الدعم متاح 24/7"
                  : "Our support team is available 24/7"}
              </p>
              <div className="flex flex-wrap gap-4">
                <a
                  href={`https://wa.me/${SITE.contact.whatsapp}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-6 py-3 bg-brand-green text-white font-semibold hover:bg-[#0D8761] transition-colors"
                >
                  {isAr ? "تواصل عبر واتساب" : "Chat on WhatsApp"}
                </a>
                <Link
                  href={`/${params.lang}/contact`}
                  className="px-6 py-3 border-2 border-slate-900 dark:border-white text-slate-900 dark:text-white font-semibold hover:bg-slate-900 hover:text-white dark:hover:bg-white dark:hover:text-slate-900 transition-colors"
                >
                  {isAr ? "أرسل رسالة" : "Send a Message"}
                </Link>
              </div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="relative py-32 px-6 bg-slate-900 text-white overflow-hidden">
          {/* Grid Background */}
          <div
            className="absolute inset-0 opacity-[0.03]"
            style={{
              backgroundImage:
                "linear-gradient(#0F9972 1px, transparent 1px), linear-gradient(90deg, #0F9972 1px, transparent 1px)",
              backgroundSize: "40px 40px",
            }}
          />

          <div className="max-w-4xl mx-auto text-center relative z-10">
            <div className="inline-flex items-center gap-3 mb-8">
              <span className="text-brand-green font-mono text-sm">10</span>
              <div className="w-8 h-px bg-brand-green" />
              <span className="text-slate-400 text-sm uppercase tracking-widest">
                {isAr ? "ابدأ الآن" : "Get Started"}
              </span>
            </div>

            <h2 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
              {isAr
                ? "ابدأ رحلة التحول الرقمي"
                : "Start Your Digital Transformation"}
            </h2>

            <p className="text-xl text-slate-400 mb-4">
              {isAr
                ? "انضم إلى 500+ شريك في الخليج"
                : "Join 500+ partners across GCC"}
            </p>

            <div className="inline-block px-6 py-3 bg-brand-green text-white font-semibold mb-10">
              {isAr
                ? "تجربة مجانية 7 أيام + إعداد مجاني"
                : "7-Day Free Trial + Free Setup"}
            </div>

            <div className="flex flex-wrap gap-4 justify-center mb-12">
              <Link
                href={`/${params.lang}/demo`}
                className="group relative px-10 py-5 bg-white text-slate-900 font-bold overflow-hidden"
              >
                <span className="relative z-10 flex items-center gap-2">
                  {isAr ? "احجز عرضاً تجريبياً" : "Book a Free Demo"}
                  <span className="transition-transform group-hover:translate-x-1">
                    {isAr ? "←" : "→"}
                  </span>
                </span>
                <div className="absolute inset-0 bg-brand-green translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/contact`}
                className="px-10 py-5 border-2 border-white text-white font-bold hover:bg-white hover:text-slate-900 transition-colors"
              >
                {isAr ? "تحدث مع خبير" : "Talk to an Expert"}
              </Link>
            </div>

            <div className="flex flex-wrap gap-8 justify-center text-sm text-slate-400">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-brand-green" />
                <span>
                  {isAr ? "بدون بطاقة ائتمان" : "No credit card required"}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-brand-green" />
                <span>{isAr ? "إعداد في 48 ساعة" : "Setup in 48 hours"}</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-brand-green" />
                <span>{isAr ? "دعم فني 24/7" : "24/7 technical support"}</span>
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }

  // If reminders-reschedule service, show the reservation/appointment management design
  if (isRemindersReschedule) {
    return (
      <main className="bg-white dark:bg-slate-900">
        {/* Hero Section with Reservation Focus */}
        <section className="py-16 px-6 bg-gradient-to-br from-blue-500/10 to-brand-green/20 dark:from-blue-600/20 dark:to-brand-green/10">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h1 className="text-4xl md:text-6xl font-bold text-brand-ink mb-6 dark:text-white">
                {isAr
                  ? "نظام إدارة المواعيد الذكي"
                  : "Smart Appointment Management System"}
              </h1>
              <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-8">
                {isAr
                  ? "قلل نسبة عدم الحضور بـ 85% مع تذكيرات ذكية وإعادة جدولة سلسة عبر واتساب"
                  : "Reduce no-shows by 85% with smart reminders and seamless rescheduling via WhatsApp"}
              </p>
              <div className="flex flex-wrap gap-4 justify-center">
                <Link
                  href={`/${params.lang}/demo`}
                  className="px-8 py-4 bg-brand-green text-white rounded-lg font-bold hover:bg-brand-green/90 transition-colors shadow-lg"
                >
                  {isAr ? "🗓️ احجز موعدك الآن" : "🗓️ Book Your Appointment"}
                </Link>
                <a
                  href="#how-it-works"
                  className="px-8 py-4 bg-white text-brand-green border-2 border-brand-green rounded-lg font-bold hover:bg-brand-green hover:text-white transition-colors"
                >
                  {isAr ? "كيف يعمل النظام" : "How It Works"}
                </a>
              </div>
            </div>

            {/* Key Metrics */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
              <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                <div className="text-4xl font-bold text-blue-500 mb-2">85%</div>
                <div className="text-slate-600 dark:text-slate-300">
                  {isAr ? "انخفاض عدم الحضور" : "Fewer No-Shows"}
                </div>
              </div>
              <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                <div className="text-4xl font-bold text-green-500 mb-2">
                  98%
                </div>
                <div className="text-slate-600 dark:text-slate-300">
                  {isAr ? "معدل التأكيد" : "Confirmation Rate"}
                </div>
              </div>
              <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                <div className="text-4xl font-bold text-purple-500 mb-2">
                  T-48h
                </div>
                <div className="text-slate-600 dark:text-slate-300">
                  {isAr ? "تذكير مبكر" : "Early Reminder"}
                </div>
              </div>
              <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg transform hover:scale-105 transition-transform">
                <div className="text-4xl font-bold text-orange-500 mb-2">
                  T-6h
                </div>
                <div className="text-slate-600 dark:text-slate-300">
                  {isAr ? "تذكير نهائي" : "Final Reminder"}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Reminder Timeline Section */}
        <section className="py-16 px-6" id="how-it-works">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold text-center mb-4 dark:text-white">
              {isAr ? "جدول التذكيرات الذكية" : "Smart Reminder Timeline"}
            </h2>
            <p className="text-center text-slate-600 dark:text-slate-300 mb-12 max-w-2xl mx-auto">
              {isAr
                ? "نظام تذكير متعدد المراحل يضمن حضور المرضى في مواعيدهم"
                : "Multi-stage reminder system ensures patients attend their appointments"}
            </p>

            <div className="relative">
              {/* Timeline Line */}
              <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-blue-500 to-green-500 hidden md:block"></div>

              {/* Timeline Items */}
              <div className="space-y-12">
                {(() => {
                  // Static color variants mapping for Tailwind JIT compiler
                  const colorVariants: Record<string, string> = {
                    blue: "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400",
                    purple:
                      "bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400",
                    green:
                      "bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400",
                    orange:
                      "bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400",
                    yellow:
                      "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400",
                    red: "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400",
                    pink: "bg-pink-100 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400",
                    teal: "bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400",
                    emerald:
                      "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400",
                  };

                  return [
                    {
                      time: "T-7 Days",
                      title: isAr
                        ? "تأكيد الحجز الأولي"
                        : "Initial Booking Confirmation",
                      desc: isAr
                        ? "رسالة تأكيد فورية مع تفاصيل الموعد وإرشادات الحضور"
                        : "Instant confirmation with appointment details and attendance instructions",
                      icon: "📅",
                      color: "blue",
                    },
                    {
                      time: "T-48 Hours",
                      title: isAr ? "التذكير المبكر" : "Early Reminder",
                      desc: isAr
                        ? "تذكير مع خيارات: ✅ تأكيد الحضور أو 🔄 إعادة الجدولة"
                        : "Reminder with options: ✅ Confirm attendance or 🔄 Reschedule",
                      icon: "⏰",
                      color: "purple",
                    },
                    {
                      time: "T-24 Hours",
                      title: isAr
                        ? "تعليمات التحضير"
                        : "Preparation Instructions",
                      desc: isAr
                        ? "إرشادات خاصة بالموعد مثل الصيام أو إحضار مستندات"
                        : "Appointment-specific instructions like fasting or documents needed",
                      icon: "📋",
                      color: "green",
                    },
                    {
                      time: "T-6 Hours",
                      title: isAr ? "التذكير النهائي" : "Final Reminder",
                      desc: isAr
                        ? "تذكير أخير مع خريطة الموقع ومعلومات الوصول"
                        : "Final reminder with location map and arrival information",
                      icon: "📍",
                      color: "orange",
                    },
                    {
                      time: "T+1 Hour",
                      title: isAr
                        ? "متابعة بعد الزيارة"
                        : "Post-Visit Follow-up",
                      desc: isAr
                        ? "طلب تقييم الخدمة وجدولة الموعد التالي"
                        : "Request service feedback and schedule next appointment",
                      icon: "⭐",
                      color: "yellow",
                    },
                  ].map((item, index) => (
                    <div
                      key={index}
                      className={`flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"} flex-col gap-8`}
                    >
                      <div
                        className={`flex-1 ${index % 2 === 0 ? "md:text-right" : "md:text-left"} text-center`}
                      >
                        <div
                          className={`inline-block px-4 py-2 ${colorVariants[item.color] || colorVariants.blue} rounded-lg font-bold mb-2`}
                        >
                          {item.time}
                        </div>
                        <h3 className="text-xl font-bold dark:text-white mb-2">
                          {item.title}
                        </h3>
                        <p className="text-slate-600 dark:text-slate-300">
                          {item.desc}
                        </p>
                      </div>
                      <div className="relative z-10 w-16 h-16 bg-white dark:bg-slate-800 rounded-full shadow-lg flex items-center justify-center text-3xl border-4 border-brand-green">
                        {item.icon}
                      </div>
                      <div className="flex-1 hidden md:block"></div>
                    </div>
                  ));
                })()}
              </div>
            </div>
          </div>
        </section>

        {/* Rescheduling Features */}
        <section className="py-16 px-6 bg-slate-50 dark:bg-slate-800">
          <div className="max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">
              {isAr ? "إعادة الجدولة السلسة" : "Seamless Rescheduling"}
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              {[
                {
                  icon: "📱",
                  title: isAr ? "عبر واتساب مباشرة" : "Direct WhatsApp",
                  desc: isAr
                    ? "يستطيع المريض إعادة الجدولة بنقرة واحدة دون الاتصال بالعيادة"
                    : "Patients can reschedule with one click without calling the clinic",
                },
                {
                  icon: "🔄",
                  title: isAr ? "مواعيد بديلة فورية" : "Instant Alternatives",
                  desc: isAr
                    ? "يعرض النظام تلقائياً 3-5 مواعيد بديلة متاحة للاختيار"
                    : "System automatically shows 3-5 available alternative slots",
                },
                {
                  icon: "✅",
                  title: isAr ? "تأكيد تلقائي" : "Auto-Confirmation",
                  desc: isAr
                    ? "يتم تأكيد الموعد الجديد فوراً مع تحديث التقويم"
                    : "New appointment confirmed instantly with calendar update",
                },
              ].map((feature, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-700 p-8 rounded-xl shadow-lg text-center hover:shadow-xl transition-shadow"
                >
                  <div className="text-5xl mb-4">{feature.icon}</div>
                  <h3 className="text-xl font-bold mb-3 dark:text-white">
                    {feature.title}
                  </h3>
                  <p className="text-slate-600 dark:text-slate-300">
                    {feature.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 px-6 bg-brand-green text-white">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              {isAr ? "قلل عدم الحضور بنسبة 85%" : "Reduce No-Shows by 85%"}
            </h2>
            <p className="text-xl mb-8 opacity-90">
              {isAr
                ? "ابدأ اليوم واحصل على نظام تذكيرات ذكي يعمل تلقائياً"
                : "Start today and get a smart reminder system that works automatically"}
            </p>
            <div className="flex flex-wrap gap-4 justify-center">
              <Link
                href={`/${params.lang}/demo`}
                className="px-8 py-4 bg-white text-brand-green rounded-lg font-bold hover:bg-slate-100 transition-colors shadow-lg"
              >
                {isAr ? "📅 احجز عرضاً تجريبياً" : "📅 Book a Demo"}
              </Link>
              <Link
                href={`/${params.lang}/pricing`}
                className="px-8 py-4 bg-transparent text-white border-2 border-white rounded-lg font-bold hover:bg-white hover:text-brand-green transition-colors"
              >
                {isAr ? "💰 شاهد الأسعار" : "💰 View Pricing"}
              </Link>
            </div>
          </div>
        </section>
      </main>
    );
  }

  // Default service page for other services
  return (
    <main className="bg-white dark:bg-slate-900 py-16 px-6">
      <div className="max-w-5xl mx-auto">
        {/* Hero */}
        <section className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-brand-ink mb-4 dark:text-white">
            {svc.title[params.lang]}
          </h1>
          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {svc.description[params.lang]}
          </p>
          <div className="flex gap-4 justify-center mt-8">
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-brand-green text-white rounded-lg font-bold hover:bg-brand-green/90 transition-colors shadow-lg"
            >
              {isAr ? "احجز عرضاً تجريبياً" : "Book a Demo"}
            </Link>
            <Link
              href={`/${params.lang}/pricing`}
              className="px-8 py-4 bg-white text-brand-green border-2 border-brand-green rounded-lg font-bold hover:bg-brand-green hover:text-white transition-colors"
            >
              {isAr ? "عرض الأسعار" : "View Pricing"}
            </Link>
          </div>
        </section>

        {/* Features */}
        {svc.features && (
          <section className="mb-16">
            <h2 className="text-2xl font-bold mb-8 text-center dark:text-white">
              {isAr ? "المميزات الرئيسية" : "Key Features"}
            </h2>
            <div className="grid md:grid-cols-2 gap-6">
              {svc.features.map((f, i) => (
                <div
                  key={i}
                  className="flex gap-4 p-6 bg-slate-50 dark:bg-slate-800 rounded-xl"
                >
                  <span className="text-3xl">{f.icon}</span>
                  <div>
                    <h3 className="font-bold dark:text-white">
                      {f.title[params.lang]}
                    </h3>
                    <p className="text-slate-600 dark:text-slate-300 mt-1">
                      {f.description[params.lang]}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* CTA */}
        <section className="text-center py-12 bg-brand-green/10 dark:bg-brand-green/20 rounded-2xl">
          <h2 className="text-2xl font-bold mb-4 dark:text-white">
            {isAr ? "مستعد للبدء؟" : "Ready to Get Started?"}
          </h2>
          <p className="text-slate-600 dark:text-slate-300 mb-6">
            {isAr
              ? "تواصل معنا اليوم لمعرفة كيف يمكننا مساعدتك"
              : "Contact us today to learn how we can help"}
          </p>
          <Link
            href={`/${params.lang}/contact`}
            className="inline-block px-8 py-4 bg-brand-green text-white rounded-lg font-bold hover:bg-brand-green/90 transition-colors shadow-lg"
          >
            {isAr ? "تواصل معنا" : "Contact Us"}
          </Link>
        </section>
      </div>
    </main>
  );
}