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

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  return ["ar", "en"].map((lang) => ({
    lang,
    service: "waitlist-broadcast",
  }));
}

export default function WaitlistBroadcastPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const isAr = params.lang === "ar";
  const svc = SERVICES["waitlist-broadcast"];

  if (!svc) return notFound();

  return (
    <main className="bg-white dark:bg-slate-900">
      {/* Hero Section */}
      <section className="py-16 px-6 bg-gradient-to-br from-purple-500/10 to-brand-green/20 dark:from-purple-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 Waitlist & Broadcast System"}
            </h1>
            <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-8">
              {isAr
                ? "حوّل قوائم الانتظار إلى مبيعات مؤكدة وأخطر العملاء فور توفر المنتج أو الخدمة"
                : "Transform waitlists into confirmed sales and notify customers instantly when products or services become available"}
            </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 ? "🚀 جرب النظام الآن" : "🚀 Try It Now"}
              </Link>
              <a
                href="#use-cases"
                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 ? "شاهد حالات الاستخدام" : "See Use Cases"}
              </a>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
            <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg">
              <div className="text-3xl font-bold text-purple-500 mb-2">
                5000+
              </div>
              <div className="text-slate-600 dark:text-slate-300">
                {isAr ? "عميل في القائمة" : "Waitlisted Customers"}
              </div>
            </div>
            <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg">
              <div className="text-3xl font-bold text-purple-500 mb-2">89%</div>
              <div className="text-slate-600 dark:text-slate-300">
                {isAr ? "معدل التحويل" : "Conversion Rate"}
              </div>
            </div>
            <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg">
              <div className="text-3xl font-bold text-purple-500 mb-2">
                &lt;30s
              </div>
              <div className="text-slate-600 dark:text-slate-300">
                {isAr ? "وقت الإشعار" : "Notification Time"}
              </div>
            </div>
            <div className="text-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-lg">
              <div className="text-3xl font-bold text-purple-500 mb-2">
                24/7
              </div>
              <div className="text-slate-600 dark:text-slate-300">
                {isAr ? "متاح دائماً" : "Always Active"}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases Section */}
      <section className="py-16 px-6" id="use-cases">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">
            {isAr ? "حالات استخدام متنوعة" : "Diverse Use Cases"}
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: "🍽️",
                title: isAr ? "المطاعم والكافيهات" : "Restaurants & Cafes",
                desc: isAr
                  ? "إدارة قوائم انتظار الطاولات وإشعار العملاء عند توفر مكان"
                  : "Manage table waitlists and notify customers when seats become available",
                examples: isAr
                  ? ["حجوزات العشاء", "طاولات VIP", "قوائم الإفطار"]
                  : ["Dinner reservations", "VIP tables", "Brunch waitlists"],
              },
              {
                icon: "🏪",
                title: isAr ? "متاجر التجزئة" : "Retail Stores",
                desc: isAr
                  ? "قوائم انتظار للمنتجات المحدودة والإصدارات الجديدة"
                  : "Waitlists for limited products and new releases",
                examples: isAr
                  ? ["إطلاق منتجات", "عروض حصرية", "مخزون محدود"]
                  : ["Product launches", "Exclusive drops", "Limited stock"],
              },
              {
                icon: "🎮",
                title: isAr ? "الترفيه والألعاب" : "Entertainment & Gaming",
                desc: isAr
                  ? "إدارة قوائم انتظار الألعاب والفعاليات والعروض"
                  : "Manage waitlists for games, events, and shows",
                examples: isAr
                  ? ["حجز الملاعب", "تذاكر العروض", "البطولات"]
                  : ["Court bookings", "Show tickets", "Tournaments"],
              },
              {
                icon: "💼",
                title: isAr ? "الخدمات المهنية" : "Professional Services",
                desc: isAr
                  ? "قوائم انتظار للاستشارات والخدمات المتخصصة"
                  : "Waitlists for consultations and specialized services",
                examples: isAr
                  ? ["استشارات قانونية", "جلسات تدريب", "ورش عمل"]
                  : ["Legal consultations", "Coaching sessions", "Workshops"],
              },
              {
                icon: "🚗",
                title: isAr ? "وكالات السيارات" : "Car Dealerships",
                desc: isAr
                  ? "إشعار العملاء عند وصول موديلات جديدة أو توفر قطع غيار"
                  : "Notify customers when new models arrive or parts become available",
                examples: isAr
                  ? ["سيارات جديدة", "قطع غيار", "تجارب القيادة"]
                  : ["New arrivals", "Spare parts", "Test drives"],
              },
              {
                icon: "🏋️",
                title: isAr ? "النوادي الرياضية" : "Fitness Clubs",
                desc: isAr
                  ? "قوائم انتظار للصفوف الشائعة والمدربين المطلوبين"
                  : "Waitlists for popular classes and sought-after trainers",
                examples: isAr
                  ? ["صفوف اليوغا", "تدريب شخصي", "برامج خاصة"]
                  : ["Yoga classes", "Personal training", "Special programs"],
              },
            ].map((useCase, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
              >
                <div className="text-4xl mb-4">{useCase.icon}</div>
                <h3 className="text-xl font-bold mb-2 dark:text-white">
                  {useCase.title}
                </h3>
                <p className="text-slate-600 dark:text-slate-300 mb-4">
                  {useCase.desc}
                </p>
                <div className="space-y-2">
                  {useCase.examples.map((example, j) => (
                    <div key={j} className="flex items-center gap-2">
                      <span className="text-green-500">✓</span>
                      <span className="text-sm text-slate-600 dark:text-slate-400">
                        {example}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <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 ? "كيف يعمل النظام" : "How The System Works"}
          </h2>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              {
                step: "1",
                icon: "📝",
                title: isAr ? "التسجيل في القائمة" : "Join Waitlist",
                desc: isAr
                  ? "العملاء يسجلون عبر واتساب بكل سهولة"
                  : "Customers register via WhatsApp easily",
              },
              {
                step: "2",
                icon: "⏳",
                title: isAr ? "الانتظار الذكي" : "Smart Waiting",
                desc: isAr
                  ? "النظام يتتبع الأولوية والتفضيلات"
                  : "System tracks priority and preferences",
              },
              {
                step: "3",
                icon: "🎯",
                title: isAr ? "البث المستهدف" : "Targeted Broadcast",
                desc: isAr
                  ? "إشعار فوري عند التوفر حسب المعايير"
                  : "Instant notification when available by criteria",
              },
              {
                step: "4",
                icon: "✅",
                title: isAr ? "التأكيد والحجز" : "Confirm & Book",
                desc: isAr
                  ? "حجز سريع مع دفع العربون إن لزم"
                  : "Quick booking with deposit if needed",
              },
            ].map((item, i) => (
              <div key={i} className="relative">
                <div className="text-center">
                  <div className="w-12 h-12 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold mx-auto mb-4">
                    {item.step}
                  </div>
                  <div className="text-4xl mb-4">{item.icon}</div>
                  <h3 className="font-bold mb-2 dark:text-white">
                    {item.title}
                  </h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300">
                    {item.desc}
                  </p>
                </div>
                {i < 3 && (
                  <div
                    className={`hidden md:block absolute top-6 ${isAr ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"} text-3xl text-purple-500`}
                  >
                    →
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Smart Features */}
      <section className="py-16 px-6">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">
            {isAr
              ? "ميزات ذكية للبث الفعّال"
              : "Smart Features for Effective Broadcasting"}
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: "🎯",
                title: isAr ? "استهداف دقيق" : "Precise Targeting",
                features: isAr
                  ? [
                      "حسب الموقع الجغرافي",
                      "حسب التفضيلات",
                      "حسب تاريخ الشراء",
                      "حسب الأولوية",
                    ]
                  : [
                      "By location",
                      "By preferences",
                      "By purchase history",
                      "By priority",
                    ],
              },
              {
                icon: "⚡",
                title: isAr ? "بث لحظي" : "Instant Broadcasting",
                features: isAr
                  ? [
                      "رسائل فورية",
                      "قوالب جاهزة",
                      "إشعارات متعددة",
                      "تأكيد تلقائي",
                    ]
                  : [
                      "Immediate messages",
                      "Ready templates",
                      "Multiple notifications",
                      "Auto confirmation",
                    ],
              },
              {
                icon: "📊",
                title: isAr ? "تحليلات متقدمة" : "Advanced Analytics",
                features: isAr
                  ? [
                      "معدل الاستجابة",
                      "وقت التحويل",
                      "نسبة الإكمال",
                      "تقارير مفصلة",
                    ]
                  : [
                      "Response rate",
                      "Conversion time",
                      "Completion rate",
                      "Detailed reports",
                    ],
              },
              {
                icon: "🔄",
                title: isAr ? "إدارة تلقائية" : "Automated Management",
                features: isAr
                  ? [
                      "تحديث القوائم",
                      "إزالة المنتهية",
                      "إعادة الترتيب",
                      "الأرشفة الذكية",
                    ]
                  : [
                      "List updates",
                      "Remove expired",
                      "Reordering",
                      "Smart archiving",
                    ],
              },
              {
                icon: "💳",
                title: isAr ? "دفع متكامل" : "Integrated Payment",
                features: isAr
                  ? ["عربون مسبق", "دفع كامل", "طرق متعددة", "فواتير فورية"]
                  : [
                      "Advance deposit",
                      "Full payment",
                      "Multiple methods",
                      "Instant invoices",
                    ],
              },
              {
                icon: "🌐",
                title: isAr ? "دعم متعدد اللغات" : "Multi-language Support",
                features: isAr
                  ? [
                      "عربي وإنجليزي",
                      "ترجمة تلقائية",
                      "قوالب مخصصة",
                      "تواصل طبيعي",
                    ]
                  : [
                      "Arabic & English",
                      "Auto translation",
                      "Custom templates",
                      "Natural communication",
                    ],
              },
            ].map((feature, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg"
              >
                <div className="text-3xl mb-4">{feature.icon}</div>
                <h3 className="text-xl font-bold mb-4 dark:text-white">
                  {feature.title}
                </h3>
                <ul className="space-y-2">
                  {feature.features.map((item, j) => (
                    <li key={j} className="flex items-start gap-2">
                      <span className="text-purple-500 mt-1">•</span>
                      <span className="text-slate-600 dark:text-slate-300">
                        {item}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Live Demo Section */}
      <section className="py-16 px-6 bg-gradient-to-br from-purple-50 to-brand-sand/20 dark:from-slate-800 dark:to-slate-900">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-4 dark:text-white">
            {isAr ? "شاهد النظام في العمل" : "See The System In Action"}
          </h2>
          <p className="text-center text-slate-600 dark:text-slate-300 mb-12 max-w-2xl mx-auto">
            {isAr
              ? "تجربة حية لكيفية تسجيل العملاء في قائمة الانتظار وتلقي الإشعارات"
              : "Live demo of how customers join waitlists and receive notifications"}
          </p>
          <ConversationMockup lang={params.lang} />
        </div>
      </section>

      {/* Success Stories */}
      <section className="py-16 px-6">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">
            {isAr
              ? "قصص نجاح من مختلف الصناعات"
              : "Success Stories Across Industries"}
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                name: isAr ? "مطعم الشيف - دبي" : "The Chef Restaurant - Dubai",
                type: isAr ? "مطعم فاخر" : "Fine Dining",
                icon: "🍽️",
                metric: isAr
                  ? "250+ حجز من القائمة/شهر"
                  : "250+ bookings from waitlist/month",
                quote: isAr
                  ? "لم نعد نخسر عملاء بسبب امتلاء الطاولات. القائمة تملأ أي إلغاء فوراً"
                  : "We no longer lose customers due to full tables. The waitlist fills any cancellation instantly",
                result: "+45%",
              },
              {
                name: isAr ? "متجر التقنية - الرياض" : "Tech Store - Riyadh",
                type: isAr ? "إلكترونيات" : "Electronics",
                icon: "📱",
                metric: isAr ? "5000+ عميل منتظر" : "5000+ waiting customers",
                quote: isAr
                  ? "عند وصول iPhone الجديد، نبيع المخزون كاملاً خلال ساعات عبر القائمة"
                  : "When new iPhones arrive, we sell out entire stock within hours through the waitlist",
                result: "89%",
              },
              {
                name: isAr ? "نادي فيت - جدة" : "Fit Club - Jeddah",
                type: isAr ? "نادي رياضي" : "Fitness Club",
                icon: "🏋️",
                metric: isAr ? "98% امتلاء الصفوف" : "98% class utilization",
                quote: isAr
                  ? "صفوف اليوغا الصباحية ممتلئة دائماً والقائمة تضمن عدم ضياع أي مكان"
                  : "Morning yoga classes are always full and the waitlist ensures no spot is wasted",
                result: "98%",
              },
              {
                name: isAr
                  ? "بوتيك الأزياء - الكويت"
                  : "Fashion Boutique - Kuwait",
                type: isAr ? "أزياء راقية" : "Luxury Fashion",
                icon: "👗",
                metric: isAr
                  ? "1000+ تسجيل لكل إطلاق"
                  : "1000+ registrations per launch",
                quote: isAr
                  ? "الإصدارات المحدودة تُحجز بالكامل قبل الوصول عبر قوائم الانتظار"
                  : "Limited editions are fully booked before arrival through waitlists",
                result: "100%",
              },
              {
                name: isAr ? "مقهى الفن - المنامة" : "Art Cafe - Manama",
                type: isAr ? "مقهى متخصص" : "Specialty Cafe",
                icon: "☕",
                metric: isAr ? "150+ انتظار للإفطار" : "150+ brunch waitlist",
                quote: isAr
                  ? "وجبات الإفطار في نهاية الأسبوع محجوزة بالكامل والقائمة تدير الطلب"
                  : "Weekend brunches are fully booked and the waitlist manages demand perfectly",
                result: "+60%",
              },
              {
                name: isAr ? "مركز الألعاب - مسقط" : "Gaming Center - Muscat",
                type: isAr ? "مركز ترفيه" : "Entertainment Center",
                icon: "🎮",
                metric: isAr ? "500+ لاعب منتظر" : "500+ gamers waiting",
                quote: isAr
                  ? "البطولات تمتلئ في دقائق والقائمة تنظم المشاركين الاحتياط"
                  : "Tournaments fill up in minutes and the waitlist organizes backup participants",
                result: "95%",
              },
            ].map((story, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
              >
                <div className="flex items-center justify-between mb-4">
                  <span className="text-3xl">{story.icon}</span>
                  <span className="text-2xl font-bold text-purple-500">
                    {story.result}
                  </span>
                </div>
                <h3 className="font-bold text-lg dark:text-white mb-1">
                  {story.name}
                </h3>
                <p className="text-sm text-slate-500 dark:text-slate-400 mb-3">
                  {story.type}
                </p>
                <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-3 mb-4">
                  <p className="text-sm font-semibold text-purple-700 dark:text-purple-400">
                    {story.metric}
                  </p>
                </div>
                <blockquote className="text-sm italic text-slate-600 dark:text-slate-300">
                  &ldquo;{story.quote}&rdquo;
                </blockquote>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Broadcast Strategies */}
      <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
              ? "استراتيجيات البث الفعّالة"
              : "Effective Broadcast Strategies"}
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white dark:bg-slate-700 rounded-xl p-8 shadow-lg">
              <h3 className="text-xl font-bold mb-6 dark:text-white flex items-center gap-2">
                <span className="text-3xl">⏰</span>
                {isAr ? "البث الزمني" : "Time-based Broadcasting"}
              </h3>
              <ul className="space-y-4">
                {[
                  {
                    time: isAr ? "T-24h" : "T-24h",
                    action: isAr
                      ? "تذكير أولي للمهتمين"
                      : "Initial reminder for interested",
                    desc: isAr
                      ? "إشعار مبكر للاستعداد"
                      : "Early notice to prepare",
                  },
                  {
                    time: isAr ? "T-2h" : "T-2h",
                    action: isAr
                      ? "فتح الحجز للأوائل"
                      : "Open booking for first batch",
                    desc: isAr
                      ? "أولوية حسب وقت التسجيل"
                      : "Priority by registration time",
                  },
                  {
                    time: isAr ? "T-0" : "T-0",
                    action: isAr ? "بث عام للجميع" : "General broadcast to all",
                    desc: isAr
                      ? "المتبقي متاح للجميع"
                      : "Remaining available for all",
                  },
                  {
                    time: isAr ? "T+1h" : "T+1h",
                    action: isAr ? "إغلاق وأرشفة" : "Close and archive",
                    desc: isAr
                      ? "نقل للقائمة التالية"
                      : "Move to next waitlist",
                  },
                ].map((item, i) => (
                  <li key={i} className="flex gap-4">
                    <div className="bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-3 py-1 rounded font-bold text-sm">
                      {item.time}
                    </div>
                    <div className="flex-1">
                      <div className="font-semibold dark:text-white">
                        {item.action}
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-400">
                        {item.desc}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white dark:bg-slate-700 rounded-xl p-8 shadow-lg">
              <h3 className="text-xl font-bold mb-6 dark:text-white flex items-center gap-2">
                <span className="text-3xl">🎯</span>
                {isAr ? "البث المستهدف" : "Targeted Broadcasting"}
              </h3>
              <ul className="space-y-4">
                {[
                  {
                    group: isAr ? "VIP" : "VIP",
                    criteria: isAr
                      ? "عملاء متكررون +10 مرات"
                      : "Repeat customers 10+ times",
                    benefit: isAr ? "أولوية مطلقة" : "Absolute priority",
                  },
                  {
                    group: isAr ? "Premium" : "Premium",
                    criteria: isAr
                      ? "إنفاق عالي +1000 ريال"
                      : "High spending +1000 SAR",
                    benefit: isAr ? "وصول مبكر" : "Early access",
                  },
                  {
                    group: isAr ? "Local" : "Local",
                    criteria: isAr
                      ? "نطاق 5 كم من الموقع"
                      : "5km radius from location",
                    benefit: isAr ? "عروض محلية" : "Local offers",
                  },
                  {
                    group: isAr ? "General" : "General",
                    criteria: isAr ? "جميع المسجلين" : "All registered",
                    benefit: isAr ? "حسب التوفر" : "Based on availability",
                  },
                ].map((item, i) => (
                  <li key={i} className="flex gap-4">
                    <div className="bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-3 py-1 rounded font-bold text-sm">
                      {item.group}
                    </div>
                    <div className="flex-1">
                      <div className="font-semibold dark:text-white">
                        {item.criteria}
                      </div>
                      <div className="text-sm text-slate-600 dark:text-slate-400">
                        {item.benefit}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ROI Calculator */}
      <section className="py-16 px-6">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12 dark:text-white">
            {isAr ? "العائد على الاستثمار" : "Return on Investment"}
          </h2>
          <div className="bg-gradient-to-br from-purple-50 to-brand-green/10 dark:from-purple-900/20 dark:to-brand-green/20 rounded-2xl p-8">
            <div className="grid md:grid-cols-4 gap-6 text-center">
              {[
                {
                  label: isAr
                    ? "تحويلات من القائمة"
                    : "Conversions from Waitlist",
                  value: isAr ? "250/شهر" : "250/month",
                  icon: "📈",
                },
                {
                  label: isAr ? "متوسط قيمة الطلب" : "Average Order Value",
                  value: isAr ? "150 ريال" : "150 SAR",
                  icon: "💰",
                },
                {
                  label: isAr ? "إيرادات إضافية" : "Additional Revenue",
                  value: isAr ? "37,500 ريال" : "37,500 SAR",
                  icon: "💵",
                },
                {
                  label: isAr ? "العائد الشهري" : "Monthly ROI",
                  value: "12.5x",
                  icon: "🚀",
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg"
                >
                  <div className="text-3xl mb-2">{item.icon}</div>
                  <div className="text-2xl font-bold text-purple-600 dark:text-purple-400 mb-2">
                    {item.value}
                  </div>
                  <div className="text-sm text-slate-600 dark:text-slate-300">
                    {item.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Integration Partners */}
      <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 Integration With Your Systems"}
          </h2>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            {[
              { name: "POS Systems", icon: "🖥️" },
              { name: "CRM", icon: "👥" },
              { name: "Payment", icon: "💳" },
              { name: "Calendar", icon: "📅" },
              { name: "Analytics", icon: "📊" },
              { name: "Marketing", icon: "📣" },
            ].map((partner, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-700 rounded-lg p-4 text-center shadow hover:shadow-lg transition-shadow"
              >
                <div className="text-2xl mb-2">{partner.icon}</div>
                <div className="text-xs font-semibold dark:text-white">
                  {partner.name}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-6 bg-gradient-to-r from-purple-600 to-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
              ? "حوّل قوائم الانتظار إلى مبيعات مؤكدة"
              : "Transform Waitlists Into Confirmed Sales"}
          </h2>
          <p className="text-xl mb-8 opacity-95">
            {isAr
              ? "انضم لمئات الشركات التي تستخدم نظامنا لزيادة المبيعات وتحسين تجربة العملاء"
              : "Join hundreds of companies using our system to increase sales and improve customer experience"}
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-white text-purple-600 rounded-lg font-bold hover:bg-slate-100 transition-colors shadow-lg"
            >
              {isAr ? "🚀 ابدأ التجربة المجانية" : "🚀 Start Free Trial"}
            </Link>
            <Link
              href={`/${params.lang}/contact`}
              className="px-8 py-4 bg-transparent text-white border-2 border-white rounded-lg font-bold hover:bg-white hover:text-purple-600 transition-colors"
            >
              {isAr ? "📞 تحدث مع خبير" : "📞 Talk to Expert"}
            </Link>
            <a
              href={`https://wa.me/${SITE.contact.whatsapp}?text=${encodeURIComponent(
                isAr
                  ? "أريد معرفة المزيد عن نظام قوائم الانتظار والبث"
                  : "I want to know more about the waitlist and broadcast system",
              )}`}
              target="_blank"
              rel="noopener noreferrer"
              className="px-8 py-4 bg-green-500 text-white rounded-lg font-bold hover:bg-green-600 transition-colors shadow-lg"
            >
              {isAr ? "💬 واتساب الآن" : "💬 WhatsApp Now"}
            </a>
          </div>
          <div className="mt-12 grid md:grid-cols-3 gap-4 text-sm">
            <div className="bg-white/10 backdrop-blur rounded-lg p-4">
              <div className="font-bold mb-1">
                {isAr ? "✨ نسخة تجريبية مجانية" : "✨ Free Trial"}
              </div>
              <div>{isAr ? "14 يوم بدون التزام" : "14 days no commitment"}</div>
            </div>
            <div className="bg-white/10 backdrop-blur rounded-lg p-4">
              <div className="font-bold mb-1">
                {isAr ? "🎯 إعداد سريع" : "🎯 Quick Setup"}
              </div>
              <div>{isAr ? "جاهز خلال 24 ساعة" : "Ready within 24 hours"}</div>
            </div>
            <div className="bg-white/10 backdrop-blur rounded-lg p-4">
              <div className="font-bold mb-1">
                {isAr ? "🆘 دعم محلي" : "🆘 Local Support"}
              </div>
              <div>{isAr ? "فريق عربي متخصص" : "Specialized Arabic team"}</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}