"use client";

import { UI, SITE, type Lang } from "@/lib/config";
import { useState, useEffect } from "react";
import Link from "next/link";
import {
  MagnifyingGlassIcon,
  ChevronDownIcon,
  ChevronRightIcon,
} from "@heroicons/react/24/outline";

// Help categories with collapsible sections
const HELP_CATEGORIES = {
  gettingStarted: {
    en: "Getting Started",
    ar: "البدء",
    number: "01",
    sections: [
      {
        id: "signup",
        titleEn: "How to Sign Up",
        titleAr: "كيفية التسجيل",
        contentEn: [
          { type: "heading", text: "Step-by-Step Sign Up Process" },
          {
            type: "step",
            number: "1",
            title: "Choose Your Plan",
            items: [
              "Visit our Pricing Page to compare plans",
              "Select the plan that fits your business size and needs",
              "All plans include a 7-day free trial - no credit card required",
            ],
          },
          {
            type: "step",
            number: "2",
            title: "Create Your Account",
            items: [
              'Click "Get Started" on your chosen plan',
              "Sign up with Google (fastest) or email/password",
              "Verify your email address with the code we send you",
            ],
          },
          {
            type: "step",
            number: "3",
            title: "Complete Company Information",
            items: [
              "Business name and industry type",
              "Contact details and location",
              "Operating hours and service offerings",
            ],
          },
          {
            type: "step",
            number: "4",
            title: "Start Your Free Trial",
            items: [
              "Access your dashboard immediately",
              "Explore all features with no commitment",
              "Get onboarding support from our team",
            ],
          },
          { type: "subheading", text: "Who Can Sign Up?" },
          {
            type: "checklist",
            items: [
              "Healthcare clinics and labs",
              "Beauty salons and spas",
              "Hotels and restaurants",
              "Sports academies and gyms",
              "Property management companies",
              "Educational institutions",
              "Any appointment-based business in the GCC",
            ],
          },
        ],
        contentAr: [
          { type: "heading", text: "خطوات التسجيل" },
          {
            type: "step",
            number: "1",
            title: "اختر باقتك",
            items: [
              "قم بزيارة صفحة التسعير لمقارنة الباقات",
              "اختر الباقة المناسبة لحجم عملك واحتياجاتك",
              "جميع الباقات تتضمن تجربة مجانية لمدة 7 أيام - لا حاجة لبطاقة ائتمان",
            ],
          },
          {
            type: "step",
            number: "2",
            title: "أنشئ حسابك",
            items: [
              'انقر على "ابدأ الآن" على الباقة المختارة',
              "سجل باستخدام جوجل (الأسرع) أو البريد الإلكتروني/كلمة المرور",
              "تحقق من عنوان بريدك الإلكتروني بالرمز الذي نرسله لك",
            ],
          },
          {
            type: "step",
            number: "3",
            title: "أكمل معلومات الشركة",
            items: [
              "اسم النشاط ونوع الصناعة",
              "تفاصيل الاتصال والموقع",
              "ساعات العمل والخدمات المقدمة",
            ],
          },
          {
            type: "step",
            number: "4",
            title: "ابدأ تجربتك المجانية",
            items: [
              "الوصول إلى لوحة التحكم فوراً",
              "استكشف جميع المزايا بدون التزام",
              "احصل على دعم التهيئة من فريقنا",
            ],
          },
          { type: "subheading", text: "من يمكنه التسجيل؟" },
          {
            type: "checklist",
            items: [
              "العيادات الطبية والمختبرات",
              "صالونات التجميل والمنتجعات",
              "الفنادق والمطاعم",
              "الأكاديميات الرياضية والنوادي",
              "شركات إدارة الممتلكات",
              "المؤسسات التعليمية",
              "أي نشاط يعتمد على المواعيد في دول الخليج",
            ],
          },
        ],
      },
      {
        id: "requirements",
        titleEn: "What We Need From You",
        titleAr: "ما نحتاجه منك",
        contentEn: [
          { type: "heading", text: "Information Required for Setup" },
          {
            type: "category",
            title: "Business Information",
            items: [
              "Legal business name and trade license (optional for trial)",
              "Business category/industry type",
              "Primary contact person name and role",
              "Business phone number (for WhatsApp integration)",
            ],
          },
          {
            type: "category",
            title: "Service Details",
            items: [
              "List of services you offer",
              "Service duration and pricing (if applicable)",
              "Staff members who provide services",
              "Operating hours and days",
            ],
          },
          {
            type: "category",
            title: "WhatsApp Business Account",
            items: [
              "Verified WhatsApp Business number",
              "Admin access to the WhatsApp Business account",
              "Business profile information (name, logo, description)",
            ],
          },
          {
            type: "category",
            title: "Payment Information (After Trial)",
            items: [
              "Preferred payment method (credit card, bank transfer, digital wallet)",
              "Billing contact and address",
              "VAT/Tax registration number (if applicable)",
            ],
          },
          {
            type: "note",
            text: "Don't Have Everything Ready? No problem! You can start your free trial with just basic information and add details later. Our team will guide you through the setup process.",
          },
        ],
        contentAr: [
          { type: "heading", text: "المعلومات المطلوبة للإعداد" },
          {
            type: "category",
            title: "معلومات النشاط",
            items: [
              "الاسم القانوني للنشاط والرخصة التجارية (اختياري للتجربة)",
              "فئة/نوع الصناعة",
              "اسم ووظيفة جهة الاتصال الرئيسية",
              "رقم هاتف النشاط (لتكامل واتساب)",
            ],
          },
          {
            type: "category",
            title: "تفاصيل الخدمات",
            items: [
              "قائمة الخدمات التي تقدمها",
              "مدة الخدمة والتسعير (إن وجد)",
              "أعضاء الفريق الذين يقدمون الخدمات",
              "ساعات وأيام العمل",
            ],
          },
          {
            type: "category",
            title: "حساب واتساب بزنس",
            items: [
              "رقم واتساب بزنس موثق",
              "صلاحية الوصول الإداري لحساب واتساب بزنس",
              "معلومات الملف التجاري (الاسم، الشعار، الوصف)",
            ],
          },
          {
            type: "category",
            title: "معلومات الدفع (بعد التجربة)",
            items: [
              "طريقة الدفع المفضلة (بطاقة ائتمان، تحويل بنكي، محفظة رقمية)",
              "جهة الاتصال وعنوان الفوترة",
              "رقم تسجيل ضريبة القيمة المضافة (إن وجد)",
            ],
          },
          {
            type: "note",
            text: "ليس لديك كل شيء جاهز؟ لا مشكلة! يمكنك بدء تجربتك المجانية بمعلومات أساسية فقط وإضافة التفاصيل لاحقاً. سيرشدك فريقنا خلال عملية الإعداد.",
          },
        ],
      },
    ],
  },
  payments: {
    en: "Payments & Billing",
    ar: "الدفع والفوترة",
    number: "02",
    sections: [
      {
        id: "payment-methods",
        titleEn: "Accepted Payment Methods",
        titleAr: "طرق الدفع المقبولة",
        contentEn: [
          { type: "heading", text: "How to Pay for Mawidi Services" },
          {
            type: "category",
            title: "Credit & Debit Cards",
            items: [
              "Visa, Mastercard, American Express",
              "Automatic monthly or yearly billing",
              "Secure payment processing with 3D Secure",
              "Card details encrypted and stored securely",
            ],
          },
          {
            type: "category",
            title: "Bank Transfers",
            items: [
              "Direct bank transfers accepted for annual plans",
              "Wire transfer instructions provided after signup",
              "Processing time: 1-3 business days",
              "Ideal for larger organizations",
            ],
          },
          {
            type: "category",
            title: "Digital Wallets",
            items: [
              "Apple Pay, Google Pay",
              "PayPal (selected regions)",
              "One-click checkout",
              "Secure and convenient",
            ],
          },
          { type: "subheading", text: "Supported Currencies" },
          {
            type: "grid",
            items: [
              "GBP",
              "USD",
              "EUR",
              "SAR",
              "AED",
              "QAR",
              "KWD",
              "BHD",
              "OMR",
            ],
          },
          {
            type: "highlight",
            title: "No Hidden Fees",
            items: [
              "What you see is what you pay",
              "One-time setup fee clearly stated",
              "No surprise charges",
              "Cancel anytime with no penalties",
            ],
          },
        ],
        contentAr: [
          { type: "heading", text: "كيفية الدفع لخدمات مويدي" },
          {
            type: "category",
            title: "بطاقات الائتمان والخصم",
            items: [
              "فيزا، ماستركارد، أمريكان إكسبريس",
              "فوترة تلقائية شهرية أو سنوية",
              "معالجة دفع آمنة مع 3D Secure",
              "تفاصيل البطاقة مشفرة ومحفوظة بأمان",
            ],
          },
          {
            type: "category",
            title: "التحويلات البنكية",
            items: [
              "التحويلات البنكية المباشرة مقبولة للباقات السنوية",
              "تعليمات التحويل البنكي تُقدم بعد التسجيل",
              "وقت المعالجة: 1-3 أيام عمل",
              "مثالي للمؤسسات الكبيرة",
            ],
          },
          {
            type: "category",
            title: "المحافظ الرقمية",
            items: [
              "Apple Pay، Google Pay",
              "PayPal (مناطق مختارة)",
              "دفع بنقرة واحدة",
              "آمن ومريح",
            ],
          },
          { type: "subheading", text: "العملات المدعومة" },
          {
            type: "grid",
            items: [
              "GBP",
              "USD",
              "EUR",
              "SAR",
              "AED",
              "QAR",
              "KWD",
              "BHD",
              "OMR",
            ],
          },
          {
            type: "highlight",
            title: "لا رسوم مخفية",
            items: [
              "ما تراه هو ما تدفعه",
              "رسوم الإعداد لمرة واحدة محددة بوضوح",
              "لا رسوم مفاجئة",
              "الإلغاء في أي وقت بدون غرامات",
            ],
          },
        ],
      },
      {
        id: "pricing-plans",
        titleEn: "Understanding Our Pricing Plans",
        titleAr: "فهم باقات التسعير",
        contentEn: [
          { type: "heading", text: "Choose the Right Plan for Your Business" },
          {
            type: "plan",
            name: "Starter",
            price: "£179/month",
            popular: false,
            features: [
              "AI Agent for FAQ & Auto-Reply",
              "Automated Appointment Booking",
              "WhatsApp Integration",
              "Basic Analytics",
              "Email Support",
            ],
          },
          {
            type: "plan",
            name: "Professional",
            price: "£209/month",
            popular: true,
            features: [
              "Everything in Starter",
              "CRM Dashboard",
              "Quotations Management",
              "Deposit & No-Show Fee Collection",
              "Priority Support",
            ],
          },
          {
            type: "plan",
            name: "Business",
            price: "£249/month",
            popular: false,
            features: [
              "Everything in Professional",
              "Multi-Staff Login",
              "Recurring Appointments",
              "AI Voice Receptionist",
              "Advanced Scheduling",
            ],
          },
          {
            type: "plan",
            name: "Enterprise",
            price: "£349/month",
            popular: false,
            features: [
              "Everything in Business",
              "Multi-Inbox Social Management",
              "AI Social Media Assistant",
              "Content Scheduling",
              "Dedicated Account Manager",
            ],
          },
          {
            type: "note",
            text: "All plans include: 7-day free trial • One-time setup fee (£199) • Free updates • GDPR compliance",
          },
        ],
        contentAr: [
          { type: "heading", text: "اختر الباقة المناسبة لعملك" },
          {
            type: "plan",
            name: "المبتدئ",
            price: "£179/شهرياً",
            popular: false,
            features: [
              "وكيل ذكي للأسئلة الشائعة والردود التلقائية",
              "حجز المواعيد الآلي",
              "تكامل واتساب",
              "تحليلات أساسية",
              "دعم البريد الإلكتروني",
            ],
          },
          {
            type: "plan",
            name: "المحترف",
            price: "£209/شهرياً",
            popular: true,
            features: [
              "كل مزايا الباقة المبتدئة",
              "لوحة تحكم CRM",
              "إدارة عروض الأسعار",
              "تحصيل المقدمات ورسوم عدم الحضور",
              "دعم ذو أولوية",
            ],
          },
          {
            type: "plan",
            name: "الأعمال",
            price: "£249/شهرياً",
            popular: false,
            features: [
              "كل مزايا الباقة المحترفة",
              "تسجيل دخول متعدد للموظفين",
              "مواعيد متكررة",
              "موظفة استقبال صوتية ذكية",
              "جدولة متقدمة",
            ],
          },
          {
            type: "plan",
            name: "المؤسسات",
            price: "£349/شهرياً",
            popular: false,
            features: [
              "كل مزايا باقة الأعمال",
              "إدارة وسائل التواصل متعددة الصناديق",
              "مساعد وسائل تواصل ذكي",
              "جدولة المحتوى",
              "مدير حساب مخصص",
            ],
          },
          {
            type: "note",
            text: "جميع الباقات تتضمن: تجربة مجانية 7 أيام • رسوم إعداد لمرة واحدة (£199) • تحديثات مجانية • امتثال GDPR",
          },
        ],
      },
    ],
  },
  troubleshooting: {
    en: "Common Issues & Solutions",
    ar: "المشاكل الشائعة والحلول",
    number: "03",
    sections: [
      {
        id: "quick-fixes",
        titleEn: "Quick Fixes",
        titleAr: "إصلاحات سريعة",
        contentEn: [
          { type: "heading", text: "Common Problems You Can Solve Yourself" },
          {
            type: "issue",
            title: "Can't Sign In?",
            solutions: [
              "Check your email/password are correct",
              'Try "Forgot Password" to reset',
              "Clear browser cache and cookies",
              "Try a different browser or incognito mode",
              "Make sure cookies are enabled",
            ],
          },
          {
            type: "issue",
            title: "Not Receiving Verification Email?",
            solutions: [
              "Check spam/junk folder",
              "Wait 5-10 minutes (emails can be delayed)",
              "Check the email address you entered is correct",
              "Request a new verification code",
              "Whitelist emails from @mawidi.com",
            ],
          },
          {
            type: "issue",
            title: "WhatsApp Integration Not Working?",
            solutions: [
              "Verify your WhatsApp Business number is correct",
              "Check you have admin access to the account",
              "Ensure WhatsApp Business is active and not suspended",
              "Reconnect your WhatsApp account in settings",
              "Contact support if issue persists",
            ],
          },
          {
            type: "issue",
            title: "Dashboard Loading Slowly?",
            solutions: [
              "Check your internet connection",
              "Clear browser cache",
              "Close unnecessary tabs",
              "Try a different browser",
              "Disable browser extensions temporarily",
            ],
          },
          {
            type: "issue",
            title: "Payment Failed?",
            solutions: [
              "Verify card details are correct",
              "Check card has sufficient funds",
              "Ensure card is enabled for international transactions",
              "Try a different payment method",
              "Contact your bank if card is declined",
            ],
          },
        ],
        contentAr: [
          { type: "heading", text: "المشاكل الشائعة التي يمكنك حلها بنفسك" },
          {
            type: "issue",
            title: "لا يمكنك تسجيل الدخول؟",
            solutions: [
              "تحقق من صحة البريد الإلكتروني/كلمة المرور",
              'جرب "نسيت كلمة المرور" لإعادة التعيين',
              "امسح ذاكرة التخزين المؤقت وملفات تعريف الارتباط",
              "جرب متصفحاً مختلفاً أو وضع التصفح الخاص",
              "تأكد من تفعيل ملفات تعريف الارتباط",
            ],
          },
          {
            type: "issue",
            title: "لا تتلقى بريد التحقق الإلكتروني؟",
            solutions: [
              "تحقق من مجلد الرسائل غير المرغوب فيها",
              "انتظر 5-10 دقائق (قد تتأخر الرسائل)",
              "تأكد من صحة عنوان البريد الإلكتروني المدخل",
              "اطلب رمز تحقق جديد",
              "أضف البريد من @mawidi.com إلى القائمة البيضاء",
            ],
          },
          {
            type: "issue",
            title: "تكامل واتساب لا يعمل؟",
            solutions: [
              "تحقق من صحة رقم واتساب بزنس",
              "تأكد من أن لديك صلاحية الوصول الإداري للحساب",
              "تأكد من أن واتساب بزنس نشط وغير موقوف",
              "أعد ربط حساب واتساب في الإعدادات",
              "اتصل بالدعم إذا استمرت المشكلة",
            ],
          },
          {
            type: "issue",
            title: "لوحة التحكم تحمّل ببطء؟",
            solutions: [
              "تحقق من اتصالك بالإنترنت",
              "امسح ذاكرة التخزين المؤقت للمتصفح",
              "أغلق علامات التبويب غير الضرورية",
              "جرب متصفحاً مختلفاً",
              "عطّل إضافات المتصفح مؤقتاً",
            ],
          },
          {
            type: "issue",
            title: "فشل الدفع؟",
            solutions: [
              "تحقق من صحة تفاصيل البطاقة",
              "تأكد من وجود أموال كافية في البطاقة",
              "تأكد من تفعيل البطاقة للمعاملات الدولية",
              "جرب طريقة دفع مختلفة",
              "اتصل بالبنك إذا رُفضت البطاقة",
            ],
          },
        ],
      },
    ],
  },
};

