import { useEffect, useState } from "react";
import { Link } from "wouter";
import { useLang } from "@/contexts/LanguageContext";
import SEOHead, { breadcrumbSchema, serviceSchema, faqSchema } from "@/components/SEOHead";
import OrderReceiptStep from "@/components/OrderReceiptStep";
import { Button } from "@/components/ui/button";
import { SummaryBox, Disclaimer } from "@/components/AEOBlocks";
import { motion, AnimatePresence } from "framer-motion";
import { toast } from "sonner";
import {
  Users, FileText, Search, GraduationCap, BarChart3,
  ArrowLeft, ArrowRight, Check, Copy, MessageCircle,
  CreditCard, Building2, Globe, X, Plane, Star, Shield, MapPin, ChevronRight
} from "lucide-react";
import { tgLink, waDirectLink, CONTACT } from "@/lib/siteConfig";
import { trpc } from "@/lib/trpc";

const SERVICES_BG = "https://d2xsxph8kpxj0f.cloudfront.net/87335511/7PsWYS5ZWJsd2Z3AdAwBnX/services-bg-LhMfWKhs3rPLTYmktYxLua.webp";

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1, y: 0,
    transition: { delay: i * 0.08, duration: 0.5, ease: [0, 0, 0.2, 1] as const }
  }),
};

interface Service {
  id: string;
  icon: typeof Users;
  titleAr: string;
  titleEn: string;
  descAr: string;
  descEn: string;
  includesAr: string[];
  includesEn: string[];
  priceSAR: number;
  priceUSD: number;
  priceLabel?: { ar: string; en: string };
  popular?: boolean;
}

// Featured Service 1: Consultation
const consultationService: Service = {
  id: "consultation",
  icon: Users,
  titleAr: "استشارة عبر Zoom",
  titleEn: "Zoom Consultation",
  descAr: "جلسة فردية لمدة 45 دقيقة عبر Zoom مع مستشار تعليمي لمناقشة خياراتك الأكاديمية واستراتيجية التقديم",
  descEn: "45-minute 1-on-1 Zoom session with an education advisor to discuss your academic options and application strategy.",
  includesAr: ["جلسة Zoom لمدة 45 دقيقة", "خطة عمل مفصلة بالإيميل", "متابعة لمدة أسبوع", "إجابة على جميع استفساراتك"],
  includesEn: ["45-min Zoom session", "Detailed action plan via email", "1-week follow-up", "All your questions answered"],
  priceSAR: 150, priceUSD: 40, popular: true,
};

// Featured Service 2: Canada Packages (3 tiers)
interface CanadaPackage {
  id: string;
  tierAr: string;
  tierEn: string;
  titleAr: string;
  titleEn: string;
  descAr: string;
  descEn: string;
  includesAr: string[];
  includesEn: string[];
  notIncludedAr?: string[];
  notIncludedEn?: string[];
  priceSAR: number;
  priceUSD: number;
  durationAr: string;
  durationEn: string;
  badge?: { ar: string; en: string };
  highlight?: boolean;
}

const canadaPackages: CanadaPackage[] = [
  {
    id: "canada-admission",
    tierAr: "باقة القبول",
    tierEn: "Admission Package",
    titleAr: "القبول الجامعي فقط",
    titleEn: "University Admission Only",
    descAr: "نساعدك في اختيار التخصص والجامعة المناسبة والحصول على خطاب القبول الرسمي من جامعة كندية معتمدة",
    descEn: "We help you choose the right major and university and obtain an official Letter of Acceptance from an accredited Canadian institution.",
    includesAr: [
      "تحليل شامل للملف الأكاديمي",
      "اختيار التخصص المناسب لمهاراتك وأهدافك",
      "البحث عن 3 جامعات/معاهد كندية معتمدة (DLI)",
      "تجهيز مستندات القبول كاملة",
      "التقديم على الجامعة ومتابعة الطلب",
      "استخراج خطاب القبول (LOA)",
      "استشارتين صوتيتين خلال العملية",
    ],
    includesEn: [
      "Comprehensive academic file analysis",
      "Major selection matching your skills and goals",
      "Research 3 accredited Canadian universities/institutes (DLI)",
      "Complete admission document preparation",
      "University application and follow-up",
      "Obtaining Letter of Acceptance (LOA)",
      "2 Zoom consultations during the process",
    ],
    notIncludedAr: ["ملف التأشيرة", "دعم ما بعد الوصول"],
    notIncludedEn: ["Visa file preparation", "Post-arrival support"],
    priceSAR: 3000, priceUSD: 800,
    durationAr: "4-8 أسابيع",
    durationEn: "4-8 weeks",
  },
  {
    id: "canada-visa",
    tierAr: "باقة القبول + التأشيرة",
    tierEn: "Admission + Visa Package",
    titleAr: "من القبول حتى التأشيرة",
    titleEn: "From Admission to Visa",
    descAr: "باقة شاملة تغطي كل شيء من اختيار الجامعة والقبول إلى إعداد ملف التأشيرة الدراسية والمتابعة حتى صدور القرار",
    descEn: "Comprehensive package covering everything from university selection and admission to study visa file preparation and follow-up until the decision.",
    includesAr: [
      "كل ما في باقة القبول",
      "كتابة خطاب نية احترافي (Letter of Intent)",
      "إعداد الخطة المالية وإثبات القدرة المالية",
      "تجهيز كافة مستندات التأشيرة",
      "تعبئة نموذج تصريح الدراسة عبر IRCC",
      "حجز موعد البصمات البيومترية",
      "متابعة الطلب حتى صدور القرار",
      "دعم ما بعد القرار واستشارة للخطوات التالية",
      "استشارات غير محدودة طوال فترة الخدمة",
    ],
    includesEn: [
      "Everything in the Admission Package",
      "Professional Letter of Intent writing",
      "Financial plan and proof of funds preparation",
      "Complete visa document preparation",
      "Study Permit application via IRCC",
      "Biometrics appointment booking",
      "Application follow-up until decision",
      "Post-decision support and next-steps consultation",
      "Unlimited consultations throughout the service",
    ],
    notIncludedAr: ["دعم الاستقرار بعد الوصول"],
    notIncludedEn: ["Post-arrival settlement support"],
    priceSAR: 5625, priceUSD: 1500,
    durationAr: "2-4 أشهر",
    durationEn: "2-4 months",
    badge: { ar: "الأكثر طلباً", en: "Most Popular" },
    highlight: true,
  },
  {
    id: "canada-full",
    tierAr: "الباقة الشاملة",
    tierEn: "Full Journey Package",
    titleAr: "من الصفر حتى الاستقرار في كندا",
    titleEn: "From Zero to Settled in Canada",
    descAr: "مرافقة كاملة من أول خطوة حتى استقرارك في كندا. نكون معك في كل مرحلة: القبول، التأشيرة، السفر، والتأقلم",
    descEn: "Complete accompaniment from the first step until you're settled in Canada. We're with you at every stage: admission, visa, travel, and adaptation.",
    includesAr: [
      "كل ما في باقة القبول + التأشيرة",
      "التحضير للسفر (حجوزات، تأمين صحي، إلخ)",
      "دليل الاستقرار الشامل (سكن، بنك، هاتف)",
      "مساعدة في إيجاد سكن مناسب",
      "إرشاد فتح حساب بنكي وإجراءات التسجيل",
      "دعم التأقلم الأكاديمي والاجتماعي",
      "استشارات غير محدودة لمدة 6 أشهر بعد الوصول",
      "دعم أولوية (رد خلال 24 ساعة)",
    ],
    includesEn: [
      "Everything in the Admission + Visa Package",
      "Travel preparation (bookings, health insurance, etc.)",
      "Comprehensive settlement guide (housing, bank, phone)",
      "Help finding suitable accommodation",
      "Bank account setup and registration guidance",
      "Academic and social adaptation support",
      "Unlimited consultations for 6 months after arrival",
      "Priority support (24-hour response)",
    ],
    priceSAR: 7500, priceUSD: 2000,
    durationAr: "6-12 شهر",
    durationEn: "6-12 months",
    badge: { ar: "أفضل قيمة", en: "Best Value" },
  },
];

