"use client";

import Link from "next/link";
import { useState } from "react";

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

export default function DepositsPaymentsPage({ params }: Props) {
  const isRTL = params.lang === "ar";
  const dir = isRTL ? "rtl" : "ltr";
  const [activeTab, setActiveTab] = useState<
    "payments" | "invoicing" | "deposits" | "integrations"
  >("payments");
  const [feeAmount, setFeeAmount] = useState<string>("1000");
  const [feeCurrency, setFeeCurrency] = useState<
    "USD" | "SAR" | "AED" | "KWD" | "QAR" | "BHD" | "OMR"
  >("USD");
  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);

  const content = {
    ar: {
      hero: {
        badge: "حلول دفع متقدمة",
        title: "المدفوعات",
        titleAccent: "والفوترة",
        subtitle: "ودائع، روابط دفع، فواتير، مبالغ مستردة",
        description:
          "نظام دفع وفوترة متكامل يدعم جميع طرق الدفع العالمية والمحلية مع أتمتة كاملة للعمليات المالية",
        cta: "ابدأ الآن",
        demo: "شاهد العرض",
        stats: [
          { value: "500M+", label: "ريال معالج" },
          { value: "<2s", label: "زمن المعالجة" },
          { value: "99.9%", label: "وقت التشغيل" },
        ],
      },
      capabilities: {
        title: "إمكانيات",
        titleAccent: "قوية",
        items: [
          {
            num: "01",
            title: "معالجة المدفوعات",
            desc: "قبول جميع أنواع البطاقات والمحافظ الرقمية بسلاسة تامة",
            highlights: ["Visa/Mastercard", "Apple Pay", "Google Pay", "مدى"],
          },
          {
            num: "02",
            title: "روابط الدفع الذكية",
            desc: "إنشاء روابط دفع آمنة قابلة للمشاركة عبر WhatsApp",
            highlights: [
              "روابط مخصصة",
              "دفعات متكررة",
              "تتبع فوري",
              "QR codes",
            ],
          },
          {
            num: "03",
            title: "الفواتير الاحترافية",
            desc: "إصدار وإرسال الفواتير تلقائياً مع تذكيرات ذكية",
            highlights: [
              "قوالب احترافية",
              "تذكيرات تلقائية",
              "متابعة الدفع",
              "تقارير ضريبية",
            ],
          },
          {
            num: "04",
            title: "إدارة الودائع",
            desc: "تحصيل ودائع مقدمة للحجوزات وحماية من الإلغاء",
            highlights: [
              "ودائع مرنة",
              "استرداد تلقائي",
              "سياسات مخصصة",
              "حماية كاملة",
            ],
          },
          {
            num: "05",
            title: "المبالغ المستردة",
            desc: "معالجة الاستردادات بسلاسة مع إشعارات فورية",
            highlights: [
              "استرداد فوري",
              "استرداد جزئي",
              "تتبع الحالة",
              "إشعارات تلقائية",
            ],
          },
          {
            num: "06",
            title: "التقارير المالية",
            desc: "تحليلات مفصلة للمدفوعات والإيرادات في الوقت الفعلي",
            highlights: [
              "لوحة تحكم حية",
              "تقارير مخصصة",
              "تصدير البيانات",
              "توقعات الإيرادات",
            ],
          },
        ],
      },
      gateways: {
        title: "بوابات الدفع",
        subtitle: "Stripe كمعيار افتراضي لجميع دول الخليج",
        primary: {
          title: "البوابة الرئيسية",
          items: [
            {
              name: "Stripe",
              desc: "معالج دفع عالمي موثوق",
              features: ["Cards", "Apple Pay", "Google Pay", "Link"],
            },
            {
              name: "PayPal",
              desc: "محفظة رقمية عالمية",
              features: ["Express", "Checkout", "Subscriptions"],
            },
            {
              name: "Square",
              desc: "حلول نقاط البيع",
              features: ["POS", "Online", "Invoices"],
            },
            {
              name: "Razorpay",
              desc: "بوابة آسيوية",
              features: ["UPI", "Cards", "Banking"],
            },
          ],
        },
        local: {
          title: "بوابات محلية إضافية",
          items: [
            { name: "مدى", region: "السعودية", icon: "🇸🇦" },
            { name: "Tap", region: "الخليج", icon: "👆" },
            { name: "PayTabs", region: "الخليج", icon: "📱" },
            { name: "Telr", region: "الإمارات", icon: "💠" },
            { name: "MyFatoorah", region: "الكويت", icon: "🧾" },
            { name: "PayFort", region: "أمازون", icon: "🏰" },
          ],
        },
        wallets: [
          "Apple Pay",
          "Google Pay",
          "Samsung Pay",
          "STC Pay",
          "Mada Pay",
          "SADAD",
        ],
      },
      coverage: {
        title: "تغطية خليجية",
        titleAccent: "شاملة",
        subtitle: "نعمل من قطر لخدمة جميع دول مجلس التعاون",
        countries: [
          { name: "قطر", flag: "🇶🇦", isHQ: true },
          { name: "السعودية", flag: "🇸🇦" },
          { name: "الإمارات", flag: "🇦🇪" },
          { name: "الكويت", flag: "🇰🇼" },
          { name: "البحرين", flag: "🇧🇭" },
          { name: "عُمان", flag: "🇴🇲" },
        ],
      },
      security: {
        title: "أمان",
        titleAccent: "مؤسسي",
        items: [
          {
            icon: "🔐",
            title: "تشفير PCI DSS",
            desc: "معايير أمان الدفع العالمية",
          },
          {
            icon: "🛡️",
            title: "حماية من الاحتيال",
            desc: "كشف العمليات المشبوهة",
          },
          { icon: "🔑", title: "توثيق ثنائي", desc: "حماية إضافية للحسابات" },
          { icon: "📋", title: "متوافق GDPR", desc: "حماية بيانات العملاء" },
        ],
      },
      calculator: {
        title: "حاسبة رسوم",
        titleAccent: "Stripe",
        selectCurrency: "اختر العملة",
        enterAmount: "أدخل مبلغ الفاتورة",
        stripeFee: "رسوم Stripe",
        youReceive: "ستتلقى",
        shouldAsk: "يجب أن تطلب",
        afterFees: "بعد الرسوم",
        fullAmount: "للحصول على المبلغ الكامل",
      },
      testimonials: {
        title: "شهادات",
        titleAccent: "العملاء",
        items: [
          {
            quote:
              "نظام المدفوعات من Mawidi غيّر طريقة عملنا تماماً. أصبحت المدفوعات أسرع والفواتير أكثر احترافية.",
            author: "د. أحمد الشمري",
            role: "مدير عيادة النخبة الطبية",
            location: "الرياض",
          },
          {
            quote:
              "الودائع المقدمة قللت من نسبة عدم الحضور بشكل كبير. والتكامل مع WhatsApp ممتاز.",
            author: "سارة المنصور",
            role: "مديرة مركز جمال",
            location: "دبي",
          },
          {
            quote: "الدعم الفني ممتاز والنظام سهل الاستخدام. أنصح به بشدة.",
            author: "محمد العتيبي",
            role: "صاحب مركز طبي",
            location: "الكويت",
          },
        ],
      },
      faq: {
        title: "أسئلة",
        titleAccent: "شائعة",
        items: [
          {
            q: "ما هي طرق الدفع المدعومة؟",
            a: "ندعم جميع البطاقات الائتمانية، Apple Pay، Google Pay، مدى، والعديد من بوابات الدفع المحلية في دول الخليج.",
          },
          {
            q: "هل يمكن استرداد الودائع؟",
            a: "نعم، يمكنك تحديد سياسات استرداد مرنة حسب احتياجاتك، مع إمكانية الاسترداد الكامل أو الجزئي.",
          },
          {
            q: "كم تستغرق معالجة المدفوعات؟",
            a: "المدفوعات الإلكترونية فورية، وتصل الأموال لحسابك البنكي خلال 1-2 يوم عمل.",
          },
          {
            q: "هل النظام آمن؟",
            a: "نعم، نحن متوافقون مع معايير PCI DSS ونستخدم تشفير 256-bit لحماية جميع البيانات.",
          },
        ],
      },
      cta: {
        title: "ابدأ قبول المدفوعات",
        titleAccent: "اليوم",
        subtitle: "انضم لأكثر من 1000 عميل يثقون بنا",
        primaryBtn: "ابدأ مجاناً",
        secondaryBtn: "احجز عرض",
      },
      tabs: {
        payments: "المدفوعات",
        invoicing: "الفوترة",
        deposits: "الودائع",
        integrations: "التكاملات",
      },
    },
    en: {
      hero: {
        badge: "Advanced Payment Solutions",
        title: "Payments",
        titleAccent: "& Invoicing",
        subtitle: "Deposits, pay links, invoices, refunds",
        description:
          "Complete payment and invoicing system supporting all global and local payment methods with full financial automation",
        cta: "Get Started",
        demo: "Watch Demo",
        stats: [
          { value: "500M+", label: "SAR Processed" },
          { value: "<2s", label: "Processing Time" },
          { value: "99.9%", label: "Uptime" },
        ],
      },
      capabilities: {
        title: "Powerful",
        titleAccent: "Capabilities",
        items: [
          {
            num: "01",
            title: "Payment Processing",
            desc: "Accept all card types and digital wallets seamlessly",
            highlights: ["Visa/Mastercard", "Apple Pay", "Google Pay", "Mada"],
          },
          {
            num: "02",
            title: "Smart Payment Links",
            desc: "Create secure shareable payment links via WhatsApp",
            highlights: [
              "Custom links",
              "Recurring payments",
              "Instant tracking",
              "QR codes",
            ],
          },
          {
            num: "03",
            title: "Professional Invoicing",
            desc: "Issue and send invoices automatically with smart reminders",
            highlights: [
              "Pro templates",
              "Auto reminders",
              "Payment tracking",
              "Tax reports",
            ],
          },
          {
            num: "04",
            title: "Deposit Management",
            desc: "Collect advance deposits for bookings with cancellation protection",
            highlights: [
              "Flexible deposits",
              "Auto refunds",
              "Custom policies",
              "Full protection",
            ],
          },
          {
            num: "05",
            title: "Refunds Processing",
            desc: "Process refunds seamlessly with instant notifications",
            highlights: [
              "Instant refunds",
              "Partial refunds",
              "Status tracking",
              "Auto notifications",
            ],
          },
          {
            num: "06",
            title: "Financial Reports",
            desc: "Detailed real-time analytics for payments and revenue",
            highlights: [
              "Live dashboard",
              "Custom reports",
              "Data export",
              "Revenue forecasts",
            ],
          },
        ],
      },
      gateways: {
        title: "Payment Gateways",
        subtitle: "Stripe as default for all GCC countries",
        primary: {
          title: "Primary Gateways",
          items: [
            {
              name: "Stripe",
              desc: "Trusted global processor",
              features: ["Cards", "Apple Pay", "Google Pay", "Link"],
            },
            {
              name: "PayPal",
              desc: "Global digital wallet",
              features: ["Express", "Checkout", "Subscriptions"],
            },
            {
              name: "Square",
              desc: "POS solutions",
              features: ["POS", "Online", "Invoices"],
            },
            {
              name: "Razorpay",
              desc: "Asian gateway",
              features: ["UPI", "Cards", "Banking"],
            },
          ],
        },
        local: {
          title: "Additional Local Gateways",
          items: [
            { name: "Mada", region: "Saudi", icon: "🇸🇦" },
            { name: "Tap", region: "Gulf", icon: "👆" },
            { name: "PayTabs", region: "GCC", icon: "📱" },
            { name: "Telr", region: "UAE", icon: "💠" },
            { name: "MyFatoorah", region: "Kuwait", icon: "🧾" },
            { name: "PayFort", region: "Amazon", icon: "🏰" },
          ],
        },
        wallets: [
          "Apple Pay",
          "Google Pay",
          "Samsung Pay",
          "STC Pay",
          "Mada Pay",
          "SADAD",
        ],
      },
      coverage: {
        title: "Complete GCC",
        titleAccent: "Coverage",
        subtitle: "Operating from Qatar to serve all GCC countries",
        countries: [
          { name: "Qatar", flag: "🇶🇦", isHQ: true },
          { name: "Saudi Arabia", flag: "🇸🇦" },
          { name: "UAE", flag: "🇦🇪" },
          { name: "Kuwait", flag: "🇰🇼" },
          { name: "Bahrain", flag: "🇧🇭" },
          { name: "Oman", flag: "🇴🇲" },
        ],
      },
      security: {
        title: "Enterprise",
        titleAccent: "Security",
        items: [
          {
            icon: "🔐",
            title: "PCI DSS Encryption",
            desc: "Global payment security standards",
          },
          {
            icon: "🛡️",
            title: "Fraud Protection",
            desc: "Detect suspicious transactions",
          },
          {
            icon: "🔑",
            title: "Two-Factor Auth",
            desc: "Extra account protection",
          },
          {
            icon: "📋",
            title: "GDPR Compliant",
            desc: "Customer data protection",
          },
        ],
      },
      calculator: {
        title: "Stripe Fee",
        titleAccent: "Calculator",
        selectCurrency: "Select Currency",
        enterAmount: "Enter invoice amount",
        stripeFee: "Stripe Fee",
        youReceive: "You Receive",
        shouldAsk: "You Should Ask",
        afterFees: "After fees",
        fullAmount: "To receive full amount",
      },
      testimonials: {
        title: "Client",
        titleAccent: "Testimonials",
        items: [
          {
            quote:
              "Mawidi's payment system completely transformed our operations. Payments are faster and invoices more professional.",
            author: "Dr. Ahmed Al-Shamari",
            role: "Elite Medical Clinic Director",
            location: "Riyadh",
          },
          {
            quote:
              "Advance deposits significantly reduced no-shows. WhatsApp integration is excellent.",
            author: "Sara Al-Mansour",
            role: "Beauty Center Manager",
            location: "Dubai",
          },
          {
            quote:
              "Excellent technical support and easy-to-use system. Highly recommended.",
            author: "Mohammed Al-Otaibi",
            role: "Medical Center Owner",
            location: "Kuwait",
          },
        ],
      },
      faq: {
        title: "Frequently",
        titleAccent: "Asked Questions",
        items: [
          {
            q: "What payment methods are supported?",
            a: "We support all credit cards, Apple Pay, Google Pay, Mada, and many local payment gateways in GCC countries.",
          },
          {
            q: "Can deposits be refunded?",
            a: "Yes, you can set flexible refund policies according to your needs, with full or partial refund options.",
          },
          {
            q: "How long does payment processing take?",
            a: "Electronic payments are instant, and funds reach your bank account within 1-2 business days.",
          },
          {
            q: "Is the system secure?",
            a: "Yes, we are PCI DSS compliant and use 256-bit encryption to protect all data.",
          },
        ],
      },
      cta: {
        title: "Start Accepting Payments",
        titleAccent: "Today",
        subtitle: "Join 1000+ clients who trust us",
        primaryBtn: "Start Free",
        secondaryBtn: "Book Demo",
      },
      tabs: {
        payments: "Payments",
        invoicing: "Invoicing",
        deposits: "Deposits",
        integrations: "Integrations",
      },
    },
  };

  const t = content[params.lang];

  // Fee calculation helper
  const calculateFees = () => {
    const amount = parseFloat(feeAmount) || 0;
    const fixedFees: Record<string, number> = {
      USD: 0.3,
      SAR: 1.13,
      AED: 1.1,
      KWD: 0.09,
      QAR: 1.09,
      BHD: 0.11,
      OMR: 0.12,
    };
    const symbols: Record<string, string> = {
      USD: "$",
      SAR: "﷼",
      AED: "د.إ",
      KWD: "د.ك",
      QAR: "ر.ق",
      BHD: "د.ب",
      OMR: "ر.ع",
    };
    const percentageFee = 0.029;
    const fixedFee = fixedFees[feeCurrency];
    const stripeFee = amount * percentageFee + fixedFee;
    const youReceive = amount - stripeFee;
    const shouldAskFor = amount / (1 - percentageFee) + fixedFee;
    return {
      stripeFee,
      youReceive,
      shouldAskFor,
      symbol: symbols[feeCurrency],
      fixedFee,
    };
  };

  const fees = calculateFees();

  return (
    <main dir={dir} className="relative overflow-hidden">
      {/* ============================================
          SECTION 1: HERO - Asymmetric Split Layout
          ============================================ */}
      <section className="relative min-h-[90vh] flex items-center">
        {/* Atmospheric Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-stone-50 via-white to-brand-green/5 dark:from-slate-950 dark:via-slate-900 dark:to-brand-green/20" />

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

        {/* Accent Blobs - Emerald tones */}
        <div className="absolute top-20 -right-40 w-[600px] h-[600px] rounded-full bg-gradient-to-br from-brand-green/20 via-teal-100/30 to-transparent blur-3xl dark:from-brand-green/20 dark:via-teal-900/10" />
        <div className="absolute -bottom-20 -left-40 w-[500px] h-[500px] rounded-full bg-gradient-to-tr from-stone-200/50 via-brand-green/10 to-transparent blur-3xl dark:from-slate-800/30" />

        <div className="relative z-10 w-full max-w-7xl mx-auto px-6 py-20 lg:py-32">
          <div className="grid lg:grid-cols-5 gap-12 lg:gap-20 items-center">
            {/* Left Content - 3 columns */}
            <div
              className={`lg:col-span-3 space-y-8 ${isRTL ? "lg:order-2" : ""}`}
            >
              {/* Badge */}
              <div className="inline-flex items-center gap-3 px-4 py-2 rounded-none bg-brand-green/10 dark:bg-brand-green/30 border-l-4 border-brand-green">
                <span className="w-2 h-2 rounded-full bg-brand-green animate-pulse" />
                <span className="text-sm font-semibold tracking-wide text-brand-greenHover dark:text-brand-green/30 uppercase">
                  {t.hero.badge}
                </span>
              </div>

              {/* Massive Typography */}
              <h1 className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight text-stone-900 dark:text-white leading-[0.9]">
                {t.hero.title}
                <br />
                <span className="text-brand-green dark:text-brand-green">
                  {t.hero.titleAccent}
                </span>
              </h1>

              {/* Subtitle with editorial styling */}
              <p className="text-xl lg:text-2xl font-medium text-stone-600 dark:text-stone-300 max-w-xl leading-relaxed">
                {t.hero.subtitle}
                <span className="block mt-2 text-base text-stone-500 dark:text-stone-400">
                  Stripe • Apple Pay • Google Pay • {isRTL ? "مدى" : "Mada"}
                </span>
              </p>

              {/* CTAs with sharp corners */}
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group inline-flex items-center gap-3 px-8 py-4 bg-brand-green hover:bg-brand-greenHover text-white font-bold text-lg transition-all duration-300 hover:translate-x-1"
                >
                  {t.hero.cta}
                  <span className="transition-transform group-hover:translate-x-1">
                    →
                  </span>
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="group inline-flex items-center gap-3 px-8 py-4 border-2 border-stone-300 dark:border-stone-600 hover:border-brand-green text-stone-700 dark:text-stone-200 font-bold text-lg transition-all duration-300"
                >
                  {t.hero.demo}
                  <span className="opacity-60 group-hover:opacity-100">▶</span>
                </Link>
              </div>
            </div>

            {/* Right Side - Stats Card */}
            <div className={`lg:col-span-2 ${isRTL ? "lg:order-1" : ""}`}>
              <div className="relative">
                {/* Card Glow Effect */}
                <div className="absolute -inset-4 bg-gradient-to-br from-brand-green/20 via-teal-500/10 to-transparent blur-2xl" />

                {/* Stats Card */}
                <div className="relative bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border border-stone-200/50 dark:border-slate-700/50 p-8 lg:p-10 shadow-2xl">
                  <div className="space-y-8">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-brand-green flex items-center justify-center">
                        <span className="text-2xl text-white">💳</span>
                      </div>
                      <div>
                        <h3 className="text-lg font-bold text-stone-900 dark:text-white">
                          {isRTL ? "نتائج مثبتة" : "Proven Results"}
                        </h3>
                        <p className="text-sm text-stone-500 dark:text-stone-400">
                          {isRTL ? "أرقام حقيقية" : "Real numbers"}
                        </p>
                      </div>
                    </div>

                    {/* Stats */}
                    <div className="space-y-6">
                      {t.hero.stats.map((stat, i) => (
                        <div
                          key={i}
                          className="flex items-end justify-between border-b border-stone-200 dark:border-slate-700 pb-4 last:border-0"
                        >
                          <span className="text-sm font-medium text-stone-600 dark:text-stone-400 uppercase tracking-wide">
                            {stat.label}
                          </span>
                          <span className="text-3xl lg:text-4xl font-black text-brand-green dark:text-brand-green font-mono">
                            {stat.value}
                          </span>
                        </div>
                      ))}
                    </div>

                    {/* Trust Indicators */}
                    <div className="pt-4 border-t border-stone-200 dark:border-slate-700">
                      <div className="flex items-center gap-2 text-sm text-stone-500 dark:text-stone-400">
                        <span className="text-brand-green">✓</span>
                        <span>{isRTL ? "آمن PCI DSS" : "PCI DSS Secure"}</span>
                        <span className="mx-2">•</span>
                        <span className="text-brand-green">✓</span>
                        <span>{isRTL ? "GDPR" : "GDPR Compliant"}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 2: CAPABILITIES - Editorial Numbered Grid
          ============================================ */}
      <section className="relative py-32 bg-stone-100/50 dark:bg-slate-900/50">
        {/* Subtle Grid */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage: `linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative z-10 max-w-7xl mx-auto px-6">
          {/* Section Header - Editorial Style */}
          <div className="max-w-3xl mb-20">
            <span className="text-sm font-bold tracking-[0.3em] text-brand-green dark:text-brand-green uppercase mb-4 block">
              {isRTL ? "المميزات" : "Features"}
            </span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-white tracking-tight">
              {t.capabilities.title}{" "}
              <span className="text-brand-green dark:text-brand-green">
                {t.capabilities.titleAccent}
              </span>
            </h2>
          </div>

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

                <div className="relative z-10 pt-12">
                  <h3 className="text-xl lg:text-2xl font-bold text-stone-900 dark:text-white mb-4 group-hover:text-brand-greenHover dark:group-hover:text-brand-green transition-colors">
                    {item.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6 leading-relaxed">
                    {item.desc}
                  </p>

                  {/* Tags */}
                  <div className="flex flex-wrap gap-2">
                    {item.highlights.map((tag, idx) => (
                      <span
                        key={idx}
                        className="px-3 py-1 text-xs font-semibold bg-stone-100 dark:bg-slate-800 text-stone-600 dark:text-stone-400 group-hover:bg-brand-green/10 dark:group-hover:bg-brand-green/30 group-hover:text-brand-greenHover dark:group-hover:text-brand-green transition-colors"
                      >
                        {tag}
                      </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>

      {/* ============================================
          SECTION 3: PAYMENT GATEWAYS - Magazine Layout
          ============================================ */}
      <section className="relative py-32">
        {/* Background */}
        <div className="absolute inset-0 bg-gradient-to-b from-white via-brand-green/5 to-white dark:from-slate-950 dark:via-brand-green/10 dark:to-slate-950" />

        <div className="relative z-10 max-w-7xl mx-auto px-6">
          {/* Header */}
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-white tracking-tight mb-6">
              {t.gateways.title}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-400">
              {t.gateways.subtitle}
            </p>
          </div>

          {/* Primary Gateways - Large Cards */}
          <div className="mb-16">
            <h3 className="text-sm font-bold tracking-[0.3em] text-brand-green dark:text-brand-green uppercase mb-8">
              {t.gateways.primary.title}
            </h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {t.gateways.primary.items.map((item, i) => (
                <div
                  key={i}
                  className="group relative bg-white dark:bg-slate-900 p-8 border border-stone-200 dark:border-slate-700 hover:border-brand-green transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
                >
                  {/* Gateway Logo/Name */}
                  <div className="h-16 flex items-center justify-center mb-6">
                    {item.name === "Stripe" && (
                      <span
                        className="text-4xl font-black"
                        style={{ color: "#635BFF" }}
                      >
                        stripe
                      </span>
                    )}
                    {item.name === "PayPal" && (
                      <div className="flex">
                        <span
                          className="text-3xl font-bold"
                          style={{ color: "#003087" }}
                        >
                          Pay
                        </span>
                        <span
                          className="text-3xl font-bold"
                          style={{ color: "#009CDE" }}
                        >
                          Pal
                        </span>
                      </div>
                    )}
                    {item.name === "Square" && (
                      <div className="flex items-center gap-2">
                        <div className="w-8 h-8 bg-black" />
                        <span className="text-2xl font-bold text-stone-800 dark:text-white">
                          Square
                        </span>
                      </div>
                    )}
                    {item.name === "Razorpay" && (
                      <span
                        className="text-3xl font-bold"
                        style={{ color: "#3395FF" }}
                      >
                        Razorpay
                      </span>
                    )}
                  </div>

                  <p className="text-sm text-stone-600 dark:text-stone-400 mb-4 text-center">
                    {item.desc}
                  </p>

                  <div className="flex flex-wrap justify-center gap-1">
                    {item.features.map((f, idx) => (
                      <span
                        key={idx}
                        className="px-2 py-1 text-xs bg-stone-100 dark:bg-slate-800 text-stone-500 dark:text-stone-400"
                      >
                        {f}
                      </span>
                    ))}
                  </div>

                  {/* Default Badge for Stripe */}
                  {item.name === "Stripe" && (
                    <div className="absolute -top-3 -right-3 px-3 py-1 bg-brand-green text-white text-xs font-bold">
                      {isRTL ? "افتراضي" : "DEFAULT"}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Local Gateways - Compact Grid */}
          <div className="mb-16">
            <h3 className="text-sm font-bold tracking-[0.3em] text-brand-green dark:text-brand-green uppercase mb-8">
              {t.gateways.local.title}
            </h3>
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              {t.gateways.local.items.map((item, i) => (
                <div
                  key={i}
                  className="group p-4 bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-700 hover:border-brand-green transition-all text-center"
                >
                  <span className="text-2xl block mb-2">{item.icon}</span>
                  <span className="font-bold text-stone-900 dark:text-white text-sm block">
                    {item.name}
                  </span>
                  <span className="text-xs text-stone-500 dark:text-stone-400">
                    {item.region}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Digital Wallets - Horizontal Scroll */}
          <div>
            <h3 className="text-sm font-bold tracking-[0.3em] text-brand-green dark:text-brand-green uppercase mb-8 text-center">
              {isRTL ? "المحافظ الرقمية" : "Digital Wallets"}
            </h3>
            <div className="flex flex-wrap justify-center gap-4">
              {t.gateways.wallets.map((wallet, i) => (
                <div
                  key={i}
                  className="px-6 py-3 bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-700 font-semibold text-stone-700 dark:text-stone-300 hover:border-brand-green hover:text-brand-green dark:hover:text-brand-green transition-all"
                >
                  {wallet}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 4: GCC COVERAGE - Dark with Map Feel
          ============================================ */}
      <section className="relative py-32 bg-slate-950 text-white overflow-hidden">
        {/* Atmospheric Elements */}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-brand-green/10 rounded-full blur-[100px]" />
        <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-teal-500/10 rounded-full blur-[80px]" />

        <div className="relative z-10 max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left - Text */}
            <div className={isRTL ? "lg:order-2" : ""}>
              <h2 className="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight mb-6">
                {t.coverage.title}{" "}
                <span className="text-brand-green">
                  {t.coverage.titleAccent}
                </span>
              </h2>
              <p className="text-xl text-stone-400 mb-8 leading-relaxed">
                {t.coverage.subtitle}
              </p>

              {/* HQ Highlight */}
              <div className="inline-flex items-center gap-4 px-6 py-4 bg-brand-green/10 border border-brand-green/30">
                <span className="text-4xl">🇶🇦</span>
                <div>
                  <span className="font-bold text-brand-green block">
                    {isRTL ? "المقر الرئيسي" : "Headquarters"}
                  </span>
                  <span className="text-stone-400">
                    {isRTL ? "الدوحة، قطر" : "Doha, Qatar"}
                  </span>
                </div>
              </div>
            </div>

            {/* Right - Country Grid */}
            <div className={isRTL ? "lg:order-1" : ""}>
              <div className="grid grid-cols-3 gap-4">
                {t.coverage.countries.map((country, i) => (
                  <div
                    key={i}
                    className={`p-6 text-center transition-all hover:scale-105 ${
                      country.isHQ
                        ? "bg-brand-green text-white col-span-3 md:col-span-1"
                        : "bg-slate-900 border border-slate-800 hover:border-brand-green/50"
                    }`}
                  >
                    <span className="text-4xl block mb-2">{country.flag}</span>
                    <span
                      className={`font-semibold block ${country.isHQ ? "text-white" : "text-stone-300"}`}
                    >
                      {country.name}
                    </span>
                    <span
                      className={`text-xs ${country.isHQ ? "text-brand-green/10" : "text-brand-green"}`}
                    >
                      Stripe ✓
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 5: STRIPE FEE CALCULATOR - Interactive
          ============================================ */}
      <section className="relative py-32 bg-gradient-to-br from-brand-green via-brand-greenHover to-teal-800">
        {/* Pattern Overlay */}
        <div
          className="absolute inset-0 opacity-10"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, white 1px, transparent 0)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative z-10 max-w-4xl mx-auto px-6">
          {/* Header */}
          <div className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-black text-white tracking-tight mb-4">
              {t.calculator.title}{" "}
              <span className="text-brand-green/20">
                {t.calculator.titleAccent}
              </span>
            </h2>
          </div>

          {/* Calculator Card */}
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 p-8 lg:p-12">
            {/* Currency Selector */}
            <div className="mb-8">
              <label className="block text-sm font-bold text-brand-green/10 mb-4 tracking-wide uppercase">
                {t.calculator.selectCurrency}
              </label>
              <div className="flex flex-wrap gap-2">
                {["USD", "SAR", "AED", "KWD", "QAR", "BHD", "OMR"].map(
                  (curr) => (
                    <button
                      key={curr}
                      onClick={() => setFeeCurrency(curr as typeof feeCurrency)}
                      className={`px-5 py-3 font-bold transition-all ${
                        feeCurrency === curr
                          ? "bg-white text-brand-greenHover"
                          : "bg-white/10 text-white hover:bg-white/20"
                      }`}
                    >
                      {curr}
                    </button>
                  ),
                )}
              </div>
            </div>

            {/* Amount Input */}
            <div className="mb-10">
              <label className="block text-sm font-bold text-brand-green/10 mb-4 tracking-wide uppercase">
                {t.calculator.enterAmount}
              </label>
              <div className="relative">
                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-2xl text-brand-green/20">
                  {fees.symbol}
                </span>
                <input
                  type="number"
                  value={feeAmount}
                  onChange={(e) => setFeeAmount(e.target.value)}
                  className="w-full pl-14 pr-6 py-5 bg-white/10 border-2 border-white/30 text-white text-3xl font-bold placeholder-white/40 focus:outline-none focus:border-white transition-colors"
                  placeholder="1000"
                />
              </div>
            </div>

            {/* Results Grid */}
            <div className="grid md:grid-cols-3 gap-6">
              <div className="bg-red-500/20 p-6 text-center">
                <span className="block text-sm text-red-200 mb-2">
                  {t.calculator.stripeFee}
                </span>
                <span className="block text-3xl lg:text-4xl font-black text-red-300">
                  {fees.symbol}
                  {fees.stripeFee.toFixed(2)}
                </span>
                <span className="block text-xs text-red-200/70 mt-2">
                  2.9% + {fees.symbol}
                  {fees.fixedFee}
                </span>
              </div>

              <div className="bg-brand-green/30 p-6 text-center">
                <span className="block text-sm text-brand-green/20 mb-2">
                  {t.calculator.youReceive}
                </span>
                <span className="block text-3xl lg:text-4xl font-black text-white">
                  {fees.symbol}
                  {fees.youReceive.toFixed(2)}
                </span>
                <span className="block text-xs text-white/70 mt-2">
                  {t.calculator.afterFees}
                </span>
              </div>

              <div className="bg-blue-500/20 p-6 text-center">
                <span className="block text-sm text-blue-200 mb-2">
                  {t.calculator.shouldAsk}
                </span>
                <span className="block text-3xl lg:text-4xl font-black text-blue-300">
                  {fees.symbol}
                  {fees.shouldAskFor.toFixed(2)}
                </span>
                <span className="block text-xs text-blue-200/70 mt-2">
                  {t.calculator.fullAmount}
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 6: SECURITY - Minimal Cards
          ============================================ */}
      <section className="relative py-32 bg-stone-50 dark:bg-slate-950">
        <div className="max-w-7xl mx-auto px-6">
          {/* Header */}
          <div className="max-w-3xl mb-16">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-white tracking-tight">
              {t.security.title}{" "}
              <span className="text-brand-green dark:text-brand-green">
                {t.security.titleAccent}
              </span>
            </h2>
          </div>

          {/* Security Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-stone-200 dark:bg-slate-800">
            {t.security.items.map((item, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-900 p-8 group hover:bg-brand-green/5 dark:hover:bg-brand-green/10 transition-colors"
              >
                <span className="text-4xl block mb-6">{item.icon}</span>
                <h3 className="text-lg font-bold text-stone-900 dark:text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-sm text-stone-600 dark:text-stone-400">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 7: TESTIMONIALS - Editorial Quotes
          ============================================ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-6">
          {/* Header */}
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-white tracking-tight">
              {t.testimonials.title}{" "}
              <span className="text-brand-green dark:text-brand-green">
                {t.testimonials.titleAccent}
              </span>
            </h2>
          </div>

          {/* Testimonials Grid */}
          <div className="grid md:grid-cols-3 gap-8">
            {t.testimonials.items.map((item, i) => (
              <blockquote key={i} className="relative group">
                {/* Large Quote Mark */}
                <span className="absolute -top-6 -left-2 text-[120px] font-serif text-brand-green/10 dark:text-brand-green/30 leading-none select-none">
                  "
                </span>

                <div className="relative bg-white dark:bg-slate-900 p-8 border border-stone-200 dark:border-slate-700 group-hover:border-brand-green transition-colors">
                  {/* Stars */}
                  <div className="flex gap-1 mb-6">
                    {[...Array(5)].map((_, idx) => (
                      <span key={idx} className="text-amber-400">
                        ★
                      </span>
                    ))}
                  </div>

                  <p className="text-stone-700 dark:text-stone-300 leading-relaxed mb-8 italic">
                    "{item.quote}"
                  </p>

                  <footer className="border-t border-stone-200 dark:border-slate-700 pt-6">
                    <cite className="not-italic">
                      <span className="block font-bold text-stone-900 dark:text-white">
                        {item.author}
                      </span>
                      <span className="block text-sm text-stone-600 dark:text-stone-400">
                        {item.role}
                      </span>
                      <span className="block text-sm text-brand-green dark:text-brand-green">
                        {item.location}
                      </span>
                    </cite>
                  </footer>
                </div>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 8: FAQ - Clean Accordion
          ============================================ */}
      <section className="relative py-32 bg-stone-100 dark:bg-slate-900">
        <div className="max-w-3xl mx-auto px-6">
          {/* Header */}
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white tracking-tight">
              {t.faq.title}{" "}
              <span className="text-brand-green dark:text-brand-green">
                {t.faq.titleAccent}
              </span>
            </h2>
          </div>

          {/* FAQ Items */}
          <div className="space-y-4">
            {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 flex items-center justify-between p-6 text-left"
                >
                  <span className="font-bold text-stone-900 dark:text-white pr-8">
                    {item.q}
                  </span>
                  <span
                    className={`text-brand-green transition-transform ${expandedFaq === i ? "rotate-180" : ""}`}
                  >
                    ▼
                  </span>
                </button>
                {expandedFaq === i && (
                  <div className="px-6 pb-6">
                    <p className="text-stone-600 dark:text-stone-400 leading-relaxed">
                      {item.a}
                    </p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================
          SECTION 9: FINAL CTA - Bold & Minimal
          ============================================ */}
      <section className="relative py-32 bg-slate-950 text-white overflow-hidden">
        {/* Geometric Accent */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-brand-green opacity-20 transform skew-x-12 translate-x-1/4" />
        <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-brand-green opacity-10 transform -skew-x-12 -translate-x-1/4" />

        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl md:text-5xl lg:text-7xl font-black tracking-tight mb-6">
            {t.cta.title}
            <br />
            <span className="text-brand-green">{t.cta.titleAccent}</span>
          </h2>

          <p className="text-xl text-stone-400 mb-12 max-w-2xl mx-auto">
            {t.cta.subtitle}
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={`/${params.lang}/signup`}
              className="group inline-flex items-center justify-center gap-3 px-10 py-5 bg-brand-green hover:bg-brand-green text-slate-950 font-bold text-lg transition-all"
            >
              {t.cta.primaryBtn}
              <span className="transition-transform group-hover:translate-x-1">
                →
              </span>
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="group inline-flex items-center justify-center gap-3 px-10 py-5 border-2 border-stone-600 hover:border-brand-green text-white font-bold text-lg transition-all"
            >
              {t.cta.secondaryBtn}
              <span className="opacity-60 group-hover:opacity-100">↗</span>
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}