"use client";

import Link from "next/link";
import { useState } from "react";
import ReminderFlowBuilder from "@/components/messages/ReminderFlowBuilder";
import OrderStatusTracker from "@/components/messages/OrderStatusTracker";
import TwoWayChatInbox from "@/components/messages/TwoWayChatInbox";
import BroadcastWaitlist from "@/components/messages/BroadcastWaitlist";
import TemplateGallery from "@/components/messages/TemplateGallery";
import AnalyticsDashboard from "@/components/messages/AnalyticsDashboard";
import CompliancePreferences from "@/components/messages/CompliancePreferences";

interface Props {
  params: {
    lang: "ar" | "en";
  };
}

export default function MessagesPage({ params }: Props) {
  const isRTL = params.lang === "ar";
  const dir = isRTL ? "rtl" : "ltr";
  const [activeSection, setActiveSection] = useState<
    "reminders" | "chat" | "broadcast" | "status"
  >("reminders");
  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);

  const content = {
    ar: {
      hero: {
        badge: "تواصل ذكي",
        title: "الرسائل والتحديثات",
        subtitle:
          "تذكيرات تلقائية، تحديثات فورية، محادثات ثنائية، وحملات بث مستهدفة عبر WhatsApp وSMS والبريد",
        cta: "ابدأ الآن",
        demo: "احجز عرض",
        stats: [
          { value: "98%", label: "نسبة التوصيل", sublabel: "عبر جميع القنوات" },
          { value: "<3s", label: "سرعة الإرسال", sublabel: "للرسائل الفورية" },
          { value: "24/7", label: "تغطية مستمرة", sublabel: "بدون تدخل بشري" },
        ],
      },
      features: {
        title: "أدوات التواصل",
        subtitle: "كل ما تحتاجه لإدارة محادثات العملاء",
        items: [
          {
            num: "01",
            title: "تذكيرات ذكية",
            desc: "تذكيرات تلقائية للمواعيد مع أزرار تأكيد وإعادة جدولة",
            highlights: ["تخصيص التوقيت", "رسائل شخصية", "تأكيد تلقائي"],
          },
          {
            num: "02",
            title: "محادثات ثنائية",
            desc: "صندوق وارد موحد لإدارة جميع المحادثات",
            highlights: ["ردود سريعة", "قوالب جاهزة", "تتبع SLA"],
          },
          {
            num: "03",
            title: "حملات البث",
            desc: "رسائل مستهدفة مع تجزئة متقدمة للعملاء",
            highlights: ["تجزئة العملاء", "جدولة الحملات", "اختبار A/B"],
          },
          {
            num: "04",
            title: "تحديثات الحالة",
            desc: "إشعارات فورية عن حالة الطلبات والمواعيد",
            highlights: ["تتبع مباشر", "إشعارات آلية", "روابط مخصصة"],
          },
        ],
      },
      channels: {
        title: "قنوات متعددة",
        subtitle: "تواصل مع عملائك عبر قنواتهم المفضلة",
        items: [
          {
            name: "WhatsApp Business API",
            desc: "القناة الرئيسية للتواصل",
            stat: "89%",
          },
          { name: "SMS", desc: "قناة احتياطية موثوقة", stat: "99%" },
          { name: "البريد الإلكتروني", desc: "للرسائل التفصيلية", stat: "95%" },
        ],
      },
      tabs: {
        reminders: "التذكيرات",
        chat: "المحادثات",
        broadcast: "البث",
        status: "الحالة",
      },
      compliance: {
        title: "الأمان والامتثال",
        subtitle: "حماية بيانات عملائك بأعلى المعايير",
        items: [
          {
            num: "01",
            title: "تشفير شامل",
            desc: "حماية كاملة للمحادثات من طرف إلى طرف",
          },
          {
            num: "02",
            title: "HIPAA",
            desc: "معايير حماية البيانات الطبية المعتمدة",
          },
          {
            num: "03",
            title: "بيانات محلية",
            desc: "استضافة آمنة في منطقة الخليج",
          },
        ],
      },
      faq: {
        title: "الأسئلة الشائعة",
        items: [
          {
            q: "ما القنوات المدعومة؟",
            a: "WhatsApp Business API كقناة رئيسية، مع SMS والبريد الإلكتروني كقنوات احتياطية.",
          },
          {
            q: "كيف تعمل التذكيرات؟",
            a: "يتم إرسالها تلقائياً قبل الموعد بـ 48 و24 و6 ساعات. يمكن تخصيص التوقيت حسب نوع الخدمة.",
          },
          {
            q: "هل يمكن تخصيص القوالب؟",
            a: "نعم، جميع القوالب قابلة للتخصيص بلغتين مع متغيرات ديناميكية.",
          },
          {
            q: "هل WhatsApp API مشمول؟",
            a: "نعم، نتولى الإعداد الكامل. تحتاج فقط رقم هاتف مخصص.",
          },
        ],
      },
      cta: {
        title: "جاهز للبدء؟",
        subtitle:
          "جرب نظام الرسائل مجاناً واكتشف كيف يمكن أن يحول تواصلك مع العملاء",
        primaryBtn: "ابدأ مجاناً",
        secondaryBtn: "احجز عرض",
      },
    },
    en: {
      hero: {
        badge: "Smart Communication",
        title: "Messages & Updates",
        subtitle:
          "Automated reminders, real-time updates, two-way chat, and targeted broadcasts via WhatsApp, SMS, and email",
        cta: "Get Started",
        demo: "Book Demo",
        stats: [
          {
            value: "98%",
            label: "Delivery Rate",
            sublabel: "Across all channels",
          },
          {
            value: "<3s",
            label: "Send Speed",
            sublabel: "For instant messages",
          },
          { value: "24/7", label: "Coverage", sublabel: "No human needed" },
        ],
      },
      features: {
        title: "Communication Tools",
        subtitle: "Everything you need to manage customer conversations",
        items: [
          {
            num: "01",
            title: "Smart Reminders",
            desc: "Automated appointment reminders with confirm and reschedule buttons",
            highlights: ["Custom timing", "Personalized", "Auto-confirm"],
          },
          {
            num: "02",
            title: "Two-Way Chat",
            desc: "Unified inbox to manage all customer conversations",
            highlights: ["Quick replies", "Templates", "SLA tracking"],
          },
          {
            num: "03",
            title: "Broadcast Campaigns",
            desc: "Targeted messages with advanced customer segmentation",
            highlights: ["Segmentation", "Scheduling", "A/B testing"],
          },
          {
            num: "04",
            title: "Status Updates",
            desc: "Real-time notifications for orders and appointments",
            highlights: ["Live tracking", "Auto-notify", "Custom links"],
          },
        ],
      },
      channels: {
        title: "Multi-Channel Support",
        subtitle: "Reach your customers on their preferred channels",
        items: [
          {
            name: "WhatsApp Business API",
            desc: "Primary communication channel",
            stat: "89%",
          },
          { name: "SMS", desc: "Reliable fallback channel", stat: "99%" },
          { name: "Email", desc: "For detailed messages", stat: "95%" },
        ],
      },
      tabs: {
        reminders: "Reminders",
        chat: "Chat",
        broadcast: "Broadcast",
        status: "Status",
      },
      compliance: {
        title: "Security & Compliance",
        subtitle: "Protect your customer data with the highest standards",
        items: [
          {
            num: "01",
            title: "End-to-End Encryption",
            desc: "Complete conversation protection from start to finish",
          },
          {
            num: "02",
            title: "HIPAA Compliant",
            desc: "Certified medical data protection standards",
          },
          {
            num: "03",
            title: "Local Data",
            desc: "Secure hosting in the GCC region",
          },
        ],
      },
      faq: {
        title: "Frequently Asked Questions",
        items: [
          {
            q: "What channels are supported?",
            a: "WhatsApp Business API as primary, with SMS and email as fallback channels.",
          },
          {
            q: "How do reminders work?",
            a: "Sent automatically at T-48h, T-24h, and T-6h before appointments. Timing is customizable.",
          },
          {
            q: "Can templates be customized?",
            a: "Yes, all templates are fully customizable in both languages with dynamic variables.",
          },
          {
            q: "Is WhatsApp API included?",
            a: "Yes, we handle complete setup. You just need a dedicated phone number.",
          },
        ],
      },
      cta: {
        title: "Ready to Get Started?",
        subtitle:
          "Try the messaging system for free and discover how it can transform your customer communication",
        primaryBtn: "Start Free",
        secondaryBtn: "Book Demo",
      },
    },
  };

  const t = content[params.lang];

  return (
    <main className="relative overflow-hidden" dir={dir}>
      {/* ═══════════════════════════════════════════════════════════════════════
          HERO SECTION - Editorial Style with Asymmetric Layout
          Brand: Using Mawidi brand-green #0F9972
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative min-h-[85vh] flex items-center">
        {/* Atmospheric Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-stone-50 via-white to-[#0F9972]/5 dark:from-slate-950 dark:via-slate-900 dark:to-[#0F9972]/10" />

        {/* Geometric Grid Pattern */}
        <div
          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
          style={{
            backgroundImage: `
              linear-gradient(to right, currentColor 1px, transparent 1px),
              linear-gradient(to bottom, currentColor 1px, transparent 1px)
            `,
            backgroundSize: "80px 80px",
          }}
        />

        {/* Diagonal accent */}
        <div className="absolute top-0 right-0 w-[50%] h-full bg-gradient-to-l from-brand-green/[0.03] to-transparent dark:from-brand-green/[0.08] pointer-events-none" />

        {/* Accent Blob */}
        <div className="absolute top-20 -right-40 w-[500px] h-[500px] rounded-full bg-gradient-to-br from-brand-green/15 via-teal-100/10 to-transparent blur-3xl dark:from-brand-green/10" />

        <div className="relative max-w-7xl mx-auto px-5 py-20 md:px-8 lg:py-28">
          <div className="grid gap-12 lg:grid-cols-[1.3fr_1fr] lg:gap-16 items-center">
            {/* Left Column - Content */}
            <div className={`space-y-8 ${isRTL ? "lg:order-2" : ""}`}>
              {/* Overline Badge */}
              <div className="inline-flex items-center gap-3">
                <span className="h-px w-12 bg-brand-green" />
                <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                  {t.hero.badge}
                </span>
              </div>

              {/* Massive Title */}
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-black tracking-tight text-stone-900 dark:text-white leading-[0.95]">
                {t.hero.title}
              </h1>

              {/* Subtitle */}
              <p className="text-xl md:text-2xl text-stone-600 dark:text-stone-300 leading-relaxed max-w-xl font-light">
                {t.hero.subtitle}
              </p>

              {/* CTA Buttons - Sharp corners */}
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group inline-flex items-center gap-3 bg-brand-green text-white px-8 py-4 text-base font-semibold transition-all hover:gap-5 hover:bg-brand-greenHover"
                >
                  {t.hero.cta}
                  <span className="transition-transform group-hover:translate-x-1">
                    {isRTL ? "←" : "→"}
                  </span>
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="group inline-flex items-center gap-3 border-2 border-stone-300 dark:border-stone-700 text-stone-700 dark:text-stone-300 px-8 py-4 text-base font-semibold transition-all hover:border-brand-green hover:text-brand-green"
                >
                  {t.hero.demo}
                </Link>
              </div>
            </div>

            {/* Right Column - Stats Card */}
            <div className={`relative ${isRTL ? "lg:order-1" : ""}`}>
              {/* Offset decorative element */}
              <div className="absolute -top-4 -left-4 w-24 h-24 border-2 border-brand-green/20 dark:border-brand-green/10" />

              <div className="relative bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-800 shadow-2xl">
                {/* Card Header */}
                <div className="border-b border-stone-100 dark:border-slate-800 px-6 py-4">
                  <p className="text-xs font-bold tracking-[0.2em] uppercase text-brand-green">
                    {isRTL ? "الأداء" : "Performance"}
                  </p>
                </div>

                {/* Stats */}
                <div className="divide-y divide-stone-100 dark:divide-slate-800">
                  {t.hero.stats.map((stat, index) => (
                    <div
                      key={index}
                      className="px-6 py-5 flex items-baseline justify-between"
                    >
                      <div>
                        <p className="text-sm text-stone-500 dark:text-stone-400">
                          {stat.label}
                        </p>
                        <p className="text-xs text-stone-400 dark:text-stone-500">
                          {stat.sublabel}
                        </p>
                      </div>
                      <span className="text-3xl font-black text-stone-900 dark:text-white">
                        {stat.value}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FEATURES - Editorial numbered grid
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32 bg-stone-100 dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          {/* Section Header - Left aligned, not centered */}
          <div className="max-w-2xl mb-16">
            <span className="inline-flex items-center gap-3 mb-6">
              <span className="h-px w-12 bg-brand-green" />
              <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                {isRTL ? "الميزات" : "Features"}
              </span>
            </span>
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-4 leading-tight">
              {t.features.title}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {t.features.subtitle}
            </p>
          </div>

          {/* Features Grid with numbered cards */}
          <div className="grid md:grid-cols-2 gap-px bg-stone-300/50 dark:bg-slate-700/50">
            {t.features.items.map((item, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-800 p-8 lg:p-10 hover:bg-stone-50 dark:hover:bg-slate-800/80 transition-colors"
              >
                {/* Large Number Background */}
                <span className="absolute top-4 right-4 text-[80px] lg:text-[100px] font-black text-stone-100 dark:text-slate-700/50 leading-none select-none">
                  {item.num}
                </span>

                {/* Content */}
                <div className="relative">
                  <h3 className="text-xl lg:text-2xl font-bold text-stone-900 dark:text-white mb-3">
                    {item.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-300 leading-relaxed mb-4">
                    {item.desc}
                  </p>

                  {/* Highlights as tags */}
                  <div className="flex flex-wrap gap-2">
                    {item.highlights.map((highlight, idx) => (
                      <span
                        key={idx}
                        className="px-3 py-1 text-xs font-medium bg-brand-green/10 text-brand-green"
                      >
                        {highlight}
                      </span>
                    ))}
                  </div>
                </div>

                {/* Hover Accent Line */}
                <div className="absolute bottom-0 left-0 w-0 h-1 bg-brand-green group-hover:w-full transition-all duration-500" />
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          CHANNELS - Magazine style with stats
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="grid lg:grid-cols-[1fr_1.5fr] gap-16 items-center">
            {/* Left - Content */}
            <div className={isRTL ? "lg:order-2" : ""}>
              <span className="inline-flex items-center gap-3 mb-6">
                <span className="h-px w-12 bg-brand-green" />
                <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                  {isRTL ? "القنوات" : "Channels"}
                </span>
              </span>
              <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-4 leading-tight">
                {t.channels.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300">
                {t.channels.subtitle}
              </p>
            </div>

            {/* Right - Channel Cards */}
            <div className={`space-y-4 ${isRTL ? "lg:order-1" : ""}`}>
              {t.channels.items.map((channel, i) => (
                <div
                  key={i}
                  className="group flex items-center justify-between p-6 bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700 hover:border-brand-green/50 transition-colors"
                >
                  <div className="flex items-center gap-4">
                    <span className="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-brand-green/10 text-brand-green font-bold">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div>
                      <p className="font-semibold text-stone-900 dark:text-white">
                        {channel.name}
                      </p>
                      <p className="text-sm text-stone-500 dark:text-stone-400">
                        {channel.desc}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <span className="text-2xl font-black text-brand-green">
                      {channel.stat}
                    </span>
                    <p className="text-xs text-stone-400">
                      {isRTL ? "نسبة الفتح" : "Open Rate"}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          INTERACTIVE DEMO - Tab Navigation with editorial styling
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32 bg-stone-50 dark:bg-slate-900/50">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          {/* Section Header */}
          <div className="text-center max-w-2xl mx-auto mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-stone-900 dark:text-white mb-4">
              {isRTL ? "استكشف الميزات" : "Explore Features"}
            </h2>
          </div>

          {/* Tab Navigation - Sharp styling */}
          <div
            className="flex flex-wrap justify-center gap-1 mb-8"
            role="tablist"
          >
            {(["reminders", "chat", "broadcast", "status"] as const).map(
              (tab) => (
                <button
                  key={tab}
                  role="tab"
                  aria-selected={activeSection === tab}
                  onClick={() => setActiveSection(tab)}
                  className={`px-6 py-3 text-sm font-semibold transition-all ${
                    activeSection === tab
                      ? "bg-brand-green text-white"
                      : "bg-white dark:bg-slate-800 text-stone-600 dark:text-stone-400 hover:text-brand-green border border-stone-200 dark:border-slate-700"
                  }`}
                >
                  {t.tabs[tab]}
                </button>
              ),
            )}
          </div>

          {/* Tab Content */}
          <div className="min-h-[400px] bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700 p-6 md:p-8">
            {activeSection === "reminders" && (
              <ReminderFlowBuilder lang={params.lang} />
            )}
            {activeSection === "chat" && <TwoWayChatInbox lang={params.lang} />}
            {activeSection === "broadcast" && (
              <BroadcastWaitlist lang={params.lang} />
            )}
            {activeSection === "status" && (
              <OrderStatusTracker lang={params.lang} />
            )}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          TEMPLATE GALLERY
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 lg:py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <TemplateGallery lang={params.lang} />
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          ANALYTICS DASHBOARD
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 lg:py-32 bg-stone-50 dark:bg-slate-900/50">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <AnalyticsDashboard lang={params.lang} />
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          SECURITY & COMPLIANCE - Dark section with brand accent
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32 bg-stone-900 dark:bg-slate-950 text-white overflow-hidden">
        {/* Grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `
              linear-gradient(to right, white 1px, transparent 1px),
              linear-gradient(to bottom, white 1px, transparent 1px)
            `,
            backgroundSize: "60px 60px",
          }}
        />

        {/* Accent glow */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-brand-green/10 to-transparent" />

        <div className="relative max-w-7xl mx-auto px-5 md:px-8">
          <div className="max-w-2xl mb-16">
            <h2 className="text-4xl md:text-5xl font-black mb-4 leading-tight">
              {t.compliance.title}
            </h2>
            <p className="text-xl text-stone-400">{t.compliance.subtitle}</p>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-stone-700/50">
            {t.compliance.items.map((item, i) => (
              <article
                key={i}
                className="relative bg-stone-900 dark:bg-slate-950 p-8"
              >
                <span className="block text-5xl font-black text-stone-700 mb-4">
                  {item.num}
                </span>
                <h3 className="text-xl font-bold text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-stone-400 leading-relaxed">{item.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          COMPLIANCE PREFERENCES COMPONENT
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 lg:py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <CompliancePreferences lang={params.lang} />
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FAQ - Clean accordion style
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 lg:py-32 bg-stone-50 dark:bg-slate-900/50">
        <div className="max-w-3xl mx-auto px-5 md:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-stone-900 dark:text-white">
              {t.faq.title}
            </h2>
          </div>

          <div className="space-y-2">
            {t.faq.items.map((item, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700"
              >
                <button
                  onClick={() => setExpandedFaq(expandedFaq === i ? null : i)}
                  className="w-full px-6 py-5 flex items-center justify-between text-left"
                >
                  <span className="font-semibold text-stone-900 dark:text-white pr-4">
                    {item.q}
                  </span>
                  <span
                    className={`flex-shrink-0 w-8 h-8 flex items-center justify-center bg-brand-green/10 text-brand-green transition-transform ${expandedFaq === i ? "rotate-45" : ""}`}
                  >
                    +
                  </span>
                </button>
                {expandedFaq === i && (
                  <div className="px-6 pb-5">
                    <p className="text-stone-600 dark:text-stone-300 leading-relaxed">
                      {item.a}
                    </p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FINAL CTA - Bold and minimal
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32 bg-brand-green text-white overflow-hidden">
        {/* Grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.05]"
          style={{
            backgroundImage: `
              linear-gradient(to right, white 1px, transparent 1px),
              linear-gradient(to bottom, white 1px, transparent 1px)
            `,
            backgroundSize: "60px 60px",
          }}
        />

        {/* Decorative elements */}
        <div className="absolute top-0 left-0 w-1/4 h-full bg-white/5" />

        <div className="relative max-w-4xl mx-auto px-5 md:px-8 text-center">
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-6 leading-tight">
            {t.cta.title}
          </h2>
          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            {t.cta.subtitle}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/signup`}
              className="group inline-flex items-center gap-3 bg-white text-brand-green px-10 py-5 text-lg font-semibold transition-all hover:gap-5 hover:bg-stone-100"
            >
              {t.cta.primaryBtn}
              <span className="transition-transform group-hover:translate-x-1">
                {isRTL ? "←" : "→"}
              </span>
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="inline-flex items-center gap-3 border-2 border-white/30 hover:border-white text-white px-10 py-5 text-lg font-semibold transition-all"
            >
              {t.cta.secondaryBtn}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}