// Other services
const otherServices: Service[] = [
  {
    id: "motivation-letter",
    icon: FileText,
    titleAr: "كتابة رسالة الدافع",
    titleEn: "Motivation Letter",
    descAr: "مراجعة وتحسين شامل لرسالة الدافع أو كتابتها من الصفر بأسلوب احترافي يناسب المنحة المستهدفة",
    descEn: "Comprehensive review and improvement of your motivation letter, or writing from scratch to match the target scholarship.",
    includesAr: ["كتابة أو مراجعة شاملة", "جولتين من التعديلات", "نسخة نهائية جاهزة للتقديم"],
    includesEn: ["Full writing or review", "Two rounds of revisions", "Final submission-ready version"],
    priceSAR: 75, priceUSD: 20,
  },
  {
    id: "academic-cv",
    icon: FileText,
    titleAr: "السيرة الأكاديمية",
    titleEn: "Academic CV",
    descAr: "إعداد سيرة أكاديمية احترافية تبرز إنجازاتك البحثية والأكاديمية بما يتوافق مع متطلبات المنح والجامعات",
    descEn: "Professional academic CV highlighting your research and academic achievements aligned with scholarship and university requirements.",
    includesAr: ["سيرة أكاديمية احترافية", "تنسيق يتوافق مع المعايير الدولية", "جولتين من التعديلات"],
    includesEn: ["Professional academic CV", "International standards formatting", "Two rounds of revisions"],
    priceSAR: 112, priceUSD: 30,
  },
  {
    id: "general-cv",
    icon: Search,
    titleAr: "السيرة المهنية العامة",
    titleEn: "General Professional CV",
    descAr: "إعداد سيرة ذاتية مهنية احترافية تناسب سوق العمل وتبرز مهاراتك وخبراتك بأفضل شكل",
    descEn: "Professional CV crafted for the job market, showcasing your skills and experience in the best possible way.",
    includesAr: ["سيرة ذاتية احترافية", "تنسيق عصري وجذاب", "جولتين من التعديلات"],
    includesEn: ["Professional CV", "Modern attractive formatting", "Two rounds of revisions"],
    priceSAR: 93, priceUSD: 25,
  },
  {
    id: "full-support",
    icon: GraduationCap,
    titleAr: "التقديم على منحة",
    titleEn: "Scholarship Application",
    descAr: "دعم كامل من الألف إلى الياء لتقديم على منحة واحدة يشمل مراجعة جميع الوثائق والتحضير للمقابلة والمتابعة",
    descEn: "End-to-end support for one scholarship application including document review, interview preparation, and follow-up.",
    includesAr: ["مراجعة جميع الوثائق", "إرشاد تعبئة النماذج", "تحضير للمقابلة", "متابعة حتى النتيجة"],
    includesEn: ["All document review", "Form filling guidance", "Interview prep", "Follow-up until result"],
    priceSAR: 562, priceUSD: 150,
  },
  {
    id: "cv-linkedin",
    icon: Search,
    titleAr: "تحسين السيرة الذاتية ولينكد إن",
    titleEn: "CV & LinkedIn Optimization",
    descAr: "إعادة هيكلة كاملة لسيرتك الذاتية وتحسين ملفك على لينكد إن وفق المعايير الدولية",
    descEn: "Complete CV overhaul and LinkedIn profile optimization to meet international standards.",
    includesAr: ["سيرة ذاتية احترافية", "تحسين ملف لينكد إن", "نصائح للمقابلات"],
    includesEn: ["Professional CV", "LinkedIn optimization", "Interview tips"],
    priceSAR: 225, priceUSD: 60,
  },
  {
    id: "major-report",
    icon: BarChart3,
    titleAr: "تحليل التخصص الشامل",
    titleEn: "Comprehensive Major Analysis",
    descAr: "تقييم معمق يشمل تحليل الشخصية والميول والقيم المهنية مع تقرير شامل يتضمن توصيات تخصصات ومسارات مهنية",
    descEn: "In-depth assessment including personality, interests, and professional values analysis with a comprehensive report of major and career path recommendations.",
    includesAr: ["تحليل شخصية MBTI", "اختبار هولاند RIASEC", "تقرير PDF مفصل", "توصيات منح مناسبة"],
    includesEn: ["MBTI personality analysis", "Holland RIASEC test", "Detailed PDF report", "Matching scholarship recommendations"],
    priceSAR: 93, priceUSD: 25,
  },
];

// Digital Learning Services
interface DigitalService {
  id: string;
  icon: typeof Globe;
  titleAr: string;
  titleEn: string;
  descAr: string;
  descEn: string;
  includesAr: string[];
  includesEn: string[];
  priceSAR: number;
  priceUSD: number;
  originalPriceSAR: number;
  badge?: { ar: string; en: string };
  popular?: boolean;
}

