import { notFound } from "next/navigation";
import Link from "next/link";
import {
  ArrowLeft,
  Check,
  Calendar,
  CreditCard,
  Coffee,
  MessageSquare,
  Shield,
  HeadphonesIcon,
  TrendingUp,
  BarChart3,
  Star,
  DollarSign,
  PhoneOff,
  UserX,
  QrCode,
  Timer,
  Clock,
} from "lucide-react";
import { SITE } from "@/lib/config";

const pageContent = {
  en: {
    meta: {
      title: "Restaurants & Cafés - Stop Losing 30% Revenue to No-Shows",
      description:
        "Gulf restaurants lose millions in SAR annually from cancelled bookings. Mawidi solves this with WhatsApp booking and automated deposits.",
    },
    hero: {
      badge: "Food & Leisure",
      title: "Stop Losing 30% of Your Revenue to No-Shows",
      subtitle: "Restaurants • Cafés • Hotels • Entertainment Venues",
      description:
        "Gulf restaurants lose millions in SAR annually from cancelled bookings, chaotic schedules, and overwhelmed staff. Mawidi solves this with WhatsApp booking and automated deposits.",
      stats: [
        { value: "30%", label: "of revenue lost to no-shows" },
        { value: "4–6h", label: "daily wasted by staff on calls" },
        { value: "25%", label: "of bookings cancelled last-minute" },
      ],
      cta: {
        primary: "Book a Demo",
        secondary: "Chat on WhatsApp",
      },
    },
    challenges: {
      title: "Challenges You Face",
      subtitle: "Why Restaurants Lose Money",
      description:
        "These are the real problems costing thousands in SAR monthly:",
      items: [
        {
          icon: DollarSign,
          title: "No-Shows Cost a Fortune",
          description: "Empty seats, wasted prep",
          stat: "Avg loss: SAR 15,000–40,000/month (mid-sized venue)",
        },
        {
          icon: PhoneOff,
          title: "Manual Booking Chaos",
          description: "Calls, paper notebooks, lost WhatsApps",
          stat: "Staff spend 4–6 hours/day managing bookings",
        },
        {
          icon: UserX,
          title: "Staff Under Pressure",
          description: "Rush-hour calls, angry guests, missed reservations",
          stat: "Turnover up to +25% from burnout",
        },
      ],
    },
    solution: {
      title: "Complete Solution",
      subtitle: "How Mawidi Turns Your Restaurant into a Profit Machine",
      description:
        "One system that stops losses, increases bookings, and gives hours back to your team—via WhatsApp.",
      features: [
        {
          icon: MessageSquare,
          title: "Automated WhatsApp Bookings",
          items: [
            "24/7 Arabic & English",
            "Live availability, instant confirmation",
            "Auto-reminders reduce no-shows by up to 85%*",
          ],
        },
        {
          icon: Shield,
          title: "Prepayments Protect Your Revenue",
          items: [
            "Secure pay links (Mada, Apple Pay, cards)",
            "Auto-refund on attendance (configurable)",
            "Reduce no-shows from ~30% → ~3%*",
          ],
        },
        {
          icon: HeadphonesIcon,
          title: "Voice Agent for Overflow Calls",
          items: [
            "Answers during peak hours",
            "Speaks Gulf Arabic & English",
            "Transfers to staff when needed",
          ],
        },
      ],
      disclaimer:
        "* Example outcomes from Mawidi venues; results vary by concept, location, and policy.",
    },
    profitFeatures: {
      title: "Features that Translate Directly to Profit",
      items: [
        {
          icon: Calendar,
          title: "Smart Multi-Channel Booking",
          description: "WhatsApp, website, voice, host desk",
          impact: "Up to +40% bookings by removing friction",
        },
        {
          icon: CreditCard,
          title: "Automated Deposit Collection",
          description: "Weekends/holidays/large parties",
          impact: "Recover SAR 25k–50k monthly",
        },
        {
          icon: Timer,
          title: "Smart Waitlists",
          description: "1-tap join, WhatsApp updates, auto-claim",
          impact: "Save 2–3h/day managing queues",
        },
        {
          icon: QrCode,
          title: "QR Table Ordering",
          description: "Scan, order, pay",
          impact: "+15–20% revenue via faster turns",
        },
      ],
    },
    results: {
      title: "Real Results (GCC Venues)",
      stats: [
        { value: "85%", label: "reduction in no-shows", icon: TrendingUp },
        { value: "+35%", label: "increase in revenue", icon: BarChart3 },
        { value: "4–6h", label: "staff time saved daily", icon: Clock },
        { value: "92%", label: "customer satisfaction", icon: Star },
      ],
      testimonial: {
        quote:
          "Before Mawidi we lost 8–10 tables weekly to no-shows. Now? Less than one table. The automated deposit changed everything. We recovered over 35,000 SAR monthly.",
        author: "Ahmed Al-Shammari",
        role: "Owner, Al-Bayt Lebanese Restaurant",
        location: "Riyadh",
      },
      trust: {
        title: "Trusted by Hundreds Across the Gulf",
        stats: [
          "300+ active restaurants & cafés",
          "50K+ monthly bookings",
          "6 GCC countries",
          "24/7 Arabic support",
        ],
      },
    },
    howItWorks: {
      title: "Get Started in 3 Simple Steps",
      steps: [
        {
          icon: Timer,
          title: "Quick Setup (15 min)",
          description: "Add menu/floor plan; connect business WhatsApp",
        },
        {
          icon: Calendar,
          title: "Enable Payments & Rules",
          description: "Gateways, deposits, pacing, no-show policy",
        },
        {
          icon: DollarSign,
          title: "Start Receiving Bookings",
          description: "Share links/QRs; Mawidi automates the rest",
        },
      ],
    },
    platform: {
      title: "Platform Features",
      features: [
        {
          title: "Two-Way Inbox",
          description:
            "WhatsApp/SMS/Email threads, quick replies, templates, internal notes, SLAs",
        },
        {
          title: "Broadcasts",
          description:
            "Consent-aware promos, pre-arrival info, weather or venue alerts (quiet hours respected)",
        },
        {
          title: "Integrations",
          description:
            "POS/KDS, payments (Stripe/Mada/Apple/Google Pay), accounting (Xero/QB), maps",
        },
        {
          title: "Security",
          description:
            "TLS in transit, encrypted at rest, role-based access, audit logs",
        },
        {
          title: "Languages",
          description: "Arabic/English with full RTL support",
        },
      ],
    },
    cta: {
      title: "Ready to Stop Losing Money?",
      primaryButton: "Start 14-Day Free Trial",
      secondaryButton: "Book a Demo",
      features: ["No credit card", "Cancel anytime", "24/7 Arabic support"],
    },
    navigation: {
      back: "Back to Food, Hospitality & Stays",
    },
  },
  ar: {
    meta: {
      title: "المطاعم والمقاهي - أوقف خسارة 30% من الإيرادات",
      description:
        "مطاعم الخليج تخسر ملايين الريالات سنوياً من الحجوزات الملغاة. ماويدي تحل هذا بحجز واتساب والودائع الآلية.",
    },
    hero: {
      badge: "الطعام والترفيه",
      title: "أوقف خسارة 30% من إيراداتك بسبب عدم الحضور",
      subtitle: "مطاعم • مقاهي • فنادق • أماكن ترفيه",
      description:
        "مطاعم الخليج تخسر ملايين الريالات سنوياً من الحجوزات الملغاة، الجداول الفوضوية، والموظفين المرهقين. ماويدي تحل هذا بحجز واتساب والودائع الآلية.",
      stats: [
        { value: "30%", label: "من الإيرادات مفقودة لعدم الحضور" },
        { value: "4–6س", label: "يومياً مهدرة من الموظفين على المكالمات" },
        { value: "25%", label: "من الحجوزات ملغاة في اللحظة الأخيرة" },
      ],
      cta: {
        primary: "احجز عرض تجريبي",
        secondary: "تحدث على واتساب",
      },
    },
    challenges: {
      title: "التحديات التي تواجهها",
      subtitle: "لماذا تخسر المطاعم الأموال",
      description: "هذه هي المشاكل الحقيقية التي تكلف آلاف الريالات شهرياً:",
      items: [
        {
          icon: DollarSign,
          title: "عدم الحضور يكلف ثروة",
          description: "مقاعد فارغة، تحضير مهدر",
          stat: "متوسط الخسارة: 15,000–40,000 ريال/شهر (مكان متوسط)",
        },
        {
          icon: PhoneOff,
          title: "فوضى الحجز اليدوي",
          description: "مكالمات، دفاتر ورقية، واتسابات مفقودة",
          stat: "الموظفون يقضون 4–6 ساعات/يوم في إدارة الحجوزات",
        },
        {
          icon: UserX,
          title: "الموظفون تحت الضغط",
          description: "مكالمات ساعة الذروة، ضيوف غاضبون، حجوزات مفقودة",
          stat: "دوران الموظفين يصل إلى +25% من الإرهاق",
        },
      ],
    },
    solution: {
      title: "الحل الكامل",
      subtitle: "كيف تحول ماويدي مطعمك إلى آلة ربح",
      description:
        "نظام واحد يوقف الخسائر، يزيد الحجوزات، ويعيد الساعات لفريقك—عبر واتساب.",
      features: [
        {
          icon: MessageSquare,
          title: "حجوزات واتساب آلية",
          items: [
            "24/7 بالعربية والإنجليزية",
            "توفر مباشر، تأكيد فوري",
            "التذكيرات الآلية تقلل عدم الحضور حتى 85%*",
          ],
        },
        {
          icon: Shield,
          title: "الدفعات المقدمة تحمي إيراداتك",
          items: [
            "روابط دفع آمنة (مدى، آبل باي، البطاقات)",
            "استرداد آلي عند الحضور (قابل للتكوين)",
            "تقليل عدم الحضور من ~30% → ~3%*",
          ],
        },
        {
          icon: HeadphonesIcon,
          title: "وكيل صوتي للمكالمات الفائضة",
          items: [
            "يجيب خلال ساعات الذروة",
            "يتحدث العربية الخليجية والإنجليزية",
            "يحول للموظفين عند الحاجة",
          ],
        },
      ],
      disclaimer:
        "* أمثلة نتائج من أماكن ماويدي؛ النتائج تختلف حسب المفهوم والموقع والسياسة.",
    },
    profitFeatures: {
      title: "مميزات تترجم مباشرة إلى ربح",
      items: [
        {
          icon: Calendar,
          title: "حجز ذكي متعدد القنوات",
          description: "واتساب، موقع ويب، صوت، مكتب الاستقبال",
          impact: "حتى +40% حجوزات بإزالة الاحتكاك",
        },
        {
          icon: CreditCard,
          title: "تحصيل ودائع آلي",
          description: "نهايات الأسبوع/العطلات/الحفلات الكبيرة",
          impact: "استرداد 25–50 ألف ريال شهرياً",
        },
        {
          icon: Timer,
          title: "قوائم انتظار ذكية",
          description: "انضمام بنقرة، تحديثات واتساب، مطالبة آلية",
          impact: "توفير 2–3س/يوم في إدارة القوائم",
        },
        {
          icon: QrCode,
          title: "طلب الطاولة بـQR",
          description: "امسح، اطلب، ادفع",
          impact: "+15–20% إيرادات عبر دورات أسرع",
        },
      ],
    },
    results: {
      title: "نتائج حقيقية (أماكن خليجية)",
      stats: [
        { value: "85%", label: "تقليل في عدم الحضور", icon: TrendingUp },
        { value: "+35%", label: "زيادة في الإيرادات", icon: BarChart3 },
        { value: "4–6س", label: "وقت موظفين موفر يومياً", icon: Clock },
        { value: "92%", label: "رضا العملاء", icon: Star },
      ],
      testimonial: {
        quote:
          "قبل ماويدي كنا نخسر 8–10 طاولات أسبوعياً لعدم الحضور. الآن؟ أقل من طاولة واحدة. الوديعة الآلية غيرت كل شيء. استرددنا أكثر من 35,000 ريال شهرياً.",
        author: "أحمد الشمري",
        role: "مالك، مطعم البيت اللبناني",
        location: "الرياض",
      },
      trust: {
        title: "موثوق من المئات عبر الخليج",
        stats: [
          "300+ مطعم ومقهى نشط",
          "50K+ حجز شهري",
          "6 دول خليجية",
          "دعم عربي 24/7",
        ],
      },
    },
    howItWorks: {
      title: "ابدأ في 3 خطوات بسيطة",
      steps: [
        {
          icon: Timer,
          title: "إعداد سريع (15 دقيقة)",
          description: "أضف القائمة/مخطط الطابق؛ اربط واتساب الأعمال",
        },
        {
          icon: Calendar,
          title: "فعّل المدفوعات والقواعد",
          description: "البوابات، الودائع، السرعة، سياسة عدم الحضور",
        },
        {
          icon: DollarSign,
          title: "ابدأ استقبال الحجوزات",
          description: "شارك الروابط/QR؛ ماويدي تؤتمت الباقي",
        },
      ],
    },
    platform: {
      title: "مميزات المنصة",
      features: [
        {
          title: "صندوق بريد ثنائي الاتجاه",
          description:
            "محادثات واتساب/رسائل/إيميل، ردود سريعة، قوالب، ملاحظات داخلية، SLAs",
        },
        {
          title: "البث",
          description:
            "عروض ترويجية بموافقة، معلومات ما قبل الوصول، تنبيهات الطقس أو المكان (احترام ساعات الهدوء)",
        },
        {
          title: "التكاملات",
          description:
            "POS/KDS، مدفوعات (Stripe/مدى/آبل/جوجل باي)، محاسبة (Xero/QB)، خرائط",
        },
        {
          title: "الأمان",
          description:
            "TLS أثناء النقل، مشفر في حالة السكون، وصول حسب الأدوار، سجلات تدقيق",
        },
        {
          title: "اللغات",
          description: "العربية/الإنجليزية مع دعم RTL كامل",
        },
      ],
    },
    cta: {
      title: "جاهز لإيقاف خسارة الأموال؟",
      primaryButton: "ابدأ تجربة 14 يوم مجانية",
      secondaryButton: "احجز عرض تجريبي",
      features: ["بدون بطاقة ائتمان", "إلغاء في أي وقت", "دعم عربي 24/7"],
    },
    navigation: {
      back: "العودة للضيافة والإقامة",
    },
  },
};