// Content renderer component
function ContentRenderer({
  content,
  isAr,
}: {
  content: unknown[];
  isAr: boolean;
}) {
  return (
    <div className="space-y-6">
      {content.map((block: unknown, idx: number) => {
        const item = block as {
          type: string;
          text?: string;
          title?: string;
          number?: string;
          items?: string[];
          solutions?: string[];
          name?: string;
          price?: string;
          popular?: boolean;
          features?: string[];
        };

        switch (item.type) {
          case "heading":
            return (
              <h4 key={idx} className="text-xl font-bold text-[#1E293B] mb-4">
                {item.text}
              </h4>
            );

          case "subheading":
            return (
              <h5
                key={idx}
                className="text-lg font-semibold text-[#1E293B] mt-8 mb-3"
              >
                {item.text}
              </h5>
            );

          case "step":
            return (
              <div key={idx} className="flex gap-4 mb-4">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#10B981]/10 flex items-center justify-center">
                  <span className="text-sm font-bold text-[#10B981]">
                    {item.number}
                  </span>
                </div>
                <div className="flex-1">
                  <h5 className="font-semibold text-[#1E293B] mb-2">
                    {item.title}
                  </h5>
                  <ul className="space-y-1.5">
                    {item.items?.map((listItem: string, i: number) => (
                      <li
                        key={i}
                        className="flex items-start gap-2 text-[#64748B]"
                      >
                        <span className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                        <span>{listItem}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            );

          case "category":
            return (
              <div key={idx} className="mb-6">
                <h5 className="font-semibold text-[#1E293B] mb-3 flex items-center gap-2">
                  <span className="w-1 h-4 bg-[#10B981]" />
                  {item.title}
                </h5>
                <ul className="space-y-2 ps-4">
                  {item.items?.map((listItem: string, i: number) => (
                    <li
                      key={i}
                      className="flex items-start gap-2 text-[#64748B]"
                    >
                      <span className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span>{listItem}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );

          case "checklist":
            return (
              <ul key={idx} className="grid sm:grid-cols-2 gap-2">
                {item.items?.map((listItem: string, i: number) => (
                  <li key={i} className="flex items-start gap-2 text-[#64748B]">
                    <span className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span>{listItem}</span>
                  </li>
                ))}
              </ul>
            );

          case "grid":
            return (
              <div key={idx} className="flex flex-wrap gap-2 my-4">
                {item.items?.map((currency: string, i: number) => (
                  <span
                    key={i}
                    className="px-3 py-1.5 bg-[#FAFAFA] border border-[#E2E8F0] text-[#1E293B] text-sm font-medium"
                  >
                    {currency}
                  </span>
                ))}
              </div>
            );

          case "highlight":
            return (
              <div
                key={idx}
                className="bg-[#10B981]/5 border-s-4 border-[#10B981] p-4 my-6"
              >
                <h5 className="font-semibold text-[#1E293B] mb-2">
                  {item.title}
                </h5>
                <ul className="space-y-1.5">
                  {item.items?.map((listItem: string, i: number) => (
                    <li
                      key={i}
                      className="flex items-start gap-2 text-[#64748B]"
                    >
                      <span className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span>{listItem}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );

          case "plan":
            return (
              <div
                key={idx}
                className={`border p-4 mb-4 ${item.popular ? "border-[#10B981] bg-[#10B981]/5" : "border-[#E2E8F0]"}`}
              >
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <h5 className="font-bold text-[#1E293B]">{item.name}</h5>
                    <span className="text-[#10B981] font-semibold">
                      {item.price}
                    </span>
                  </div>
                  {item.popular && (
                    <span className="px-2 py-1 bg-[#10B981] text-white text-xs font-medium">
                      {isAr ? "الأكثر شعبية" : "Most Popular"}
                    </span>
                  )}
                </div>
                <ul className="space-y-1.5">
                  {item.features?.map((feature: string, i: number) => (
                    <li
                      key={i}
                      className="flex items-start gap-2 text-[#64748B] text-sm"
                    >
                      <span className="w-1.5 h-1.5 bg-[#10B981] mt-1.5 flex-shrink-0" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );

          case "issue":
            return (
              <div key={idx} className="border border-[#E2E8F0] p-4 mb-4">
                <h5 className="font-semibold text-[#1E293B] mb-3 flex items-center gap-2">
                  <span className="w-2 h-2 bg-[#F59E0B] flex-shrink-0" />
                  {item.title}
                </h5>
                <ul className="space-y-1.5 ps-4">
                  {item.solutions?.map((solution: string, i: number) => (
                    <li
                      key={i}
                      className="flex items-start gap-2 text-[#64748B] text-sm"
                    >
                      <span className="w-1.5 h-1.5 bg-[#10B981] mt-1.5 flex-shrink-0" />
                      <span>{solution}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );

          case "note":
            return (
              <div
                key={idx}
                className="bg-[#FAFAFA] border border-[#E2E8F0] p-4 mt-6"
              >
                <p className="text-[#64748B] text-sm">{item.text}</p>
              </div>
            );

          default:
            return null;
        }
      })}
    </div>
  );
}

export default function HelpPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  const dict = UI[params.lang];
  const [searchQuery, setSearchQuery] = useState("");
  const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
  const [activeCategory, setActiveCategory] = useState("gettingStarted");

  const toggleSection = (categoryId: string, sectionId: string) => {
    const key = `${categoryId}-${sectionId}`;
    setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  // Scroll to category
  const scrollToCategory = (categoryId: string) => {
    setActiveCategory(categoryId);
    const element = document.getElementById(categoryId);
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  // Update active category on scroll
  useEffect(() => {
    const handleScroll = () => {
      const categories = Object.keys(HELP_CATEGORIES);
      for (const catId of categories) {
        const element = document.getElementById(catId);
        if (element) {
          const rect = element.getBoundingClientRect();
          if (rect.top <= 200 && rect.bottom >= 200) {
            setActiveCategory(catId);
            break;
          }
        }
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Filter sections based on search
  const filteredCategories = Object.entries(HELP_CATEGORIES)
    .map(([catId, category]) => ({
      id: catId,
      ...category,
      sections: category.sections.filter((section) => {
        if (!searchQuery) return true;
        const searchLower = searchQuery.toLowerCase();
        const title = isAr ? section.titleAr : section.titleEn;
        return title.toLowerCase().includes(searchLower);
      }),
    }))
    .filter((cat) => cat.sections.length > 0);

  return (
    <main dir={dict.dir} className="min-h-screen bg-white">
      {/* Hero Section - Editorial Style */}
      <section className="bg-[#FAFAFA] border-b border-[#E2E8F0]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-16 lg:py-24">
            {/* Breadcrumb */}
            <div className="flex items-center gap-2 text-sm text-[#64748B] mb-8">
              <Link
                href={`/${params.lang}`}
                className="hover:text-[#10B981] transition-colors"
              >
                {isAr ? "الرئيسية" : "Home"}
              </Link>
              <ChevronRightIcon className="w-4 h-4" />
              <span className="text-[#1E293B] font-medium">
                {isAr ? "مركز المساعدة" : "Help Center"}
              </span>
            </div>

            {/* Hero Content */}
            <div className="grid lg:grid-cols-12 gap-8 lg:gap-16 items-start">
              <div className="lg:col-span-7">
                <div className="flex items-start gap-4 mb-6">
                  <span
                    className="text-6xl lg:text-7xl font-bold text-[#10B981]/20 leading-none"
                    dir="ltr"
                  >
                    ?
                  </span>
                  <div>
                    <h1 className="text-4xl lg:text-5xl font-bold text-[#1E293B] mb-4">
                      {isAr ? "مركز المساعدة" : "Help Center"}
                    </h1>
                    <p className="text-xl text-[#64748B] leading-relaxed">
                      {isAr
                        ? "كل ما تحتاج معرفته للبدء والنجاح مع مويدي"
                        : "Everything you need to get started and succeed with Mawidi"}
                    </p>
                  </div>
                </div>

                {/* Search Bar - Editorial Style */}
                <div className="mt-8">
                  <div className="relative">
                    <MagnifyingGlassIcon
                      className={`absolute top-1/2 -translate-y-1/2 h-5 w-5 text-[#64748B] ${isAr ? "right-4" : "left-4"}`}
                    />
                    <input
                      type="text"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      placeholder={
                        isAr ? "ابحث عن مساعدة..." : "Search for help..."
                      }
                      className={`w-full py-4 border-2 border-[#E2E8F0] bg-white text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#10B981] transition-colors ${isAr ? "pr-12 pl-4" : "pl-12 pr-4"}`}
                    />
                  </div>
                </div>
              </div>

              {/* Quick Stats */}
              <div className="lg:col-span-5">
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-white border border-[#E2E8F0] p-6">
                    <div className="text-3xl font-bold text-[#10B981] mb-1">
                      3
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {isAr ? "فئات المساعدة" : "Help Categories"}
                    </div>
                  </div>
                  <div className="bg-white border border-[#E2E8F0] p-6">
                    <div className="text-3xl font-bold text-[#10B981] mb-1">
                      5+
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {isAr ? "مقالات تفصيلية" : "Detailed Articles"}
                    </div>
                  </div>
                  <div className="bg-white border border-[#E2E8F0] p-6">
                    <div className="text-3xl font-bold text-[#10B981] mb-1">
                      24/7
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {isAr ? "دعم متاح" : "Support Available"}
                    </div>
                  </div>
                  <div className="bg-white border border-[#E2E8F0] p-6">
                    <div className="text-3xl font-bold text-[#10B981] mb-1">
                      &lt;1h
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {isAr ? "وقت الاستجابة" : "Response Time"}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Main Content with Sidebar */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid lg:grid-cols-12 gap-8 lg:gap-16">
          {/* Sidebar Navigation */}
          <aside
            className={`lg:col-span-3 ${isAr ? "lg:order-2" : "lg:order-1"}`}
          >
            <div className="sticky top-24">
              <h3 className="text-xs font-semibold text-[#64748B] uppercase tracking-wider mb-4">
                {isAr ? "الفئات" : "Categories"}
              </h3>
              <nav className="space-y-1">
                {Object.entries(HELP_CATEGORIES).map(([catId, category]) => (
                  <button
                    key={catId}
                    onClick={() => scrollToCategory(catId)}
                    className={`w-full flex items-center gap-3 px-3 py-2.5 text-sm transition-all ${
                      activeCategory === catId
                        ? "bg-[#10B981]/10 text-[#10B981] border-s-2 border-[#10B981]"
                        : "text-[#64748B] hover:text-[#1E293B] hover:bg-[#FAFAFA]"
                    }`}
                  >
                    <span className="font-mono text-xs opacity-60" dir="ltr">
                      {category.number}
                    </span>
                    <span className="font-medium">
                      {isAr ? category.ar : category.en}
                    </span>
                  </button>
                ))}
              </nav>

              {/* Contact Card */}
              <div className="mt-8 p-4 bg-[#FAFAFA] border border-[#E2E8F0]">
                <h4 className="font-semibold text-[#1E293B] mb-2">
                  {isAr ? "تحتاج مساعدة إضافية؟" : "Need more help?"}
                </h4>
                <p className="text-sm text-[#64748B] mb-4">
                  {isAr ? "تواصل مع فريق الدعم" : "Contact our support team"}
                </p>
                <Link
                  href={`/${params.lang}/contact`}
                  className="inline-flex items-center gap-2 text-sm font-medium text-[#10B981] hover:underline"
                >
                  {isAr ? "تواصل معنا" : "Contact us"}
                  <ChevronRightIcon
                    className={`w-4 h-4 ${isAr ? "rotate-180" : ""}`}
                  />
                </Link>
              </div>
            </div>
          </aside>

          {/* Main Content */}
          <div
            className={`lg:col-span-9 ${isAr ? "lg:order-1" : "lg:order-2"}`}
          >
            {filteredCategories.length > 0 ? (
              <div className="space-y-16">
                {filteredCategories.map((category) => (
                  <div
                    key={category.id}
                    id={category.id}
                    className="scroll-mt-24"
                  >
                    {/* Category Header */}
                    <div className="flex items-start gap-4 mb-8">
                      <span
                        className="text-5xl lg:text-6xl font-bold text-[#10B981]/20 leading-none"
                        dir="ltr"
                      >
                        {category.number}
                      </span>
                      <div>
                        <h2 className="text-2xl lg:text-3xl font-bold text-[#1E293B]">
                          {isAr ? category.ar : category.en}
                        </h2>
                        <div className="w-12 h-1 bg-[#10B981] mt-3" />
                      </div>
                    </div>

                    {/* Sections */}
                    <div className="space-y-4">
                      {category.sections.map((section) => {
                        const isOpen =
                          openSections[`${category.id}-${section.id}`];
                        return (
                          <div
                            key={section.id}
                            className="border border-[#E2E8F0] bg-white"
                          >
                            <button
                              onClick={() =>
                                toggleSection(category.id, section.id)
                              }
                              className="w-full flex items-center justify-between p-5 hover:bg-[#FAFAFA] transition-colors"
                            >
                              <h3 className="text-lg font-semibold text-[#1E293B] text-start">
                                {isAr ? section.titleAr : section.titleEn}
                              </h3>
                              <ChevronDownIcon
                                className={`w-5 h-5 text-[#64748B] transition-transform duration-200 flex-shrink-0 ${
                                  isOpen ? "rotate-180" : ""
                                }`}
                              />
                            </button>
                            {isOpen && (
                              <div className="px-5 pb-6 border-t border-[#E2E8F0]">
                                <div className="pt-6">
                                  <ContentRenderer
                                    content={
                                      isAr
                                        ? section.contentAr
                                        : section.contentEn
                                    }
                                    isAr={isAr}
                                  />
                                </div>
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-16">
                <div className="text-6xl mb-4">🔍</div>
                <p className="text-xl text-[#64748B]">
                  {isAr
                    ? "لم يتم العثور على نتائج. جرب مصطلح بحث مختلف."
                    : "No results found. Try a different search term."}
                </p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Contact Section - Editorial Grid */}
      <section className="bg-[#FAFAFA] border-t border-[#E2E8F0]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
          <div className="text-center mb-12">
            <span className="text-6xl font-bold text-[#10B981]/20" dir="ltr">
              ?!
            </span>
            <h2 className="text-3xl lg:text-4xl font-bold text-[#1E293B] mt-4">
              {isAr ? "لا تزال تحتاج مساعدة؟" : "Still Need Help?"}
            </h2>
            <p className="text-lg text-[#64748B] mt-4 max-w-2xl mx-auto">
              {isAr
                ? "فريق الدعم لدينا جاهز لمساعدتك في أي استفسار"
                : "Our support team is ready to help you with any questions"}
            </p>
          </div>

          {/* Contact Grid */}
          <div className="grid md:grid-cols-3 gap-px bg-[#E2E8F0] border border-[#E2E8F0]">
            {/* WhatsApp */}
            <a
              href={`https://wa.me/${SITE.contact.whatsapp.replace(/[^0-9]/g, "")}`}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-white p-8 group hover:bg-[#10B981]/5 transition-colors"
            >
              <div className="text-3xl mb-4">💬</div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                {isAr ? "واتساب" : "WhatsApp"}
              </h3>
              <p className="text-sm text-[#64748B] mb-4">
                {isAr ? "احصل على مساعدة فورية" : "Get instant help"}
              </p>
              <span className="text-[#10B981] font-medium">
                {SITE.contact.whatsapp}
              </span>
            </a>

            {/* Email */}
            <a
              href={`mailto:${SITE.contact.email}`}
              className="bg-white p-8 group hover:bg-[#10B981]/5 transition-colors"
            >
              <div className="text-3xl mb-4">📧</div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                {isAr ? "البريد الإلكتروني" : "Email"}
              </h3>
              <p className="text-sm text-[#64748B] mb-4">
                {isAr ? "أرسل استفسارك التفصيلي" : "Send detailed inquiry"}
              </p>
              <span className="text-[#10B981] font-medium break-all">
                {SITE.contact.email}
              </span>
            </a>

            {/* Phone */}
            <a
              href={`tel:${SITE.contact.whatsapp}`}
              className="bg-white p-8 group hover:bg-[#10B981]/5 transition-colors"
            >
              <div className="text-3xl mb-4">📞</div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                {isAr ? "الهاتف" : "Phone"}
              </h3>
              <p className="text-sm text-[#64748B] mb-4">
                {isAr ? "اتصل بنا مباشرة" : "Call us directly"}
              </p>
              <span className="text-[#10B981] font-medium">
                {SITE.contact.whatsapp}
              </span>
            </a>
          </div>

          {/* CTA Button */}
          <div className="text-center mt-12">
            <Link
              href={`/${params.lang}/contact`}
              className="group relative inline-flex items-center justify-center px-8 py-4 bg-[#1E293B] text-white font-semibold overflow-hidden transition-all duration-300 hover:bg-[#0F172A]"
            >
              <span className="relative z-10 flex items-center gap-2">
                {isAr ? "زيارة صفحة الاتصال" : "Visit Contact Page"}
                <ChevronRightIcon
                  className={`w-5 h-5 transition-transform group-hover:translate-x-1 ${isAr ? "rotate-180 group-hover:-translate-x-1" : ""}`}
                />
              </span>
              <span className="absolute inset-0 bg-[#10B981] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
          </div>
        </div>
      </section>

      {/* Quick Links - Editorial Style */}
      <section className="border-t border-[#E2E8F0]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <h3 className="text-xs font-semibold text-[#64748B] uppercase tracking-wider mb-6 text-center">
            {isAr ? "روابط سريعة" : "Quick Links"}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-[#E2E8F0]">
            <Link
              href={`/${params.lang}/pricing`}
              className="bg-white p-6 text-center group hover:bg-[#FAFAFA] transition-colors"
            >
              <div className="font-semibold text-[#1E293B] group-hover:text-[#10B981] transition-colors">
                {isAr ? "التسعير" : "Pricing"}
              </div>
            </Link>
            <Link
              href={`/${params.lang}/signup`}
              className="bg-white p-6 text-center group hover:bg-[#FAFAFA] transition-colors"
            >
              <div className="font-semibold text-[#1E293B] group-hover:text-[#10B981] transition-colors">
                {isAr ? "التسجيل" : "Sign Up"}
              </div>
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="bg-white p-6 text-center group hover:bg-[#FAFAFA] transition-colors"
            >
              <div className="font-semibold text-[#1E293B] group-hover:text-[#10B981] transition-colors">
                {isAr ? "احجز عرضاً" : "Book Demo"}
              </div>
            </Link>
            <Link
              href={`/${params.lang}/industries`}
              className="bg-white p-6 text-center group hover:bg-[#FAFAFA] transition-colors"
            >
              <div className="font-semibold text-[#1E293B] group-hover:text-[#10B981] transition-colors">
                {isAr ? "الصناعات" : "Industries"}
              </div>
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}