const digitalServices: DigitalService[] = [
  {
    id: "coursera-google",
    icon: GraduationCap,
    titleAr: "اشتراك Coursera Google - شهادة معتمدة من جوجل",
    titleEn: "Coursera Google - Google Certified",
    descAr: "احصل على شهادة مهنية معتمدة باسمك من Google في مجالات مثل تحليل البيانات، الأمن السيبراني، وتصميم تجربة المستخدم",
    descEn: "Get a professional certificate from Google in Data Analytics, Cybersecurity, UX Design, and more.",
    includesAr: ["شهادة معتمدة باسمك من Google", "مسارات: Data Analytics, Cybersecurity, IT Support, UX Design", "دورات قصيرة: AI Essentials, Prompting Essentials", "إضافة الشهادة لملفك على LinkedIn", "تفعيل فوري خلال 24 ساعة"],
    includesEn: ["Google-certified certificate in your name", "Tracks: Data Analytics, Cybersecurity, IT Support, UX Design", "Short courses: AI Essentials, Prompting Essentials", "Add certificate to LinkedIn", "Instant activation within 24 hours"],
    priceSAR: 99, priceUSD: 26, originalPriceSAR: 499,
    badge: { ar: "الأكثر طلباً", en: "Most Popular" },
    popular: true,
  },
  {
    id: "edx-learning",
    icon: GraduationCap,
    titleAr: "اشتراك edX Learning | شهادات مهنية",
    titleEn: "edX Learning - Professional Certificates",
    descAr: "شهادات مهنية معتمدة من أفضل الجامعات العالمية مثل Harvard وIBM وMIT عبر منصة edX",
    descEn: "Professional certificates from Harvard, IBM, MIT and more via edX.",
    includesAr: ["أكثر من 40 شهادة مهنية متاحة", "محتوى من Harvard, IBM, MIT", "وصول لأكثر من 4000 دورة", "شهادات معتمدة لملفك المهني", "تفعيل خلال 24 ساعة"],
    includesEn: ["40+ professional certificates", "Content from Harvard, IBM, MIT", "Access to 4000+ courses", "Certified credentials", "Activation within 24 hours"],
    priceSAR: 199, priceUSD: 53, originalPriceSAR: 799,
  },
  {
    id: "coursera-plus",
    icon: Globe,
    titleAr: "اشتراك Coursera Plus | كورسيرا بلس",
    titleEn: "Coursera Plus Subscription",
    descAr: "وصول غير محدود لأكثر من 7000 دورة وشهادة من أفضل الجامعات والشركات العالمية",
    descEn: "Unlimited access to 7000+ courses and certificates from top universities and companies.",
    includesAr: ["أكثر من 7000 دورة في مختلف المجالات", "شهادات متعددة معتمدة", "تعلم بدون مواعيد محددة", "محتوى من أفضل الجامعات", "نشر الشهادات على LinkedIn"],
    includesEn: ["7000+ courses across all fields", "Multiple certified credentials", "Learn at your own pace", "Content from world-class universities", "Share certificates on LinkedIn"],
    priceSAR: 99, priceUSD: 26, originalPriceSAR: 3840,
    badge: { ar: "خصم 97%", en: "97% OFF" },
  },
  {
    id: "udemy-personal",
    icon: Globe,
    titleAr: "اشتراك Udemy Personal | يوديمي",
    titleEn: "Udemy Personal Subscription",
    descAr: "تعلّم مهارات جديدة من أكثر من 20,000 دورة تعليمية في مختلف المجالات",
    descEn: "Learn new skills from 20,000+ courses across all fields.",
    includesAr: ["أكثر من 20,000 دورة متاحة", "مدربون خبراء ومحترفون", "تعلم من أي مكان وفي أي وقت", "شهادات إتمام لكل دورة", "اشتراك شهري بدون رسوم إضافية"],
    includesEn: ["20,000+ courses available", "Expert certified instructors", "Learn anywhere, anytime", "Completion certificates", "Monthly subscription, no extra fees"],
    priceSAR: 129, priceUSD: 34, originalPriceSAR: 700,
  },
  {
    id: "scribd-premium",
    icon: FileText,
    titleAr: "اشتراك Scribd Premium | سكريبد",
    titleEn: "Scribd Premium Subscription",
    descAr: "مكتبة رقمية ضخمة تضم ملايين الكتب الإلكترونية والصوتية والمقالات والأبحاث",
    descEn: "Massive digital library with millions of ebooks, audiobooks, articles, and research papers.",
    includesAr: ["ملايين الكتب الإلكترونية والصوتية", "تحميل وقراءة بدون إنترنت", "مستندات وأبحاث بصيغة PDF", "مكتبة متجددة شهرياً", "واجهة سهلة على جميع الأجهزة"],
    includesEn: ["Millions of ebooks and audiobooks", "Download and read offline", "Documents and research in PDF", "Monthly updated library", "Easy interface on all devices"],
    priceSAR: 99, priceUSD: 26, originalPriceSAR: 189,
  },
  {
    id: "codecademy",
    icon: Search,
    titleAr: "اشتراك Codecademy | تعليم البرمجة",
    titleEn: "Codecademy - Learn to Code",
    descAr: "تعلم البرمجة بطريقة تفاعلية مع أكثر من 14 لغة برمجة ومشاريع واقعية وشهادات معتمدة",
    descEn: "Learn to code interactively with 14+ languages, real-world projects, and certificates.",
    includesAr: ["أكثر من 14 لغة برمجة: Python, JavaScript, SQL", "مشاريع واقعية لتطبيق المهارات", "مسارات مهنية موجهة لسوق العمل", "شهادات معتمدة", "تعلم تفاعلي بخطوات منتظمة"],
    includesEn: ["14+ languages: Python, JavaScript, SQL", "Real-world projects", "Career-oriented paths", "Certified credentials", "Interactive step-by-step learning"],
    priceSAR: 299, priceUSD: 80, originalPriceSAR: 399,
  },
  {
    id: "skillshare-premium",
    icon: Star,
    titleAr: "اشتراك SkillShare Premium | سكيل شير",
    titleEn: "SkillShare Premium Subscription",
    descAr: "أفضل الكورسات الإبداعية في التصميم، التسويق، التصوير، والكتابة مع مجتمع إبداعي عالمي",
    descEn: "Best creative courses in design, marketing, photography, and writing.",
    includesAr: ["أكثر من 5000 كورس إبداعي", "مشاريع تطبيقية منظمة", "مجتمع إبداعي واسع", "محتوى حصري وورش عمل متقدمة", "اشتراك سنوي كامل"],
    includesEn: ["5000+ creative courses", "Structured hands-on projects", "Large creative community", "Exclusive content and workshops", "Full annual subscription"],
    priceSAR: 99, priceUSD: 26, originalPriceSAR: 679,
    badge: { ar: "سنوي", en: "Annual" },
  },
  {
    id: "duolingo",
    icon: Globe,
    titleAr: "اشتراك Duolingo | دولينجو بريميوم",
    titleEn: "Duolingo Premium Subscription",
    descAr: "تعلم أكثر من 12 لغة بأسلوب ممتع وتفاعلي مع دروس غير محدودة بدون إعلانات",
    descEn: "Learn 12+ languages in a fun, interactive way with unlimited lessons and no ads.",
    includesAr: ["أكثر من 12 لغة متاحة", "دروس غير محدودة بدون إعلانات", "مراجعة ذكية للكلمات", "ممارسة محادثة تفاعلية", "خطط فردية وعائلية متاحة"],
    includesEn: ["12+ languages available", "Unlimited lessons, no ads", "Smart word review", "Interactive conversation practice", "Individual and family plans"],
    priceSAR: 99, priceUSD: 26, originalPriceSAR: 450,
  },
];

const paymentMethods = [
  {
    region: { ar: "اليمن", en: "Yemen" },
    icon: Building2,
    methods: [
      {
        name: { ar: "بنك الكريمي", en: "Al-Kuraimi Bank" },
        details: [
          { label: { ar: "اسم الحساب", en: "Account Name" }, value: "دليلك للإرشاد التعليمي" },
          { label: { ar: "حساب سعودي", en: "SAR Account" }, value: "3095131874" },
          { label: { ar: "حساب أمريكي", en: "USD Account" }, value: "3112043507" },
          { label: { ar: "حساب يمني", en: "YER Account" }, value: "3095165396" },
        ],
      },
    ],
  },
  {
    region: { ar: "السعودية", en: "Saudi Arabia" },
    icon: CreditCard,
    methods: [
      {
        name: { ar: "بنك الراجحي", en: "Al Rajhi Bank" },
        details: [
          { label: { ar: "الآيبان", en: "IBAN" }, value: "SA7080000368608016965655" },
        ],
      },
      {
        name: { ar: "STC Bank", en: "STC Bank" },
        details: [
          { label: { ar: "الآيبان", en: "IBAN" }, value: "SA9678000000001056933774" },
        ],
      },
    ],
  },
  {
    region: { ar: "دولي", en: "International" },
    icon: Globe,
    methods: [
      {
        name: { ar: "Wise", en: "Wise" },
        details: [
          { label: { ar: "الرابط", en: "Link" }, value: "https://wise.com/pay/me/abdullaha5337", isLink: true },
        ],
      },
      {
        name: { ar: "PayPal", en: "PayPal" },
        details: [
          { label: { ar: "الرابط", en: "Link" }, value: "https://www.paypal.me/dalilak", isLink: true },
        ],
      },
    ],
  },
];