export async function generateStaticParams() {
  return [{ lang: "en" }, { lang: "ar" }];
}

export default function RestaurantsCafesPage({
  params,
}: {
  params: { lang: "en" | "ar" };
}) {
  if (!["en", "ar"].includes(params.lang)) {
    notFound();
  }

  const content = pageContent[params.lang];
  const isRTL = params.lang === "ar";

  return (
    <main className="min-h-screen bg-gradient-to-b from-white via-red-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      {/* Back Navigation */}
      <div className="max-w-7xl mx-auto px-4 pt-6">
        <Link
          href={`/${params.lang}/industries/food-hospitality-stays`}
          className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-brand-green transition-colors"
        >
          <ArrowLeft className={`h-4 w-4 ${isRTL ? "rotate-180" : ""}`} />
          <span>{content.navigation.back}</span>
        </Link>
      </div>

      {/* Hero Section */}
      <section className="relative py-20 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-red-500/10 text-red-600 text-sm font-medium mb-6">
            <Coffee className="h-4 w-4" />
            {content.hero.badge}
          </span>

          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            {content.hero.title}
          </h1>
          <div className="text-lg text-gray-600 dark:text-gray-400 mb-8">
            {content.hero.subtitle}
          </div>

          <p className="text-lg text-gray-700 dark:text-gray-300 max-w-4xl mx-auto mb-10 leading-relaxed">
            {content.hero.description}
          </p>

          {/* Stats */}
          <div className="grid grid-cols-3 gap-4 max-w-3xl mx-auto mb-10">
            {content.hero.stats.map((stat, index) => (
              <div key={index} className="bg-red-500/10 rounded-xl p-4">
                <div className="text-2xl md:text-3xl font-bold text-red-600 mb-1">
                  {stat.value}
                </div>
                <div className="text-xs md:text-sm text-gray-600 dark:text-gray-400">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>

          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all transform hover:scale-105 font-medium shadow-lg"
            >
              {content.hero.cta.primary}
            </Link>
            <a
              href={`https://wa.me/${SITE.contact.whatsapp}`}
              className="px-8 py-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all font-medium flex items-center gap-2"
            >
              <MessageSquare className="h-5 w-5" />
              {content.hero.cta.secondary}
            </a>
          </div>
        </div>
      </section>

      {/* Challenges Section */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-4">
            {content.challenges.title}
          </h2>
          <p className="text-xl text-center text-red-600 font-semibold mb-4">
            {content.challenges.subtitle}
          </p>
          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-12 max-w-3xl mx-auto">
            {content.challenges.description}
          </p>

          <div className="grid md:grid-cols-3 gap-8">
            {content.challenges.items.map((item, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-700 rounded-xl p-6 border-2 border-red-200 dark:border-red-800"
              >
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-red-500/10 rounded-lg">
                    <item.icon className="h-6 w-6 text-red-500" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                    {item.title}
                  </h3>
                </div>
                <p className="text-gray-600 dark:text-gray-400 mb-3">
                  {item.description}
                </p>
                <div className="text-sm font-medium text-red-600 dark:text-red-400">
                  {item.stat}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Solution Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-4">
            {content.solution.title}
          </h2>
          <p className="text-xl text-center text-brand-green font-semibold mb-4">
            {content.solution.subtitle}
          </p>
          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-12 max-w-3xl mx-auto">
            {content.solution.description}
          </p>

          <div className="grid md:grid-cols-3 gap-6 mb-6">
            {content.solution.features.map((feature, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
              >
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-3 bg-brand-green/10 rounded-lg">
                    <feature.icon className="h-6 w-6 text-brand-green" />
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {feature.title}
                  </h3>
                </div>
                <div className="space-y-2">
                  {feature.items.map((item, idx) => (
                    <div key={idx} className="flex items-start gap-2">
                      <Check className="h-4 w-4 text-brand-green flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-gray-700 dark:text-gray-300">
                        {item}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <p className="text-sm text-center text-gray-500 dark:text-gray-400 italic">
            {content.solution.disclaimer}
          </p>
        </div>
      </section>

      {/* Profit Features */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.profitFeatures.title}
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {content.profitFeatures.items.map((item, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-700 rounded-xl p-6 hover:shadow-xl transition-all"
              >
                <div className="p-3 bg-brand-green/10 rounded-lg w-fit mb-4">
                  <item.icon className="h-6 w-6 text-brand-green" />
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
                  {item.description}
                </p>
                <div className="text-sm font-bold text-brand-green">
                  {item.impact}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Results Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.results.title}
          </h2>

          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
            {content.results.stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="p-4 bg-brand-green/10 rounded-lg w-fit mx-auto mb-3">
                  <stat.icon className="h-8 w-8 text-brand-green" />
                </div>
                <div className="text-3xl font-bold text-gray-900 dark:text-white mb-1">
                  {stat.value}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>

          {/* Testimonial */}
          <div className="max-w-3xl mx-auto bg-brand-sand/10 dark:bg-gray-800 rounded-2xl p-8 mb-12">
            <blockquote className="text-lg text-gray-700 dark:text-gray-300 italic mb-4">
              &ldquo;{content.results.testimonial.quote}&rdquo;
            </blockquote>
            <div className="flex items-center gap-4">
              <div className="p-2 bg-brand-green/10 rounded-full">
                <Star className="h-6 w-6 text-brand-green" />
              </div>
              <div>
                <div className="font-semibold text-gray-900 dark:text-white">
                  {content.results.testimonial.author}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  {content.results.testimonial.role},{" "}
                  {content.results.testimonial.location}
                </div>
              </div>
            </div>
          </div>

          {/* Trust */}
          <div className="text-center">
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-6">
              {content.results.trust.title}
            </h3>
            <div className="flex flex-wrap justify-center gap-6 text-gray-600 dark:text-gray-400">
              {content.results.trust.stats.map((stat, index) => (
                <div key={index} className="flex items-center gap-2">
                  <Check className="h-5 w-5 text-brand-green" />
                  <span>{stat}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.howItWorks.title}
          </h2>

          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {content.howItWorks.steps.map((step, index) => (
              <div key={index} className="text-center">
                <div className="p-4 bg-brand-green/10 rounded-full w-fit mx-auto mb-4">
                  <step.icon className="h-8 w-8 text-brand-green" />
                </div>
                <div className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {index + 1}. {step.title}
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {step.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Platform Features */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.platform.title}
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {content.platform.features.map((feature, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-xl p-6"
              >
                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-8">
            {content.cta.title}
          </h2>

          <div className="flex flex-wrap justify-center gap-4 mb-8">
            <Link
              href={`/${params.lang}/signup`}
              className="px-8 py-4 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all transform hover:scale-105 font-medium shadow-lg"
            >
              {content.cta.primaryButton}
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-white dark:bg-gray-800 text-red-500 border-2 border-red-500 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-all font-medium"
            >
              {content.cta.secondaryButton}
            </Link>
          </div>

          <div className="flex flex-wrap justify-center gap-4 text-sm text-gray-600 dark:text-gray-400">
            {content.cta.features.map((feature, index) => (
              <div key={index} className="flex items-center gap-2">
                <Check className="h-4 w-4 text-brand-green" />
                <span>{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}
