"use client";

import Link from "next/link";
import { useState, useEffect } from "react";
import type { Lang } from "@/lib/config";

interface Props {
  params: {
    lang: Lang;
  };
}

export default function GrowthCRMPage({ params }: Props) {
  const isRTL = params.lang === "ar";
  const [activeSection, setActiveSection] = useState("lead-capture");
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const content = {
    ar: {
      hero: {
        tag: "النمو وإدارة علاقات العملاء",
        title: "حوّل المحادثات إلى إيرادات",
        subtitle:
          "اجذب العملاء المحتملين، تتبع الاهتمامات، وحوّل كل تفاعل إلى فرصة—مع ذكاء اصطناعي يبيع فعلاً.",
        cta1: "ابدأ مجاناً",
        cta2: "احجز عرض",
        stats: [
          { value: "2.3×", label: "زيادة الحجوزات المتكررة" },
          { value: "70%", label: "تقليل عبء المكالمات" },
          { value: "18.5%", label: "معدل التحويل" },
        ],
      },
      sections: {
        leadCapture: "جذب العملاء",
        profiles: "الملفات",
        aiSales: "مساعد المبيعات",
        voiceAgents: "وكلاء الصوت",
        social: "التواصل الاجتماعي",
        contentSeo: "المحتوى",
        nurture: "الرعاية",
        quotes: "العروض",
        reviews: "التقييمات",
        analytics: "التحليلات",
        integrations: "التكاملات",
        compliance: "الامتثال",
      },
      leadCapture: {
        num: "01",
        title: "جذب العملاء المحتملين",
        subtitle: "اجمع العملاء من كل مصدر—الويب، الدردشة، الإعلانات، ورموز QR",
        features: [
          {
            num: "01",
            title: "نماذج الويب",
            desc: "نماذج قابلة للتضمين مع التحقق المزدوج والإثراء التلقائي",
            items: [
              "بناء نماذج بدون كود",
              "كشف الموقع التلقائي",
              "التقاط اللغة المفضلة",
              "التحقق من الموافقة",
            ],
          },
          {
            num: "02",
            title: "WhatsApp وSMS",
            desc: "حوّل كل محادثة إلى فرصة محتملة",
            items: [
              "إنشاء تلقائي للعملاء",
              "تصنيف النية",
              "تسجيل النتائج",
              "وضع علامات ذكية",
            ],
          },
          {
            num: "03",
            title: "إعلانات التواصل",
            desc: "اتصال مباشر بإعلانات Facebook وInstagram",
            items: [
              "مزامنة إعلانات Meta",
              "تتبع UTM",
              "حساب تكلفة العميل",
              "حقول مخصصة",
            ],
          },
          {
            num: "04",
            title: "رموز QR",
            desc: "رموز QR مخصصة للفروع والخدمات والحملات",
            items: [
              "جيل بالجملة",
              "تتبع المسح",
              "صفحات هبوط مخصصة",
              "تحليلات الموقع",
            ],
          },
        ],
        magnets: {
          title: "مغناطيسات العملاء الجاهزة",
          items: [
            { label: "قوائم مرجعية", desc: "قوائم رعاية ما بعد الجراحة" },
            { label: "كوبونات", desc: "خصومات الزيارة الأولى" },
            { label: "أدلة", desc: "دليل رعاية الأسنان" },
            { label: "اختبارات", desc: "مدقق نوع البشرة" },
          ],
        },
      },
      profiles: {
        num: "02",
        title: "إدارة خفيفة لعلاقات العملاء",
        subtitle: "جدول زمني موحد مع الاهتمامات، العلامات، والنتائج",
        fields: [
          { label: "آخر زيارة", value: "2024-02-15" },
          { label: "متوسط الإنفاق", value: "850 ريال" },
          { label: "الخدمات المهتم بها", value: "تجميل، أسنان" },
          { label: "اللغة المفضلة", value: "العربية" },
          { label: "القناة المفضلة", value: "واتساب" },
          { label: "حالة الموافقة", value: "نشط" },
        ],
        scoring: {
          title: "نظام تسجيل النتائج",
          rules: [
            { score: "+10", action: "فتح آخر 3 رسائل" },
            { score: "+15", action: "نقر على رابط عرض" },
            { score: "+20", action: "سأل عن الأسعار" },
            { score: "-5", action: "لم يرد خلال 7 أيام" },
            { score: "+25", action: "حجز استشارة" },
          ],
        },
      },
      aiSales: {
        num: "03",
        title: "مساعد المبيعات بالذكاء الاصطناعي",
        subtitle: "يجيب، يوصي، ويدفع نحو الحجز والدفع",
        features: [
          {
            num: "01",
            title: "ردود ذكية",
            desc: "يفهم السياق ويصيغ ردوداً مخصصة",
            items: [
              "معرفة الخدمة",
              "توصيات الأسعار",
              "فحص التوفر",
              "التعامل مع الاعتراضات",
            ],
          },
          {
            num: "02",
            title: "منطق البيع الإضافي",
            desc: "يقترح حزم وإضافات ذات صلة بذكاء",
            items: ["اقتراح حزمة", "بيع متقاطع", "عروض موسمية", "برامج الولاء"],
          },
          {
            num: "03",
            title: "مسودات بموافقة",
            desc: "الذكاء الاصطناعي يقترح، أنت توافق، ثم يرسل",
            items: [
              "مراجعة قبل الإرسال",
              "تحرير سريع",
              "تبديل الرد التلقائي",
              "سجل التعلم",
            ],
          },
        ],
        playbooks: [
          "لا تخفض الأسعار أبداً بدون موافقة",
          "ركز على قيمة النتائج",
          "اسأل دائماً عن التفضيلات اللغوية",
          "صعّد الحالات الطبية للطاقم",
          "التقط الموافقة قبل التسويق",
        ],
      },
      voiceAgents: {
        num: "04",
        title: "وكلاء الصوت الذكيون",
        subtitle:
          "قلل عبء المكالمات بنسبة 70% مع وكلاء صوت يتحدثون العربية والإنجليزية بطلاقة",
        features: [
          {
            num: "01",
            title: "معالجة المكالمات",
            desc: "أجب على كل مكالمة فوراً بصوت طبيعي",
            items: ["تحية شخصية", "إجابات فورية", "توجيه ذكي", "تحويل بشري"],
          },
          {
            num: "02",
            title: "حجز المواعيد",
            desc: "احجز المواعيد مباشرة عبر الهاتف",
            items: ["فحص التوفر", "اختيار الخدمة", "تأكيد فوري", "رسالة تذكير"],
          },
          {
            num: "03",
            title: "متعدد اللغات",
            desc: "دعم كامل للعربية والإنجليزية",
            items: ["لهجات الخليج", "تبديل سلس", "صوت طبيعي", "فهم السياق"],
          },
          {
            num: "04",
            title: "تحليلات المكالمات",
            desc: "رؤى من كل محادثة",
            items: [
              "نصوص المكالمات",
              "تحليل المشاعر",
              "تتبع النتائج",
              "تحديد الفرص",
            ],
          },
        ],
        stats: [
          { value: "70%", label: "تقليل حمل المكالمات" },
          { value: "92%", label: "رضا العملاء" },
          { value: "5000+", label: "مكالمة/شهر" },
          { value: "35%", label: "تحويل الحجز" },
        ],
      },
      social: {
        num: "05",
        title: "التواصل الاجتماعي",
        subtitle: "حوّل المتابعين إلى حجوزات مع التقاط العملاء المحتملين",
        features: [
          {
            num: "01",
            title: "Instagram/Facebook",
            desc: "احصل على عملاء من الإعلانات والرسائل",
            items: [
              "مزامنة إعلانات العملاء",
              "ردود الرسائل المباشرة",
              "ربط الملف",
              "تتبع الحملة",
            ],
          },
          {
            num: "02",
            title: "جدار المحتوى",
            desc: "اعرض صور قبل وبعد العملاء بإذنهم",
            items: [
              "طلب موافقة",
              "معرض قابل للتصفية",
              "رموز تضمين",
              "وضع علامات",
            ],
          },
          {
            num: "03",
            title: "رسالة للحجز",
            desc: "السماح بالحجز من Instagram DMs",
            items: [
              "روبوت الرسائل",
              "كاشف النية",
              "مزامنة التقويم",
              "رابط الدفع",
            ],
          },
        ],
      },
      contentSeo: {
        num: "06",
        title: "المحتوى وتحسين محركات البحث",
        subtitle: "مسودات مدونة بالذكاء الاصطناعي بالعربية والإنجليزية",
        features: [
          {
            num: "01",
            title: "مولد المحتوى",
            desc: "منشورات مدونة متوافقة مع SEO بنقرة واحدة",
            items: [
              "أفكار الموضوع",
              "الخطوط العريضة",
              "المسودة الكاملة",
              "تحسين الكلمات",
            ],
          },
          {
            num: "02",
            title: "أدوات SEO",
            desc: "اختبار المقتطف، التحقق من المخطط",
            items: [
              "معاينة SERP",
              "فحص البيانات المنظمة",
              "تحليل الكثافة",
              "فحص الروابط",
            ],
          },
          {
            num: "03",
            title: "تقويم المحتوى",
            desc: "خطط ونشر المحتوى عبر القنوات",
            items: [
              "رؤية متعددة القنوات",
              "صفوف الموافقة",
              "النشر المجدول",
              "تتبع الأداء",
            ],
          },
        ],
      },
      nurture: {
        num: "07",
        title: "حملات الرعاية والبيع الإضافي",
        subtitle: "حملات التنقيط، استعادة المتسربين، رحلات آلية",
        journeys: [
          {
            name: "رحلة الترحيب",
            trigger: "اشتراك جديد",
            steps: [
              "بريد ترحيب فوري",
              "انتظر يوماً → أرسل دليل",
              "انتظر 3 أيام → عرض حجز",
              "إذا لم يحجز → خصم 10%",
            ],
          },
          {
            name: "استعادة المتسربين",
            trigger: "لا حجز منذ 90 يوماً",
            steps: [
              'رسالة "نفتقدك"',
              "انتظر أسبوع → شارك محتوى جديد",
              "انتظر أسبوع → عرض خاص",
              "إذا فتح → ارفع الدرجة",
            ],
          },
        ],
      },
      quotes: {
        num: "08",
        title: "خط أنابيب العروض والصفقات",
        subtitle: "لوحة كانبان: جديد → مؤهل → عرض مُرسل → تفاوض → فاز/خسر",
        stages: [
          { name: "جديد", count: 12 },
          { name: "مؤهل", count: 8 },
          { name: "عرض مُرسل", count: 5 },
          { name: "تفاوض", count: 3 },
          { name: "فاز", count: 2 },
        ],
        features: [
          "بناء عروض بروابط دفع",
          "قوالب عروض حسب الخدمة",
          "توقيع إلكتروني",
          "تذكيرات متابعة",
          "تتبع سبب الخسارة",
        ],
      },
      reviews: {
        num: "09",
        title: "التقييمات والإحالات",
        subtitle: "طلبات مراجعة تلقائية، أكواد إحالة، تتبع",
        features: [
          {
            num: "01",
            title: "طلبات المراجعة",
            desc: "أرسل طلبات بعد 48 ساعة من الزيارة",
            items: [
              "التوقيت المخصص",
              "اختيار المنصة",
              "إعادة محاولة ذكية",
              "عتبة الرضا",
            ],
          },
          {
            num: "02",
            title: "برنامج الإحالة",
            desc: "كود فريد لكل عميل مع تتبع",
            items: [
              "مولد الكود",
              "لوحة معلومات المُحيل",
              "حساب المكافأة",
              "صرف تلقائي",
            ],
          },
          {
            num: "03",
            title: "تحليلات المراجعة",
            desc: "تتبع التقييمات عبر المنصات",
            items: [
              "تحليل المشاعر",
              "استخراج الكلمات",
              "تنبيه للسلبيات",
              "تقرير الاتجاه",
            ],
          },
        ],
      },
      analytics: {
        num: "10",
        title: "التحليلات والإسناد",
        subtitle: "مسار العميل المحتمل → الحجز، تكلفة الاكتساب/القيمة الدائمة",
        metrics: [
          { label: "عملاء محتملين", value: "248", change: "+23%" },
          { label: "معدل التحويل", value: "18.5%", change: "+5.2%" },
          { label: "تكلفة الاكتساب", value: "125 ريال", change: "-15%" },
          { label: "القيمة الدائمة", value: "3,400 ريال", change: "+18%" },
          { label: "عائد الإنفاق", value: "4.8x", change: "+0.3x" },
          { label: "حركة المحتوى", value: "12.5k", change: "+35%" },
        ],
        funnel: [
          { stage: "عميل محتمل", count: 1000, pct: 100 },
          { stage: "مؤهل", count: 650, pct: 65 },
          { stage: "استشارة محجوزة", count: 280, pct: 28 },
          { stage: "حضر", count: 240, pct: 24 },
          { stage: "تحويل مدفوع", count: 185, pct: 18.5 },
        ],
      },
      integrations: {
        num: "11",
        title: "التكاملات ومزامنة البيانات",
        subtitle: "اتصل بالأدوات المفضلة لديك بسلاسة",
        categories: [
          {
            name: "إعلانات وتسويق",
            items: ["Meta Lead Ads", "Google Ads", "TikTok Ads"],
          },
          { name: "مراسلة", items: ["WhatsApp", "SMS", "Email"] },
          { name: "دفع", items: ["Stripe", "Tap Payments", "PayPal"] },
          { name: "تقاويم", items: ["Google Calendar", "Calendly", "Acuity"] },
        ],
      },
      compliance: {
        num: "12",
        title: "الامتثال والتفضيلات",
        subtitle: "التقاط الموافقة، أدوات GDPR/CCPA",
        features: [
          {
            num: "01",
            title: "إدارة الموافقة",
            desc: "التقاط والتتبع عبر القنوات",
            items: [
              "تدقيق سجل الاشتراك",
              "إلغاء الاشتراك بكلمة واحدة",
              "مركز التفضيلات",
              "انتهاء الصلاحية التلقائية",
            ],
          },
          {
            num: "02",
            title: "الخصوصية والأمان",
            desc: "متوافق مع GDPR والقوانين المحلية",
            items: [
              "تشفير البيانات",
              "حق النسيان",
              "قابلية نقل البيانات",
              "سجل التدقيق",
            ],
          },
          {
            num: "03",
            title: "اعتبارات القطاع",
            desc: "قواعد خاصة للصناعات المنظمة",
            items: [
              "طبي: لا بيانات HIPAA",
              "مالي: لا وعود ضمنية",
              "تجميل: شروط واضحة",
            ],
          },
        ],
      },
      faq: {
        title: "الأسئلة الشائعة",
        items: [
          {
            q: "هل يمكن للذكاء الاصطناعي التعامل مع استفسارات الأسعار؟",
            a: "نعم! مع كتيبات اللعب المخصصة، يمكن للذكاء الاصطناعي مشاركة نطاقات الأسعار، واقتراح الحزم، حتى إرسال روابط الدفع—دائماً ضمن قواعدك.",
          },
          {
            q: "كيف تعمل نتائج العملاء المحتملين؟",
            a: "حدد القواعد (مثل +10 للبريد المفتوح). يحسب النظام النتائج في الوقت الفعلي حتى تعطي الأولوية للعملاء الساخنين.",
          },
          {
            q: "هل يمكنني تتبع الإحالات عبر القنوات؟",
            a: "تماماً. من Meta Lead Ads → WhatsApp → الحجز → الدفع، يتتبع كل عميل محتمل المصدر والإحالة الكاملة.",
          },
          {
            q: "ماذا عن العملاء الذين لا يحجزون؟",
            a: "حملات التنقيط التلقائية والرحلات المخصصة ترعاهم بمرور الوقت. بالإضافة إلى تسلسلات استعادة المتسربين.",
          },
        ],
      },
      cta: {
        title: "حول المحادثات إلى إيرادات",
        subtitle:
          "انضم إلى 500+ عيادة عبر دول الخليج تستخدم Mawidi لتنمية أعمالها",
        primaryBtn: "ابدأ مجاناً",
        secondaryBtn: "احجز عرض",
      },
    },
    en: {
      hero: {
        tag: "Growth & CRM",
        title: "Turn Conversations Into Revenue",
        subtitle:
          "Capture leads, track interests, and turn every interaction into opportunity—with AI that actually sells.",
        cta1: "Start Free",
        cta2: "Book a Demo",
        stats: [
          { value: "2.3×", label: "More repeat bookings" },
          { value: "70%", label: "Call load reduction" },
          { value: "18.5%", label: "Conversion rate" },
        ],
      },
      sections: {
        leadCapture: "Lead Capture",
        profiles: "Profiles",
        aiSales: "AI Sales",
        voiceAgents: "Voice Agents",
        social: "Social",
        contentSeo: "Content",
        nurture: "Nurture",
        quotes: "Quotes",
        reviews: "Reviews",
        analytics: "Analytics",
        integrations: "Integrations",
        compliance: "Compliance",
      },
      leadCapture: {
        num: "01",
        title: "Multi-Source Lead Capture",
        subtitle:
          "Collect leads from every source—web, chat, ads, and QR codes",
        features: [
          {
            num: "01",
            title: "Web Forms",
            desc: "Embeddable forms with double opt-in and auto-enrichment",
            items: [
              "No-code form builder",
              "Auto-detect location",
              "Capture preferred language",
              "Consent verification",
            ],
          },
          {
            num: "02",
            title: "WhatsApp & SMS",
            desc: "Turn every conversation into a potential lead",
            items: [
              "Auto-create leads",
              "Intent classification",
              "Score tracking",
              "Smart tagging",
            ],
          },
          {
            num: "03",
            title: "Social Ads",
            desc: "Direct connection to Facebook & Instagram lead ads",
            items: [
              "Meta Ads sync",
              "UTM tracking",
              "Lead cost calculation",
              "Custom fields",
            ],
          },
          {
            num: "04",
            title: "QR Codes",
            desc: "Custom QR codes for branches, services, campaigns",
            items: [
              "Bulk generation",
              "Scan tracking",
              "Custom landing pages",
              "Location analytics",
            ],
          },
        ],
        magnets: {
          title: "Pre-Built Lead Magnets",
          items: [
            { label: "Checklists", desc: "Post-surgery care lists" },
            { label: "Coupons", desc: "First-visit discounts" },
            { label: "Guides", desc: "Dental care guide" },
            { label: "Quizzes", desc: "Skin type checker" },
          ],
        },
      },
      profiles: {
        num: "02",
        title: "Lightweight CRM",
        subtitle: "Unified customer timeline with interests, tags, and scoring",
        fields: [
          { label: "Last Visit", value: "Feb 15, 2024" },
          { label: "Avg Spend", value: "$230" },
          { label: "Services of Interest", value: "Aesthetic, Dental" },
          { label: "Preferred Language", value: "English" },
          { label: "Preferred Channel", value: "WhatsApp" },
          { label: "Consent Status", value: "Active" },
        ],
        scoring: {
          title: "Scoring System",
          rules: [
            { score: "+10", action: "Opened last 3 messages" },
            { score: "+15", action: "Clicked offer link" },
            { score: "+20", action: "Asked about pricing" },
            { score: "-5", action: "No reply in 7 days" },
            { score: "+25", action: "Booked consultation" },
          ],
        },
      },
      aiSales: {
        num: "03",
        title: "AI Sales Assistant",
        subtitle:
          "Answers questions, recommends bundles, pushes to booking/pay",
        features: [
          {
            num: "01",
            title: "Smart Replies",
            desc: "Understands context and drafts personalized responses",
            items: [
              "Service knowledge",
              "Pricing recommendations",
              "Availability checks",
              "Objection handling",
            ],
          },
          {
            num: "02",
            title: "Upsell Logic",
            desc: "Intelligently suggests relevant bundles and add-ons",
            items: [
              "Bundle suggestion",
              "Cross-sell",
              "Seasonal offers",
              "Loyalty programs",
            ],
          },
          {
            num: "03",
            title: "Drafts with Approval",
            desc: "AI suggests, you approve, then it sends",
            items: [
              "Review before send",
              "Quick edit",
              "Auto-reply toggle",
              "Learning log",
            ],
          },
        ],
        playbooks: [
          "Never discount prices without approval",
          "Focus on outcome value",
          "Always ask for language preference",
          "Escalate medical cases to staff",
          "Capture consent before marketing",
        ],
      },
      voiceAgents: {
        num: "04",
        title: "Intelligent Voice Agents",
        subtitle:
          "Reduce call load by 70% with AI voice agents fluent in Arabic and English",
        features: [
          {
            num: "01",
            title: "Inbound Call Handling",
            desc: "Answer every call instantly with natural voice",
            items: [
              "Personalized greeting",
              "Instant answers",
              "Smart routing",
              "Human handoff",
            ],
          },
          {
            num: "02",
            title: "Appointment Booking",
            desc: "Book appointments directly over the phone",
            items: [
              "Check availability",
              "Service selection",
              "Instant confirmation",
              "SMS reminder",
            ],
          },
          {
            num: "03",
            title: "Multilingual Support",
            desc: "Full support for Arabic and English",
            items: [
              "GCC dialects",
              "Seamless switching",
              "Natural voice",
              "Context understanding",
            ],
          },
          {
            num: "04",
            title: "Call Analytics",
            desc: "Insights from every conversation",
            items: [
              "Call transcripts",
              "Sentiment analysis",
              "Outcome tracking",
              "Opportunity spotting",
            ],
          },
        ],
        stats: [
          { value: "70%", label: "Call Load Reduction" },
          { value: "92%", label: "Customer Satisfaction" },
          { value: "5000+", label: "Calls/Month" },
          { value: "35%", label: "Booking Conversion" },
        ],
      },
      social: {
        num: "05",
        title: "Social & UGC",
        subtitle: "Turn followers into bookings with social lead capture",
        features: [
          {
            num: "01",
            title: "Instagram/Facebook Connect",
            desc: "Capture leads from ads and DMs",
            items: [
              "Lead ad sync",
              "DM replies",
              "Profile linking",
              "Campaign tracking",
            ],
          },
          {
            num: "02",
            title: "UGC Wall",
            desc: "Showcase customer before/after photos with permission",
            items: [
              "Request consent",
              "Filterable gallery",
              "Embed codes",
              "Service tagging",
            ],
          },
          {
            num: "03",
            title: "DM to Book",
            desc: "Allow booking directly from Instagram DMs",
            items: [
              "DM bot",
              "Intent detection",
              "Calendar sync",
              "Payment link",
            ],
          },
        ],
      },
      contentSeo: {
        num: "06",
        title: "Content & SEO",
        subtitle: "AI blog drafts in AR/EN with SEO tools",
        features: [
          {
            num: "01",
            title: "AI Content Generator",
            desc: "SEO-friendly blog posts in one click",
            items: [
              "Topic ideas",
              "Outlines",
              "Full draft",
              "Keyword optimization",
            ],
          },
          {
            num: "02",
            title: "SEO Tools",
            desc: "Snippet tester, schema validator, keyword analyzer",
            items: [
              "SERP preview",
              "Schema checker",
              "Density analysis",
              "Internal link audit",
            ],
          },
          {
            num: "03",
            title: "Content Calendar",
            desc: "Plan and publish content across channels",
            items: [
              "Multi-channel view",
              "Approval queues",
              "Scheduled publishing",
              "Performance tracking",
            ],
          },
        ],
      },
      nurture: {
        num: "07",
        title: "Nurture & Upsell",
        subtitle:
          "Drip campaigns, win-back lapsed customers, automated journeys",
        journeys: [
          {
            name: "Welcome Journey",
            trigger: "New signup",
            steps: [
              "Instant welcome email",
              "Wait 1 day → Send guide",
              "Wait 3 days → Offer booking",
              "If no booking → 10% discount",
            ],
          },
          {
            name: "Win-Back Lapsed",
            trigger: "No booking in 90 days",
            steps: [
              '"We miss you" message',
              "Wait 1 week → Share new content",
              "Wait 1 week → Special offer",
              'If opened → Upgrade to "hot"',
            ],
          },
        ],
      },
      quotes: {
        num: "08",
        title: "Quotes/Deals Pipeline",
        subtitle:
          "Kanban board: New → Qualified → Quote Sent → Negotiation → Won/Lost",
        stages: [
          { name: "New", count: 12 },
          { name: "Qualified", count: 8 },
          { name: "Quote Sent", count: 5 },
          { name: "Negotiation", count: 3 },
          { name: "Won", count: 2 },
        ],
        features: [
          "Build quotes with payment links",
          "Quote templates by service",
          "E-signature for agreements",
          "Auto follow-up reminders",
          "Loss reason tracking",
        ],
      },
      reviews: {
        num: "09",
        title: "Reviews & Referrals",
        subtitle: "Auto-request reviews, referral codes, tracking",
        features: [
          {
            num: "01",
            title: "Auto Review Requests",
            desc: "Send requests 48h after visit",
            items: [
              "Custom timing",
              "Platform selection",
              "Smart retry",
              "Satisfaction threshold",
            ],
          },
          {
            num: "02",
            title: "Referral Program",
            desc: "Unique code per customer with tracking",
            items: [
              "Code generator",
              "Referrer dashboard",
              "Reward calculation",
              "Auto payout",
            ],
          },
          {
            num: "03",
            title: "Review Analytics",
            desc: "Track ratings across platforms",
            items: [
              "Sentiment analysis",
              "Keyword extraction",
              "Alert on negatives",
              "Trend report",
            ],
          },
        ],
      },
      analytics: {
        num: "10",
        title: "Analytics & Attribution",
        subtitle: "Lead→Booking funnel, CAC/LTV, content ROI",
        metrics: [
          { label: "Leads This Month", value: "248", change: "+23%" },
          { label: "Conversion Rate", value: "18.5%", change: "+5.2%" },
          { label: "Cost per Acquisition", value: "$125", change: "-15%" },
          { label: "Lifetime Value", value: "$3,400", change: "+18%" },
          { label: "ROAS", value: "4.8x", change: "+0.3x" },
          { label: "Content Traffic", value: "12.5k", change: "+35%" },
        ],
        funnel: [
          { stage: "Lead", count: 1000, pct: 100 },
          { stage: "Qualified", count: 650, pct: 65 },
          { stage: "Consultation Booked", count: 280, pct: 28 },
          { stage: "Attended", count: 240, pct: 24 },
          { stage: "Paid Conversion", count: 185, pct: 18.5 },
        ],
      },
      integrations: {
        num: "11",
        title: "Integrations & Data Sync",
        subtitle: "Connect your favorite tools seamlessly",
        categories: [
          {
            name: "Ads & Marketing",
            items: ["Meta Lead Ads", "Google Ads", "TikTok Ads"],
          },
          { name: "Messaging", items: ["WhatsApp", "SMS", "Email"] },
          { name: "Payment", items: ["Stripe", "Tap Payments", "PayPal"] },
          {
            name: "Calendars",
            items: ["Google Calendar", "Calendly", "Acuity"],
          },
        ],
      },
      compliance: {
        num: "12",
        title: "Compliance & Preferences",
        subtitle: "Consent capture, GDPR/CCPA tools",
        features: [
          {
            num: "01",
            title: "Consent Management",
            desc: "Capture and track across channels",
            items: [
              "Opt-in audit trail",
              "One-word unsubscribe",
              "Preference center",
              "Auto-expiry",
            ],
          },
          {
            num: "02",
            title: "Privacy & Security",
            desc: "GDPR-compliant and local laws",
            items: [
              "Data encryption",
              "Right to be forgotten",
              "Data portability",
              "Audit logs",
            ],
          },
          {
            num: "03",
            title: "Sector Considerations",
            desc: "Special rules for regulated industries",
            items: [
              "Medical: No HIPAA data",
              "Financial: No implied promises",
              "Aesthetic: Clear disclaimers",
            ],
          },
        ],
      },
      faq: {
        title: "Frequently Asked Questions",
        items: [
          {
            q: "Can the AI handle pricing inquiries?",
            a: "Yes! With custom playbooks, AI can share price ranges, suggest bundles, even send payment links—always within your rules.",
          },
          {
            q: "How does lead scoring work?",
            a: "Define rules (e.g. +10 for email open). The system calculates scores in real-time so you prioritize hot leads.",
          },
          {
            q: "Can I track attribution across channels?",
            a: "Absolutely. From Meta Lead Ads → WhatsApp → Booking → Payment, every lead tracks source and full attribution.",
          },
          {
            q: "What about leads who don't book?",
            a: "Automated drip campaigns and custom journeys nurture them over time. Plus win-back sequences for re-engagement.",
          },
        ],
      },
      cta: {
        title: "Turn Conversations Into Revenue",
        subtitle:
          "Join 500+ clinics across GCC using Mawidi to grow their business",
        primaryBtn: "Start Free",
        secondaryBtn: "Book Demo",
      },
    },
  };

  const t = content[params.lang];

  // Scroll handler for sticky navigation
  useEffect(() => {
    const handleScroll = () => {
      const sections = [
        "lead-capture",
        "profiles",
        "ai-sales",
        "voice-agents",
        "social",
        "content-seo",
        "nurture",
        "quotes",
        "reviews",
        "analytics",
        "integrations",
        "compliance",
      ];

      const scrollPosition = window.scrollY + 200;

      for (const section of sections) {
        const element = document.getElementById(section);
        if (element) {
          const { offsetTop, offsetHeight } = element;
          if (
            scrollPosition >= offsetTop &&
            scrollPosition < offsetTop + offsetHeight
          ) {
            setActiveSection(section);
            break;
          }
        }
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      const yOffset = -100;
      const y =
        element.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <main
      className={`min-h-screen ${isRTL ? "text-right" : "text-left"}`}
      dir={isRTL ? "rtl" : "ltr"}
    >
      {/* ════════════════════════════════════════════════════════════════════════
          HERO SECTION - Editorial style with atmospheric background
      ════════════════════════════════════════════════════════════════════════ */}
      <section className="relative min-h-[85vh] flex items-center overflow-hidden">
        {/* 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-[60%] h-full bg-gradient-to-l from-[#0F9972]/[0.03] to-transparent dark:from-[#0F9972]/[0.08] pointer-events-none" />

        <div className="relative w-full max-w-7xl mx-auto px-6 lg:px-8 py-20">
          <div className="grid lg:grid-cols-[1.3fr_1fr] gap-16 items-center">
            {/* Left: Content */}
            <div className="space-y-8">
              {/* Tag */}
              <div className="inline-flex items-center gap-3">
                <span className="w-12 h-px bg-brand-green" />
                <span className="text-xs font-bold tracking-[0.2em] uppercase text-brand-green">
                  {t.hero.tag}
                </span>
              </div>

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

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

              {/* CTAs */}
              <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.cta1}
                  <span
                    className={`transition-transform ${isRTL ? "rotate-180" : ""}`}
                  >
                    →
                  </span>
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="group inline-flex items-center gap-3 border-2 border-stone-300 dark:border-slate-600 text-stone-900 dark:text-white px-8 py-4 text-base font-semibold transition-all hover:border-brand-green hover:text-brand-green"
                >
                  {t.hero.cta2}
                </Link>
              </div>
            </div>

            {/* Right: Stats Card */}
            <div className="relative">
              <div className="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-6 flex items-baseline justify-between"
                    >
                      <span className="text-4xl font-black text-stone-900 dark:text-white">
                        {stat.value}
                      </span>
                      <span className="text-sm text-stone-500 dark:text-stone-400 max-w-[140px]">
                        {stat.label}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
              {/* Decorative element */}
              <div className="absolute -bottom-4 -right-4 w-24 h-24 border-2 border-brand-green/20 -z-10" />
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          STICKY NAVIGATION - Editorial tabs
      ════════════════════════════════════════════════════════════════════════ */}
      <nav className="sticky top-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-lg border-y border-stone-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto">
          <div className="overflow-x-auto scrollbar-hide">
            <div className="flex min-w-max">
              {Object.entries(t.sections).map(([key, label]) => {
                const sectionId = key.replace(/([A-Z])/g, "-$1").toLowerCase();
                return (
                  <button
                    key={key}
                    onClick={() => scrollToSection(sectionId)}
                    className={`relative px-5 py-4 text-sm font-medium whitespace-nowrap transition-colors ${
                      activeSection === sectionId
                        ? "text-brand-green"
                        : "text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white"
                    }`}
                  >
                    {label}
                    {activeSection === sectionId && (
                      <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-green" />
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </nav>

      {/* ════════════════════════════════════════════════════════════════════════
          LEAD CAPTURE SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="lead-capture"
        className="relative py-24 lg:py-32 scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.leadCapture.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.leadCapture.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.leadCapture.subtitle}
              </p>
            </div>
          </div>

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

                {/* Content */}
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green flex-shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>

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

          {/* Lead Magnets */}
          <div className="mt-16 bg-brand-green text-white p-10 lg:p-12">
            <h3 className="text-2xl font-bold mb-8">
              {t.leadCapture.magnets.title}
            </h3>
            <div className="grid md:grid-cols-4 gap-6">
              {t.leadCapture.magnets.items.map((magnet, i) => (
                <div
                  key={i}
                  className="border border-white/20 p-6 hover:bg-white/10 transition-colors"
                >
                  <h4 className="font-bold text-lg mb-2">{magnet.label}</h4>
                  <p className="text-white/70 text-sm">{magnet.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          PROFILES & CRM SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="profiles"
        className="relative py-24 lg:py-32 bg-stone-50 dark:bg-slate-950 scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-200 dark:text-slate-800 leading-none">
                {t.profiles.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.profiles.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.profiles.subtitle}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            {/* Profile Fields Card */}
            <div className="bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-800">
              <div className="border-b border-stone-200 dark:border-slate-800 px-6 py-4">
                <p className="text-xs font-bold tracking-[0.2em] uppercase text-brand-green">
                  {isRTL ? "حقول الملف" : "Profile Fields"}
                </p>
              </div>
              <div className="divide-y divide-stone-100 dark:divide-slate-800">
                {t.profiles.fields.map((field, i) => (
                  <div
                    key={i}
                    className="px-6 py-4 flex justify-between items-center"
                  >
                    <span className="text-stone-500 dark:text-stone-400">
                      {field.label}
                    </span>
                    <span className="font-semibold text-stone-900 dark:text-white">
                      {field.value}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Scoring System Card */}
            <div className="bg-brand-green text-white">
              <div className="border-b border-white/20 px-6 py-4">
                <p className="text-xs font-bold tracking-[0.2em] uppercase text-white/80">
                  {t.profiles.scoring.title}
                </p>
              </div>
              <div className="p-6 space-y-4">
                {t.profiles.scoring.rules.map((rule, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-4 p-4 bg-white/10"
                  >
                    <span
                      className={`font-mono text-lg font-bold ${rule.score.startsWith("+") ? "text-green-300" : "text-red-300"}`}
                    >
                      {rule.score}
                    </span>
                    <span className="text-white/90">{rule.action}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          AI SALES ASSISTANT SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section id="ai-sales" className="relative py-24 lg:py-32 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.aiSales.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.aiSales.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.aiSales.subtitle}
              </p>
            </div>
          </div>

          {/* Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-stone-200 dark:bg-slate-700 mb-16">
            {t.aiSales.features.map((feature, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-900 p-8 lg:p-10"
              >
                <span className="absolute top-4 right-4 text-[60px] font-black text-stone-100 dark:text-slate-800 leading-none">
                  {feature.num}
                </span>
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="absolute bottom-0 left-0 w-0 h-1 bg-brand-green group-hover:w-full transition-all duration-500" />
              </article>
            ))}
          </div>

          {/* Playbooks */}
          <div className="bg-stone-900 dark:bg-slate-800 text-white p-10 lg:p-12">
            <h3 className="text-xl font-bold mb-6 tracking-[0.1em] uppercase text-stone-400">
              {isRTL
                ? "كتيبات اللعب والقواعد الحمائية"
                : "Playbooks & Guardrails"}
            </h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {t.aiSales.playbooks.map((item, i) => (
                <div
                  key={i}
                  className="flex items-start gap-3 p-4 border border-stone-700"
                >
                  <span className="text-brand-green font-bold">✓</span>
                  <span className="text-stone-300">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          VOICE AGENTS SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="voice-agents"
        className="relative py-24 lg:py-32 bg-stone-900 text-white scroll-mt-20 overflow-hidden"
      >
        {/* Background 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",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-white/10 leading-none">
                {t.voiceAgents.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-white">
                {t.voiceAgents.title}
              </h2>
              <p className="text-xl text-stone-400 max-w-2xl">
                {t.voiceAgents.subtitle}
              </p>
            </div>
          </div>

          {/* Stats Row */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/10 mb-16">
            {t.voiceAgents.stats.map((stat, i) => (
              <div key={i} className="bg-stone-900 p-8 text-center">
                <span className="block text-4xl lg:text-5xl font-black text-brand-green mb-2">
                  {stat.value}
                </span>
                <span className="text-sm text-stone-400">{stat.label}</span>
              </div>
            ))}
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 gap-px bg-white/10">
            {t.voiceAgents.features.map((feature, i) => (
              <article
                key={i}
                className="group bg-stone-900 p-8 lg:p-10 hover:bg-stone-800 transition-colors"
              >
                <span className="text-[60px] font-black text-white/10 leading-none block mb-4">
                  {feature.num}
                </span>
                <h3 className="text-xl font-bold text-white mb-3">
                  {feature.title}
                </h3>
                <p className="text-stone-400 mb-6">{feature.desc}</p>
                <ul className="space-y-2">
                  {feature.items.map((item, idx) => (
                    <li
                      key={idx}
                      className="flex items-start gap-3 text-sm text-stone-400"
                    >
                      <span className="w-1 h-1 mt-2 bg-brand-green" />
                      {item}
                    </li>
                  ))}
                </ul>
                <div className="mt-6 w-0 h-0.5 bg-brand-green group-hover:w-full transition-all duration-500" />
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          SOCIAL & UGC SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section id="social" className="relative py-24 lg:py-32 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.social.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.social.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.social.subtitle}
              </p>
            </div>
          </div>

          {/* Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-stone-200 dark:bg-slate-700">
            {t.social.features.map((feature, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-900 p-8 lg:p-10"
              >
                <span className="absolute top-4 right-4 text-[60px] font-black text-stone-100 dark:text-slate-800 leading-none">
                  {feature.num}
                </span>
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <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>

      {/* ════════════════════════════════════════════════════════════════════════
          CONTENT & SEO SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="content-seo"
        className="relative py-24 lg:py-32 bg-stone-50 dark:bg-slate-950 scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-200 dark:text-slate-800 leading-none">
                {t.contentSeo.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.contentSeo.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.contentSeo.subtitle}
              </p>
            </div>
          </div>

          {/* Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-stone-300 dark:bg-slate-700">
            {t.contentSeo.features.map((feature, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-900 p-8 lg:p-10"
              >
                <span className="absolute top-4 right-4 text-[60px] font-black text-stone-100 dark:text-slate-800 leading-none">
                  {feature.num}
                </span>
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <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>

      {/* ════════════════════════════════════════════════════════════════════════
          NURTURE & UPSELL SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section id="nurture" className="relative py-24 lg:py-32 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.nurture.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.nurture.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.nurture.subtitle}
              </p>
            </div>
          </div>

          {/* Journey Cards */}
          <div className="grid lg:grid-cols-2 gap-8">
            {t.nurture.journeys.map((journey, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-800"
              >
                <div className="border-b border-stone-200 dark:border-slate-800 px-6 py-4 flex justify-between items-center">
                  <span className="font-bold text-stone-900 dark:text-white">
                    {journey.name}
                  </span>
                  <span className="text-xs font-mono bg-brand-green/10 text-brand-green px-3 py-1">
                    {journey.trigger}
                  </span>
                </div>
                <div className="p-6">
                  <div className="relative">
                    {journey.steps.map((step, idx) => (
                      <div
                        key={idx}
                        className="flex items-start gap-4 pb-4 last:pb-0"
                      >
                        <div className="flex flex-col items-center">
                          <div className="w-3 h-3 bg-brand-green" />
                          {idx < journey.steps.length - 1 && (
                            <div className="w-px h-8 bg-stone-200 dark:bg-slate-700" />
                          )}
                        </div>
                        <span className="text-stone-600 dark:text-stone-400 text-sm pt-0.5">
                          {step}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          QUOTES/DEALS PIPELINE SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="quotes"
        className="relative py-24 lg:py-32 bg-brand-green text-white scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-white/10 leading-none">
                {t.quotes.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-white">
                {t.quotes.title}
              </h2>
              <p className="text-xl text-white/80 max-w-2xl">
                {t.quotes.subtitle}
              </p>
            </div>
          </div>

          {/* Pipeline Stages */}
          <div className="flex flex-wrap gap-4 mb-12">
            {t.quotes.stages.map((stage, i) => (
              <div
                key={i}
                className="flex-1 min-w-[120px] bg-white/10 p-6 text-center"
              >
                <span className="block text-3xl font-black mb-1">
                  {stage.count}
                </span>
                <span className="text-sm text-white/70">{stage.name}</span>
              </div>
            ))}
          </div>

          {/* Features List */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {t.quotes.features.map((feature, i) => (
              <div
                key={i}
                className="flex items-start gap-3 p-4 border border-white/20"
              >
                <span className="text-white font-bold">✓</span>
                <span className="text-white/90">{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          REVIEWS & REFERRALS SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section id="reviews" className="relative py-24 lg:py-32 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.reviews.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.reviews.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.reviews.subtitle}
              </p>
            </div>
          </div>

          {/* Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-stone-200 dark:bg-slate-700">
            {t.reviews.features.map((feature, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-900 p-8 lg:p-10"
              >
                <span className="absolute top-4 right-4 text-[60px] font-black text-stone-100 dark:text-slate-800 leading-none">
                  {feature.num}
                </span>
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <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>

      {/* ════════════════════════════════════════════════════════════════════════
          ANALYTICS SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="analytics"
        className="relative py-24 lg:py-32 bg-stone-900 text-white scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-white/10 leading-none">
                {t.analytics.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-white">
                {t.analytics.title}
              </h2>
              <p className="text-xl text-stone-400 max-w-2xl">
                {t.analytics.subtitle}
              </p>
            </div>
          </div>

          {/* Metrics Grid */}
          <div className="grid grid-cols-2 lg:grid-cols-3 gap-px bg-white/10 mb-16">
            {t.analytics.metrics.map((metric, i) => (
              <div key={i} className="bg-stone-900 p-6 lg:p-8">
                <span className="block text-3xl lg:text-4xl font-black text-white mb-1">
                  {metric.value}
                </span>
                <span className="text-sm text-stone-500 block mb-2">
                  {metric.label}
                </span>
                <span
                  className={`text-xs font-mono ${metric.change.startsWith("+") ? "text-green-400" : "text-red-400"}`}
                >
                  {metric.change}
                </span>
              </div>
            ))}
          </div>

          {/* Funnel */}
          <div className="bg-stone-800 p-8">
            <h3 className="text-lg font-bold mb-6 text-stone-400 uppercase tracking-wider">
              {isRTL ? "مسار التحويل" : "Conversion Funnel"}
            </h3>
            <div className="space-y-4">
              {t.analytics.funnel.map((stage, i) => (
                <div key={i} className="flex items-center gap-4">
                  <span className="w-32 text-sm text-stone-400">
                    {stage.stage}
                  </span>
                  <div className="flex-1 h-8 bg-stone-700 relative">
                    <div
                      className="h-full bg-brand-green transition-all duration-500"
                      style={{ width: `${stage.pct}%` }}
                    />
                    <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs font-mono text-white">
                      {stage.count.toLocaleString()}
                    </span>
                  </div>
                  <span className="w-16 text-right text-sm text-stone-400">
                    {stage.pct}%
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          INTEGRATIONS SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="integrations"
        className="relative py-24 lg:py-32 scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-100 dark:text-slate-800 leading-none">
                {t.integrations.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.integrations.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.integrations.subtitle}
              </p>
            </div>
          </div>

          {/* Categories */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {t.integrations.categories.map((category, i) => (
              <div
                key={i}
                className="bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-800 p-6"
              >
                <h3 className="font-bold text-stone-900 dark:text-white mb-4 text-lg">
                  {category.name}
                </h3>
                <ul className="space-y-3">
                  {category.items.map((item, idx) => (
                    <li
                      key={idx}
                      className="flex items-center gap-3 text-stone-600 dark:text-stone-400"
                    >
                      <span className="w-2 h-2 bg-brand-green" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          COMPLIANCE SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section
        id="compliance"
        className="relative py-24 lg:py-32 bg-stone-50 dark:bg-slate-950 scroll-mt-20"
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          {/* Section Header */}
          <div className="grid lg:grid-cols-[1fr_2fr] gap-12 mb-16">
            <div>
              <span className="text-8xl lg:text-9xl font-black text-stone-200 dark:text-slate-800 leading-none">
                {t.compliance.num}
              </span>
            </div>
            <div className="space-y-4">
              <h2 className="text-4xl lg:text-5xl font-black text-stone-900 dark:text-white">
                {t.compliance.title}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 max-w-2xl">
                {t.compliance.subtitle}
              </p>
            </div>
          </div>

          {/* Features */}
          <div className="grid lg:grid-cols-3 gap-px bg-stone-300 dark:bg-slate-700">
            {t.compliance.features.map((feature, i) => (
              <article
                key={i}
                className="group relative bg-white dark:bg-slate-900 p-8 lg:p-10"
              >
                <span className="absolute top-4 right-4 text-[60px] font-black text-stone-100 dark:text-slate-800 leading-none">
                  {feature.num}
                </span>
                <div className="relative">
                  <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-stone-600 dark:text-stone-400 mb-6">
                    {feature.desc}
                  </p>
                  <ul className="space-y-2">
                    {feature.items.map((item, idx) => (
                      <li
                        key={idx}
                        className="flex items-start gap-3 text-sm text-stone-600 dark:text-stone-400"
                      >
                        <span className="w-1 h-1 mt-2 bg-brand-green" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <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>

      {/* ════════════════════════════════════════════════════════════════════════
          FAQ SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <h2 className="text-3xl lg:text-4xl font-black text-stone-900 dark:text-white mb-12 text-center">
            {t.faq.title}
          </h2>

          <div className="divide-y divide-stone-200 dark:divide-slate-800 border-y border-stone-200 dark:border-slate-800">
            {t.faq.items.map((item, i) => (
              <div key={i} className="py-6">
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  className="w-full flex items-start justify-between gap-4 text-left"
                >
                  <span className="text-lg font-semibold text-stone-900 dark:text-white">
                    {item.q}
                  </span>
                  <span
                    className={`text-brand-green text-2xl transition-transform ${openFaq === i ? "rotate-45" : ""}`}
                  >
                    +
                  </span>
                </button>
                {openFaq === i && (
                  <p className="mt-4 text-stone-600 dark:text-stone-400 leading-relaxed">
                    {item.a}
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════════════════════════════════════════════════════════════════
          FINAL CTA SECTION
      ════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 lg:py-32 bg-stone-900">
        {/* 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",
          }}
        />

        <div className="relative max-w-4xl mx-auto px-6 lg:px-8 text-center">
          <h2 className="text-4xl lg:text-6xl font-black text-white mb-6">
            {t.cta.title}
          </h2>
          <p className="text-xl text-stone-400 mb-10 max-w-2xl mx-auto">
            {t.cta.subtitle}
          </p>

          <div className="flex flex-wrap gap-4 justify-center">
            <Link
              href={`/${params.lang}/signup`}
              className="group inline-flex items-center gap-3 bg-brand-green text-white px-10 py-5 text-lg font-semibold transition-all hover:gap-5 hover:bg-brand-greenHover"
            >
              {t.cta.primaryBtn}
              <span
                className={`transition-transform ${isRTL ? "rotate-180" : ""}`}
              >
                →
              </span>
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="inline-flex items-center gap-3 border-2 border-white/30 text-white px-10 py-5 text-lg font-semibold transition-all hover:border-white/60 hover:bg-white/5"
            >
              {t.cta.secondaryBtn}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}