export default function Services() {
  const { t, lang } = useLang();
  const Arrow = lang === "ar" ? ArrowLeft : ArrowRight;
  const [selectedService, setSelectedService] = useState<Service | null>(null);
  const [selectedCanadaPackage, setSelectedCanadaPackage] = useState<CanadaPackage | null>(null);
  const [selectedDigitalService, setSelectedDigitalService] = useState<DigitalService | null>(null);
  const trackLead = trpc.orders.trackLead.useMutation();

  const recordLead = (eventType: "service_cta_opened" | "canada_whatsapp_opened", serviceId?: string) => {
    trackLead.mutate({ eventType, serviceId, pagePath: window.location.pathname });
  };

  const openServiceOrder = (service: Service) => {
    recordLead("service_cta_opened", service.id);
    setSelectedService(service);
  };

  const openCanadaOrder = (pkg: CanadaPackage) => {
    recordLead("service_cta_opened", pkg.id);
    setSelectedCanadaPackage(pkg);
  };

  const openDigitalOrder = (service: DigitalService) => {
    recordLead("service_cta_opened", service.id);
    setSelectedDigitalService(service);
  };

  useEffect(() => {
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      setSelectedService(null);
      setSelectedCanadaPackage(null);
      setSelectedDigitalService(null);
    };
    window.addEventListener("keydown", closeOnEscape);
    return () => window.removeEventListener("keydown", closeOnEscape);
  }, []);

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    toast.success(t("تم النسخ", "Copied to clipboard"));
  };

  return (
    <div className="min-h-screen">
      <SEOHead
        title="خدماتنا التعليمية | استشارات وتجهيز ملفات | دليلك"
        description="خدمات إرشاد تعليمي احترافية: استشارة عبر Zoom، مراجعة CV، كتابة رسالة دافع، تحضير مقابلة، وباقات الدراسة في كندا."
        canonical="/services"
        keywords="استشارة تعليمية, مراجعة سيرة ذاتية, رسالة دافع, دراسة في كندا"
        schema={[
          breadcrumbSchema([
            { name: "الرئيسية", url: "/" },
            { name: "خدماتنا", url: "/services" },
          ]),
          serviceSchema({ name: "استشارة تعليمية عبر Zoom", description: "استشارة 45 دقيقة مع مستشار تعليمي متخصص", price: "40", currency: "USD" }),
          serviceSchema({ name: "باقة الدراسة في كندا - الأساسية", description: "باقة القبول الجامعي في كندا", price: "800", currency: "USD" }),
          serviceSchema({ name: "باقة الدراسة في كندا - الشاملة", description: "باقة الرحلة الكاملة للدراسة والاستقرار في كندا", price: "2000", currency: "USD" }),
        ]}
      />
      {/* Header */}
      <section
        className="relative py-16 lg:py-20"
        style={{ backgroundImage: `url(${SERVICES_BG})`, backgroundSize: "cover" }}
      >
        <div className="absolute inset-0 bg-cream/85 backdrop-blur-sm" />
        <div className="container relative z-10">
          <motion.div initial="hidden" animate="visible">
            <motion.span variants={fadeUp} custom={0} className="text-gold text-sm font-semibold uppercase tracking-wider">
              {t("خدماتنا المتخصصة", "Our Specialized Services")}
            </motion.span>
            <motion.h1 variants={fadeUp} custom={1} className="text-3xl md:text-4xl lg:text-5xl font-bold text-navy mt-3 mb-4">
              {t("خدمات تعليمية متخصصة لدعم رحلتك الأكاديمية", "Specialized Educational Services to Support Your Academic Journey")}
            </motion.h1>
            <motion.p variants={fadeUp} custom={2} className="text-muted-foreground text-lg max-w-2xl">
              {t(
                "نساعد الطلاب في اختيار التخصص، تجهيز ملفات التقديم، تحسين السيرة الذاتية ورسائل الدافع، والاستعداد للتقديم على المنح والجامعات بثقة ووضوح.",
                "We help students choose a major, prepare applications, improve CVs and motivation letters, and get ready to apply for scholarships and universities with confidence and clarity."
              )}
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* AI-Readable Summary */}
      <section className="py-8 bg-white">
        <div className="container max-w-4xl">
          <SummaryBox title={t("ملخص الخدمات", "Services Summary")}>
            <p>{t(
              "تقدم دليلك خدمات إرشاد تعليمي متخصصة تشمل: استشارة عبر Zoom ($40)، كتابة رسالة الدافع ($20)، مراجعة السيرة الذاتية ($15)، التقديم على منحة ($150)، وباقات الدراسة في كندا (تبدأ من $800). الخدمات استشارية ولا تضمن القبول أو التأشيرة أو المنحة. للحجز: اختر الخدمة وأكمل الدفع ثم ارفع الإيصال.",
              "Dalilak offers specialized educational guidance services including: Zoom consultation ($40), motivation letter writing ($20), CV review ($15), scholarship application ($150), and Study in Canada packages (starting from $800). Services are advisory and do not guarantee admission, visa, or scholarship. To book: choose a service, complete payment, and upload your receipt."
            )}</p>
          </SummaryBox>
          <Disclaimer
            text={t(
              "تنويه: خدمات دليلك استشارية ولا تضمن القبول في جامعة أو الحصول على منحة أو تأشيرة. القرار النهائي يعود للجهة المانحة أو الجامعة.",
              "Disclaimer: Dalilak's services are advisory and do not guarantee admission to a university, a scholarship, or a visa. The final decision rests with the granting institution or university."
            )}
            className="mt-4"
          />
        </div>
      </section>

      {/* === FEATURED SECTION 1: Zoom Consultation === */}
      <section className="py-16 lg:py-20 bg-white">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="mb-10">
            <motion.div variants={fadeUp} custom={0} className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-gold/10 flex items-center justify-center">
                <Star className="w-5 h-5 text-gold" />
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-navy">
                {t("خدمة مميزة", "Featured Service")}
              </h2>
            </motion.div>
          </motion.div>

          <motion.div
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={fadeUp} custom={1}
            className="bg-gradient-to-br from-navy/5 to-gold/5 border-2 border-gold/30 rounded-2xl p-8 md:p-10"
          >
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
              <div>
                <div className="inline-flex items-center gap-2 bg-gold/10 text-gold px-3 py-1.5 rounded-full text-xs font-semibold mb-4">
                  <Users className="w-3.5 h-3.5" />
                  {t("الأكثر طلباً", "Most Popular")}
                </div>
                <h3 className="text-2xl md:text-3xl font-bold text-navy mb-3">
                  {t("استشارة فردية عبر Zoom", "1-on-1 Zoom Consultation")}
                </h3>
                <p className="text-muted-foreground text-lg mb-6 leading-relaxed">
                  {t(
                    "جلسة مباشرة لمدة 45 دقيقة عبر Zoom مع مستشار تعليمي متخصص. ناقش خياراتك الأكاديمية، استراتيجية التقديم، واحصل على خطة عمل واضحة.",
                    "A live 45-minute Zoom session with a specialized education advisor. Discuss your academic options, application strategy, and get a clear action plan."
                  )}
                </p>
                <ul className="space-y-3 mb-8">
                  {(lang === "ar" ? consultationService.includesAr : consultationService.includesEn).map((item) => (
                    <li key={item} className="flex items-center gap-3 text-foreground/80">
                      <div className="w-5 h-5 rounded-full bg-gold/20 flex items-center justify-center shrink-0">
                        <Check className="w-3 h-3 text-gold" />
                      </div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="flex flex-col items-center lg:items-end">
                <div className="bg-white rounded-2xl shadow-lg p-8 text-center w-full max-w-sm">
                  <div className="text-4xl font-bold text-navy mb-1">${consultationService.priceUSD}</div>
                  <div className="text-muted-foreground text-sm mb-1">USD</div>
                  <div className="text-muted-foreground text-xs mb-6">~{consultationService.priceSAR} {t("ريال سعودي", "SAR")}</div>
                  <div className="text-sm text-muted-foreground mb-6 flex items-center justify-center gap-2">
                    <Users className="w-4 h-4" />
                    {t("45 دقيقة", "45 minutes")}
                  </div>
                  <Button
                    onClick={() => openServiceOrder(consultationService)}
                    className="w-full bg-gold hover:bg-gold/90 text-navy font-bold text-lg py-6"
                  >
                    {t("احجز استشارتك الآن", "Book Your Consultation")}
                    <Arrow className="w-5 h-5 ms-2" />
                  </Button>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* === FEATURED SECTION 2: Study in Canada Packages === */}
      <section className="py-16 lg:py-24 bg-cream">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="text-center mb-12">
            <motion.div variants={fadeUp} custom={0} className="flex items-center justify-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
                <MapPin className="w-5 h-5 text-red-600" />
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-navy">
                {t("🇨🇦 باقات الدراسة في كندا", "🇨🇦 Study in Canada Packages")}
              </h2>
            </motion.div>
            <motion.p variants={fadeUp} custom={1} className="text-muted-foreground text-lg max-w-2xl mx-auto">
              {t(
                "مرافقة كاملة من أول خطوة حتى تحقيق حلمك بالدراسة في كندا. اختر الباقة المناسبة لاحتياجاتك.",
                "Complete accompaniment from the first step to achieving your dream of studying in Canada. Choose the package that fits your needs."
              )}
            </motion.p>
          </motion.div>

          {/* Canada Packages Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-4 items-stretch">
            {canadaPackages.map((pkg, i) => (
              <motion.div
                key={pkg.id}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
                className={`relative ${pkg.highlight ? "lg:-mt-4 lg:mb-0" : ""}`}
              >
                <div className={`bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border h-full flex flex-col overflow-hidden ${
                  pkg.highlight ? "border-gold ring-2 ring-gold/20 shadow-lg" : "border-border/50"
                }`}>
                  {/* Badge */}
                  {pkg.badge && (
                    <div className={`text-center py-2 text-xs font-bold ${
                      pkg.highlight ? "bg-gold text-navy" : "bg-navy text-white"
                    }`}>
                      {lang === "ar" ? pkg.badge.ar : pkg.badge.en}
                    </div>
                  )}

                  <div className="p-6 lg:p-8 flex flex-col flex-1">
                    {/* Tier Name */}
                    <div className="text-sm font-semibold text-gold mb-2">
                      {lang === "ar" ? pkg.tierAr : pkg.tierEn}
                    </div>

                    {/* Title */}
                    <h3 className="text-xl font-bold text-navy mb-2">
                      {lang === "ar" ? pkg.titleAr : pkg.titleEn}
                    </h3>

                    {/* Description */}
                    <p className="text-muted-foreground text-sm leading-relaxed mb-5">
                      {lang === "ar" ? pkg.descAr : pkg.descEn}
                    </p>

                    {/* Price */}
                    <div className="bg-cream rounded-xl p-4 mb-5">
                      <div className="text-3xl font-bold text-navy">${pkg.priceUSD}</div>
                      <div className="text-muted-foreground text-xs mt-1">
                        ~{pkg.priceSAR} {t("ريال سعودي", "SAR")}
                      </div>
                      <div className="text-muted-foreground text-xs mt-2 flex items-center gap-1">
                        <Plane className="w-3 h-3" />
                        {t("المدة:", "Duration:")} {lang === "ar" ? pkg.durationAr : pkg.durationEn}
                      </div>
                    </div>

                    {/* Includes */}
                    <div className="flex-1">
                      <div className="text-sm font-semibold text-navy mb-3">
                        {t("يشمل:", "Includes:")}
                      </div>
                      <ul className="space-y-2.5">
                        {(lang === "ar" ? pkg.includesAr : pkg.includesEn).map((item) => (
                          <li key={item} className="flex items-start gap-2 text-sm text-foreground/70">
                            <Check className="w-4 h-4 text-gold mt-0.5 shrink-0" />
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>

                      {/* Not included */}
                      {pkg.notIncludedAr && pkg.notIncludedAr.length > 0 && (
                        <div className="mt-4 pt-3 border-t border-border/30">
                          <div className="text-xs text-muted-foreground mb-2">
                            {t("غير مشمول:", "Not included:")}
                          </div>
                          <ul className="space-y-1">
                            {(lang === "ar" ? pkg.notIncludedAr : pkg.notIncludedEn)?.map((item) => (
                              <li key={item} className="flex items-start gap-2 text-xs text-muted-foreground">
                                <X className="w-3 h-3 text-muted-foreground/50 mt-0.5 shrink-0" />
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>

                    {/* CTA */}
                    <div className="mt-6 pt-5 border-t border-border/50">
                      <Button
                        onClick={() => openCanadaOrder(pkg)}
                        className={`w-full font-bold py-5 ${
                          pkg.highlight
                            ? "bg-gold hover:bg-gold/90 text-navy"
                            : "bg-navy hover:bg-navy-light text-white"
                        }`}
                      >
                        {t("اختر هذه الباقة", "Choose This Package")}
                        <Arrow className="w-4 h-4 ms-2" />
                      </Button>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Guarantee Note */}
          <motion.div
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={fadeUp} custom={4}
            className="mt-8 bg-white rounded-xl p-6 flex flex-col md:flex-row items-center gap-4 border border-border/50"
          >
            <div className="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center shrink-0">
              <Shield className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <h4 className="font-bold text-navy mb-1">{t("دعم ما بعد القرار", "Post-Decision Support")}</h4>
              <p className="text-muted-foreground text-sm">
                {t(
                  "في حال رفض التأشيرة، نقدم لك استشارة مجانية لفهم أسباب الرفض ومناقشة الخيارات المتاحة (باقة القبول + التأشيرة والباقة الشاملة). إعادة التقديم متاحة برسوم مخفضة.",
                  "If your visa is rejected, we provide a free consultation to understand the reasons and discuss available options (Admission + Visa and Full Journey packages). Re-application is available at a reduced fee."
                )}
              </p>
            </div>
          </motion.div>
        </div>
      </section>

      {/* === OTHER SERVICES === */}
      <section className="py-16 lg:py-24 bg-white">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="mb-10">
            <motion.h2 variants={fadeUp} custom={0} className="text-2xl md:text-3xl font-bold text-navy mb-3">
              {t("خدمات أخرى", "Other Services")}
            </motion.h2>
            <motion.p variants={fadeUp} custom={1} className="text-muted-foreground">
              {t("خدمات فردية لمساعدتك في كل جانب من رحلتك الأكاديمية", "Individual services to help you with every aspect of your academic journey")}
            </motion.p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {otherServices.map((service, i) => (
              <motion.div
                key={service.id}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
              >
                <div className="bg-cream rounded-xl p-7 shadow-sm hover:shadow-md transition-all duration-300 border border-border/30 h-full flex flex-col">
                  <div className="w-10 h-10 rounded-lg bg-navy/5 flex items-center justify-center mb-4">
                    <service.icon className="w-5 h-5 text-gold" />
                  </div>
                  <h3 className="text-lg font-bold text-navy mb-2">
                    {lang === "ar" ? service.titleAr : service.titleEn}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                    {lang === "ar" ? service.descAr : service.descEn}
                  </p>

                  <ul className="space-y-2 mb-5 flex-1">
                    {(lang === "ar" ? service.includesAr : service.includesEn).map((item) => (
                      <li key={item} className="flex items-start gap-2 text-sm text-foreground/70">
                        <Check className="w-3.5 h-3.5 text-gold mt-0.5 shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>

                  <div className="pt-4 border-t border-border/30">
                    <div className="flex items-end justify-between mb-3">
                      <div>
                        <span className="text-xl font-bold text-navy">${service.priceUSD}</span>
                        <span className="text-muted-foreground text-xs ms-1">USD</span>
                      </div>
                      <span className="text-muted-foreground text-xs">~{service.priceSAR} {t("ريال", "SAR")}</span>
                    </div>
                    <Button
                      onClick={() => openServiceOrder(service)}
                      variant="outline"
                      className="w-full border-navy/20 text-navy hover:bg-navy hover:text-white"
                    >
                      {t("اطلب الخدمة", "Order Service")}
                      <Arrow className="w-4 h-4 ms-2" />
                    </Button>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Digital Learning Services Section */}
      <section className="py-16 lg:py-24 bg-gradient-to-b from-white to-cream/50">
        <div className="container">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} className="mb-10">
            <motion.h2 variants={fadeUp} custom={0} className="text-2xl md:text-3xl font-bold text-navy mb-3">
              {t("اشتراكات تعليمية رقمية", "Digital Learning Subscriptions")}
            </motion.h2>
            <motion.p variants={fadeUp} custom={1} className="text-muted-foreground max-w-2xl">
              {t("اشتراكات بأسعار مخفضة في أفضل منصات التعلم العالمية. تفعيل فوري خلال 24 ساعة.", "Discounted subscriptions to the world's best learning platforms. Instant activation within 24 hours.")}
            </motion.p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {digitalServices.map((ds, i) => (
              <motion.div
                key={ds.id}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
              >
                <div className={`relative bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border h-full flex flex-col ${ds.popular ? "border-gold/50 ring-1 ring-gold/20" : "border-border/30"}`}>
                  {ds.badge && (
                    <span className="absolute -top-3 start-4 bg-gold text-white text-xs font-bold px-3 py-1 rounded-full">
                      {lang === "ar" ? ds.badge.ar : ds.badge.en}
                    </span>
                  )}
                  <div className="w-9 h-9 rounded-lg bg-navy/5 flex items-center justify-center mb-3">
                    <ds.icon className="w-4.5 h-4.5 text-gold" />
                  </div>
                  <h3 className="text-sm font-bold text-navy mb-1.5 leading-snug">
                    {lang === "ar" ? ds.titleAr : ds.titleEn}
                  </h3>
                  <p className="text-muted-foreground text-xs leading-relaxed mb-3 flex-1">
                    {lang === "ar" ? ds.descAr : ds.descEn}
                  </p>

                  <ul className="space-y-1.5 mb-4">
                    {(lang === "ar" ? ds.includesAr : ds.includesEn).slice(0, 3).map((item) => (
                      <li key={item} className="flex items-start gap-1.5 text-xs text-foreground/70">
                        <Check className="w-3 h-3 text-gold mt-0.5 shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>

                  <div className="pt-3 border-t border-border/30 mt-auto">
                    <div className="flex items-end justify-between mb-2.5">
                      <div>
                        <span className="text-lg font-bold text-navy">${ds.priceUSD}</span>
                        <span className="text-muted-foreground text-[10px] ms-1">USD</span>
                      </div>
                      <div className="text-end">
                        <span className="text-muted-foreground line-through text-[10px] block">{ds.originalPriceSAR} {t("ريال", "SAR")}</span>
                        <span className="text-xs text-navy font-semibold">{ds.priceSAR} {t("ريال", "SAR")}</span>
                      </div>
                    </div>
                    <Button
                      onClick={() => openDigitalOrder(ds)}
                      variant="outline"
                      size="sm"
                      className="w-full border-navy/20 text-navy hover:bg-navy hover:text-white text-xs"
                    >
                      {t("اطلب الآن", "Order Now")}
                      <Arrow className="w-3.5 h-3.5 ms-1.5" />
                    </Button>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Trust Section */}
      <section className="py-16 bg-cream border-t border-border/50">
        <div className="container">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            {[
              {
                title: t("مدفوعات آمنة", "Secure Payments"),
                desc: t("عبر الكريمي والراجحي و STC Bank و Wise و PayPal", "Via Al-Kuraimi, Al Rajhi, STC Bank, Wise & PayPal"),
              },
              {
                title: t("جودة احترافية", "Professional Quality"),
                desc: t("نلتزم بتقديم أعلى مستوى خدمة مع متابعة مستمرة حتى اكتمال ملفك", "We commit to the highest service level with continuous follow-up until your file is complete."),
              },
              {
                title: t("بياناتك محمية", "Your Data is Protected"),
                desc: t("بياناتك الشخصية محمية ولن يتم مشاركتها مع أي طرف ثالث", "Your personal data is protected and will never be shared with third parties."),
              },
            ].map((item, i) => (
              <motion.div
                key={item.title}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeUp}
                custom={i}
              >
                <h4 className="font-bold text-navy mb-2">{item.title}</h4>
                <p className="text-muted-foreground text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Payment Modal for regular services */}
      <AnimatePresence>
        {selectedService && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
            onClick={() => setSelectedService(null)}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-y-auto"
              role="dialog"
              aria-modal="true"
              aria-labelledby="service-order-title"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="p-6 border-b border-border/50 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
                <div>
                  <h3 id="service-order-title" className="font-bold text-navy text-lg">
                    {t("إتمام الطلب", "Complete Your Order")}
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    {lang === "ar" ? selectedService.titleAr : selectedService.titleEn}
                  </p>
                </div>
                <button onClick={() => setSelectedService(null)} aria-label={t("إغلاق نافذة الطلب", "Close order dialog")} className="p-2 hover:bg-muted rounded-lg">
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="p-6">
                <div className="bg-navy/5 rounded-xl p-4 mb-6">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">{t("المبلغ المطلوب", "Amount Due")}</span>
                    <div className="text-end">
                      <div className="text-xl font-bold text-navy">${selectedService.priceUSD} USD</div>
                      <div className="text-xs text-muted-foreground">~{selectedService.priceSAR} {t("ريال", "SAR")}</div>
                    </div>
                  </div>
                </div>

                <h4 className="font-bold text-navy mb-4 text-sm">{t("طرق الدفع المتاحة", "Available Payment Methods")}</h4>

                <div className="space-y-4">
                  {paymentMethods.map((pm) => (
                    <div key={pm.region.en} className="border border-border/50 rounded-xl overflow-hidden">
                      <div className="bg-muted/50 px-4 py-3 flex items-center gap-2">
                        <pm.icon className="w-4 h-4 text-gold" />
                        <span className="font-semibold text-navy text-sm">{lang === "ar" ? pm.region.ar : pm.region.en}</span>
                      </div>
                      <div className="p-4 space-y-3">
                        {pm.methods.map((method) => (
                          <div key={method.name.en}>
                            <div className="text-sm font-medium text-navy mb-2">{lang === "ar" ? method.name.ar : method.name.en}</div>
                            {method.details.map((detail) => (
                              <div key={detail.value} className="flex items-center justify-between py-1.5 text-sm">
                                <span className="text-muted-foreground">{lang === "ar" ? detail.label.ar : detail.label.en}</span>
                                <div className="flex items-center gap-2">
                                  {"isLink" in detail && detail.isLink ? (
                                    <a href={detail.value} target="_blank" rel="noopener noreferrer" className="text-gold hover:underline text-xs" dir="ltr">
                                      {detail.value.replace("https://", "").substring(0, 30)}...
                                    </a>
                                  ) : (
                                    <span className="font-mono text-xs text-navy" dir="ltr">{detail.value}</span>
                                  )}
                                  <button
                                    onClick={() => copyToClipboard(detail.value)}
                                    className="p-1 hover:bg-muted rounded"
                                    title={t("نسخ", "Copy")}
                                  >
                                    <Copy className="w-3.5 h-3.5 text-muted-foreground" />
                                  </button>
                                </div>
                              </div>
                            ))}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6 bg-gold/10 rounded-xl p-4">
                  <h5 className="font-bold text-navy text-sm mb-2">{t("بعد التحويل", "After Transfer")}</h5>
                  <ol className="space-y-2 text-sm text-muted-foreground list-decimal list-inside">
                    <li>{t("صور إيصال التحويل", "Take a screenshot of the transfer receipt")}</li>
                    <li>{t("ارفع الإيصال أدناه للتأكيد", "Upload the receipt below to confirm")}</li>
                    <li>{t("سيظهر لك رابط التواصل مع المستشار", "The consultant contact link will appear")}</li>
                  </ol>
                </div>

                <div className="mt-3 text-xs text-muted-foreground bg-muted/30 rounded-lg p-3">
                  <p className="font-medium text-navy mb-1">{t("سياسة التعديلات:", "Revision Policy:")}</p>
                  <p>{t("جولتين من التعديلات مشمولة مع كل خدمة. لمزيد من التفاصيل راجع سياسة الاسترداد.", "Two rounds of revisions included with every service. See our refund policy for details.")}</p>
                  <Link href="/refund" className="text-gold hover:underline mt-1 inline-block">{t("سياسة الاسترداد الكاملة", "Full Refund Policy")}</Link>
                </div>

                <OrderReceiptStep
                  serviceId={selectedService.id}
                  serviceName={lang === "ar" ? selectedService.titleAr : selectedService.titleEn}
                  category={selectedService.id === "consultation" ? "consultation" : "application"}
                  amountUsd={selectedService.priceUSD}
                  amountSar={selectedService.priceSAR}
                  lang={lang}
                  renderContact={({ reference, registerContact }) => (
                    <div className="mt-4">
                      <a onClick={registerContact} href={tgLink(`مرحبا، أريد حجز خدمة ${lang === "ar" ? selectedService.titleAr : selectedService.titleEn}. رقم الطلب: ${reference}`)} target="_blank" rel="noopener noreferrer" className="block">
                        <Button className="w-full bg-[#0088cc] hover:bg-[#006fa8] text-white font-bold">
                          <MessageCircle className="w-5 h-5 me-2" />
                          {t("تواصل مع المستشار عبر تيليجرام", "Contact Consultant via Telegram")}
                        </Button>
                      </a>
                    </div>
                  )}
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* FAQ Section */}
      <section className="py-12 lg:py-16 bg-white">
        <div className="container max-w-4xl">
          <h2 className="text-2xl font-bold text-navy mb-8 text-center">
            {t("أسئلة شائعة عن خدماتنا", "Frequently Asked Questions About Our Services")}
          </h2>
          <div className="space-y-3">
            {[
              { q: t("كيف أحجز استشارة؟", "How do I book a consultation?"), a: t("اختر الخدمة وأكمل الدفع ثم ارفع الإيصال. سيظهر لك رابط التواصل مع المستشار لتحديد الموعد. الاستشارة 45 دقيقة عبر Zoom.", "Choose a service, complete payment, and upload the receipt. The consultant contact link will appear to schedule. The consultation is 45 minutes via Zoom.") },
              { q: t("ما الفرق بين الباقة الأساسية والشاملة لكندا؟", "What's the difference between Basic and Premium Canada packages?"), a: t("الأساسية تشمل القبول الجامعي فقط. الشاملة تغطي كل شيء من القبول إلى الفيزا والسكن والاستقرار.", "Basic covers university admission only. Premium covers everything from admission to visa, housing, and settlement.") },
              { q: t("هل تضمنون القبول أو الحصول على منحة؟", "Do you guarantee admission or a scholarship?"), a: t("لا. خدماتنا استشارية ولا تضمن القبول في جامعة أو الحصول على منحة أو تأشيرة. نساعدك في تحسين جودة ملفك وفهم خطوات التقديم بوضوح.", "No. Our services are advisory and do not guarantee admission, a scholarship, or a visa. We help you improve your application quality and understand the steps clearly.") },
              { q: t("كم يستغرق تجهيز ملف التقديم؟", "How long does it take to prepare an application file?"), a: t("عادة من 3 إلى 7 أيام عمل حسب الخدمة المطلوبة وجاهزية مستنداتك.", "Usually 3 to 7 business days depending on the service and your document readiness.") },
              { q: t("هل تقدمون خدمات لغير العرب؟", "Do you serve non-Arab students?"), a: t("خدماتنا موجهة بشكل أساسي للطلاب العرب لكن يمكننا مساعدة أي طالب يتحدث العربية أو الإنجليزية.", "Our services primarily target Arab students, but we can assist any student who speaks Arabic or English.") },
            ].map((item, i) => (
              <details key={i} className="group bg-cream rounded-xl border border-border/50 overflow-hidden">
                <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-gold/5 transition-colors">
                  <span className="font-medium text-navy text-sm">{item.q}</span>
                  <ChevronRight className="w-4 h-4 text-muted-foreground group-open:rotate-90 transition-transform" />
                </summary>
                <div className="px-4 pb-4 text-sm text-muted-foreground leading-relaxed">
                  {item.a}
                </div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Payment Modal for Canada packages */}
      <AnimatePresence>
        {selectedCanadaPackage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
            onClick={() => setSelectedCanadaPackage(null)}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-y-auto"
              role="dialog"
              aria-modal="true"
              aria-labelledby="canada-order-title"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="p-6 border-b border-border/50 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
                <div>
                  <h3 id="canada-order-title" className="font-bold text-navy text-lg">
                    {t("إتمام الطلب", "Complete Your Order")}
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    {lang === "ar" ? selectedCanadaPackage.tierAr : selectedCanadaPackage.tierEn}
                  </p>
                </div>
                <button onClick={() => setSelectedCanadaPackage(null)} aria-label={t("إغلاق نافذة الطلب", "Close order dialog")} className="p-2 hover:bg-muted rounded-lg">
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="p-6">
                <div className="bg-navy/5 rounded-xl p-4 mb-6">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">{t("المبلغ المطلوب", "Amount Due")}</span>
                    <div className="text-end">
                      <div className="text-xl font-bold text-navy">${selectedCanadaPackage.priceUSD} USD</div>
                      <div className="text-xs text-muted-foreground">~{selectedCanadaPackage.priceSAR} {t("ريال", "SAR")}</div>
                    </div>
                  </div>
                </div>

                <div className="bg-gold/5 rounded-xl p-4 mb-6 border border-gold/20">
                  <h5 className="font-bold text-navy text-sm mb-2">{t("ملاحظة مهمة", "Important Note")}</h5>
                  <p className="text-muted-foreground text-xs leading-relaxed">
                    {t(
                      "الأسعار أعلاه هي أتعاب الخدمة فقط. رسوم القبول الجامعي (~$200) ورسوم التأشيرة والبصمات (~$200) تُدفع مباشرة للجهات الرسمية وليست مشمولة في السعر.",
                      "Prices above are service fees only. University admission fees (~$200) and visa/biometrics fees (~$200) are paid directly to official bodies and are not included in the price."
                    )}
                  </p>
                </div>

                <h4 className="font-bold text-navy mb-4 text-sm">{t("طرق الدفع المتاحة", "Available Payment Methods")}</h4>

                <div className="space-y-4">
                  {paymentMethods.map((pm) => (
                    <div key={pm.region.en} className="border border-border/50 rounded-xl overflow-hidden">
                      <div className="bg-muted/50 px-4 py-3 flex items-center gap-2">
                        <pm.icon className="w-4 h-4 text-gold" />
                        <span className="font-semibold text-navy text-sm">{lang === "ar" ? pm.region.ar : pm.region.en}</span>
                      </div>
                      <div className="p-4 space-y-3">
                        {pm.methods.map((method) => (
                          <div key={method.name.en}>
                            <div className="text-sm font-medium text-navy mb-2">{lang === "ar" ? method.name.ar : method.name.en}</div>
                            {method.details.map((detail) => (
                              <div key={detail.value} className="flex items-center justify-between py-1.5 text-sm">
                                <span className="text-muted-foreground">{lang === "ar" ? detail.label.ar : detail.label.en}</span>
                                <div className="flex items-center gap-2">
                                  {"isLink" in detail && detail.isLink ? (
                                    <a href={detail.value} target="_blank" rel="noopener noreferrer" className="text-gold hover:underline text-xs" dir="ltr">
                                      {detail.value.replace("https://", "").substring(0, 30)}...
                                    </a>
                                  ) : (
                                    <span className="font-mono text-xs text-navy" dir="ltr">{detail.value}</span>
                                  )}
                                  <button
                                    onClick={() => copyToClipboard(detail.value)}
                                    className="p-1 hover:bg-muted rounded"
                                    title={t("نسخ", "Copy")}
                                  >
                                    <Copy className="w-3.5 h-3.5 text-muted-foreground" />
                                  </button>
                                </div>
                              </div>
                            ))}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6 bg-gold/10 rounded-xl p-4">
                  <h5 className="font-bold text-navy text-sm mb-2">{t("خطوات البدء", "How to Get Started")}</h5>
                  <ol className="space-y-2 text-sm text-muted-foreground list-decimal list-inside">
                    <li>{t("ادفع مقدم 50% لتأكيد الحجز", "Pay 50% deposit to confirm booking")}</li>
                    <li>{t("سنتواصل معك خلال 24 ساعة لبدء دراسة ملفك", "We'll contact you within 24 hours to start reviewing your file")}</li>
                    <li>{t("يُدفع المبلغ المتبقي بعد الحصول على القبول الجامعي", "Remaining balance due after university admission is obtained")}</li>
                  </ol>
                </div>

                <OrderReceiptStep
                  serviceId={selectedCanadaPackage.id}
                  serviceName={lang === "ar" ? selectedCanadaPackage.tierAr : selectedCanadaPackage.tierEn}
                  category="canada"
                  amountUsd={selectedCanadaPackage.priceUSD / 2}
                  amountSar={selectedCanadaPackage.priceSAR / 2}
                  lang={lang}
                  renderContact={({ reference, registerContact }) => (
                    <div className="mt-4 space-y-3">
                      <a onClick={() => { recordLead("canada_whatsapp_opened", selectedCanadaPackage.id); registerContact(); }} href={waDirectLink(`مرحبا، أريد بدء ${lang === "ar" ? selectedCanadaPackage.tierAr : selectedCanadaPackage.tierEn} للدراسة في كندا. رقم الطلب: ${reference}`)} target="_blank" rel="noopener noreferrer" className="block">
                        <Button className="w-full bg-[#25D366] hover:bg-[#1da851] text-white font-bold"><MessageCircle className="w-5 h-5 me-2" />{t("تواصل عبر واتساب", "Contact via WhatsApp")}</Button>
                      </a>
                      <a onClick={registerContact} href={tgLink(`مرحبا، أريد بدء ${lang === "ar" ? selectedCanadaPackage.tierAr : selectedCanadaPackage.tierEn} للدراسة في كندا. رقم الطلب: ${reference}`)} target="_blank" rel="noopener noreferrer" className="block">
                        <Button variant="outline" className="w-full border-[#0088cc]/30 text-[#0088cc] hover:bg-[#0088cc]/5 font-bold"><MessageCircle className="w-5 h-5 me-2" />{t("تواصل عبر تيليجرام", "Contact via Telegram")}</Button>
                      </a>
                    </div>
                  )}
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Payment Modal for Digital Services */}
      <AnimatePresence>
        {selectedDigitalService && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
            onClick={() => setSelectedDigitalService(null)}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[85vh] overflow-y-auto"
              role="dialog"
              aria-modal="true"
              aria-labelledby="digital-order-title"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="p-6 border-b border-border/50 flex items-center justify-between sticky top-0 bg-white rounded-t-2xl z-10">
                <div>
                  <h3 id="digital-order-title" className="font-bold text-navy text-lg">
                    {t("إتمام الطلب", "Complete Your Order")}
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    {lang === "ar" ? selectedDigitalService.titleAr : selectedDigitalService.titleEn}
                  </p>
                </div>
                <button onClick={() => setSelectedDigitalService(null)} aria-label={t("إغلاق نافذة الطلب", "Close order dialog")} className="p-2 hover:bg-muted rounded-lg">
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="p-6">
                <div className="bg-navy/5 rounded-xl p-4 mb-6">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">{t("المبلغ المطلوب", "Amount Due")}</span>
                    <div className="text-end">
                      <div className="text-xl font-bold text-navy">${selectedDigitalService.priceUSD} USD</div>
                      <div className="text-xs text-muted-foreground">~{selectedDigitalService.priceSAR} {t("ريال", "SAR")}</div>
                      <div className="text-xs text-muted-foreground line-through">{t("بدلاً من", "Instead of")} {selectedDigitalService.originalPriceSAR} {t("ريال", "SAR")}</div>
                    </div>
                  </div>
                </div>

                <div className="bg-gold/5 rounded-xl p-4 mb-6 border border-gold/20">
                  <h5 className="font-bold text-navy text-sm mb-2">{t("ماذا يشمل الاشتراك", "What's Included")}</h5>
                  <ul className="space-y-1.5">
                    {(lang === "ar" ? selectedDigitalService.includesAr : selectedDigitalService.includesEn).map((item) => (
                      <li key={item} className="flex items-start gap-2 text-sm text-muted-foreground">
                        <Check className="w-3.5 h-3.5 text-gold mt-0.5 shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mb-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-xs leading-relaxed text-amber-900">
                  <p className="font-bold">{t("إفصاح مهم قبل الدفع", "Important disclosure before payment")}</p>
                  <p className="mt-1">{t("هذه خدمة مساعدة لتفعيل أو تنظيم اشتراك رقمي، وليست بيعاً أو تمثيلاً رسمياً للمنصة المذكورة. تخضع الإتاحة والتفعيل لشروط المنصة الخارجية وحالة الحساب، ويُراجع كل طلب يدوياً بعد استلام الإيصال. راجع سياسة الاسترداد قبل الدفع.", "This is an assistance service for activating or arranging a digital subscription; it is not an official sale by or representation of the named platform. Availability and activation depend on the third-party platform terms and account status, and every order is reviewed manually after the receipt is received. Review the refund policy before paying.")}</p>
                  <Link href="/refund" className="mt-2 inline-block font-semibold text-amber-900 underline underline-offset-2">{t("سياسة الاسترداد", "Refund policy")}</Link>
                </div>

                <h4 className="font-bold text-navy mb-4 text-sm">{t("طرق الدفع المتاحة", "Available Payment Methods")}</h4>

                <div className="space-y-4">
                  {paymentMethods.map((pm) => (
                    <div key={pm.region.en} className="border border-border/50 rounded-xl overflow-hidden">
                      <div className="bg-muted/50 px-4 py-3 flex items-center gap-2">
                        <pm.icon className="w-4 h-4 text-gold" />
                        <span className="font-semibold text-navy text-sm">{lang === "ar" ? pm.region.ar : pm.region.en}</span>
                      </div>
                      <div className="p-4 space-y-3">
                        {pm.methods.map((method) => (
                          <div key={method.name.en}>
                            <div className="text-sm font-medium text-navy mb-2">{lang === "ar" ? method.name.ar : method.name.en}</div>
                            {method.details.map((detail) => (
                              <div key={detail.value} className="flex items-center justify-between py-1.5 text-sm">
                                <span className="text-muted-foreground">{lang === "ar" ? detail.label.ar : detail.label.en}</span>
                                <div className="flex items-center gap-2">
                                  {"isLink" in detail && detail.isLink ? (
                                    <a href={detail.value} target="_blank" rel="noopener noreferrer" className="text-gold hover:underline text-xs" dir="ltr">
                                      {detail.value.replace("https://", "").substring(0, 30)}...
                                    </a>
                                  ) : (
                                    <span className="font-mono text-xs text-navy" dir="ltr">{detail.value}</span>
                                  )}
                                  <button
                                    onClick={() => copyToClipboard(detail.value)}
                                    className="p-1 hover:bg-muted rounded"
                                    title={t("نسخ", "Copy")}
                                  >
                                    <Copy className="w-3.5 h-3.5 text-muted-foreground" />
                                  </button>
                                </div>
                              </div>
                            ))}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6 bg-gold/10 rounded-xl p-4">
                  <h5 className="font-bold text-navy text-sm mb-2">{t("بعد التحويل", "After Transfer")}</h5>
                  <ol className="space-y-2 text-sm text-muted-foreground list-decimal list-inside">
                    <li>{t("صور إيصال التحويل", "Take a screenshot of the transfer receipt")}</li>
                    <li>{t("ارفع الإيصال أدناه للتأكيد", "Upload the receipt below to confirm")}</li>
                    <li>{t("سنفعّل الاشتراك خلال 24 ساعة", "We'll activate the subscription within 24 hours")}</li>
                  </ol>
                </div>

                <OrderReceiptStep
                  serviceId={selectedDigitalService.id}
                  serviceName={lang === "ar" ? selectedDigitalService.titleAr : selectedDigitalService.titleEn}
                  category="digital"
                  amountUsd={selectedDigitalService.priceUSD}
                  amountSar={selectedDigitalService.priceSAR}
                  lang={lang}
                  renderContact={({ reference, registerContact }) => (
                    <div className="mt-4">
                      <a onClick={registerContact} href={tgLink(`مرحبا، أريد طلب ${lang === "ar" ? selectedDigitalService.titleAr : selectedDigitalService.titleEn}. رقم الطلب: ${reference}`)} target="_blank" rel="noopener noreferrer" className="block">
                        <Button className="w-full bg-[#0088cc] hover:bg-[#006fa8] text-white font-bold"><MessageCircle className="w-5 h-5 me-2" />{t("تواصل مع المستشار", "Contact the Consultant")}</Button>
                      </a>
                    </div>
                  )}
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
