/**
 * Comprehensive Help Guide - Monolithic Documentation
 *
 * Complete documentation for SmoothSchedule in a single scrollable page.
 * Includes all features: Dashboard, Scheduler, Services, Resources, Customers, Staff, and Settings.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  ArrowLeft, BookOpen, LayoutDashboard, Calendar, Briefcase, Users, UserCog,
  ClipboardList, Settings, ChevronRight, HelpCircle, CheckCircle, AlertCircle,
  Clock, Eye, Palette, Link2, Mail, Globe, CreditCard, Zap, Search, Filter,
  Plus, Edit, Trash2, ArrowUpDown, GripVertical, Image, Save, ExternalLink,
  MessageSquare, Tag, UserPlus, Shield, Copy, Layers, Play, Pause, Puzzle,
  FileSignature, Send, Download, Link as LinkIcon, CalendarOff,
} from 'lucide-react';

interface TocSubItem {
  label: string;
  href: string;
}

interface TocItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  subItems?: TocSubItem[];
}

const HelpComprehensive: React.FC = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [expandedItems, setExpandedItems] = React.useState<string[]>(['getting-started', 'settings']);

  // Table of contents items with sub-items
  const tocItems: TocItem[] = [
    {
      id: 'getting-started',
      label: t('helpComprehensive.toc.gettingStarted'),
      icon: <Zap size={16} />,
      subItems: [
        { label: t('helpComprehensive.toc.servicesSetup'), href: '/help/services' },
        { label: t('helpComprehensive.toc.resourcesSetup'), href: '/help/resources' },
        { label: t('helpComprehensive.toc.branding'), href: '/help/settings/appearance' },
        { label: t('helpComprehensive.toc.bookingUrl'), href: '/help/settings/booking' },
        { label: t('helpComprehensive.toc.scheduler'), href: '/help/scheduler' },
      ],
    },
    { id: 'dashboard', label: t('helpComprehensive.toc.dashboard'), icon: <LayoutDashboard size={16} /> },
    { id: 'scheduler', label: t('helpComprehensive.toc.scheduler'), icon: <Calendar size={16} /> },
    { id: 'services', label: t('helpComprehensive.toc.services'), icon: <Briefcase size={16} /> },
    { id: 'resources', label: t('helpComprehensive.toc.resources'), icon: <ClipboardList size={16} /> },
    { id: 'customers', label: t('helpComprehensive.toc.customers'), icon: <Users size={16} /> },
    { id: 'staff', label: t('helpComprehensive.toc.staff'), icon: <UserCog size={16} /> },
    { id: 'time-blocks', label: t('helpComprehensive.toc.timeBlocks'), icon: <CalendarOff size={16} /> },
    { id: 'plugins', label: t('helpComprehensive.toc.plugins'), icon: <Puzzle size={16} /> },
    { id: 'contracts', label: t('helpComprehensive.toc.contracts'), icon: <FileSignature size={16} /> },
    {
      id: 'settings',
      label: t('helpComprehensive.toc.settings'),
      icon: <Settings size={16} />,
      subItems: [
        { label: t('helpComprehensive.toc.resourceTypes'), href: '/help/settings/resource-types' },
        { label: t('helpComprehensive.toc.emailSettings'), href: '/help/settings/email' },
        { label: t('helpComprehensive.toc.customDomains'), href: '/help/settings/domains' },
        { label: t('helpComprehensive.toc.billing'), href: '/help/settings/billing' },
        { label: t('helpComprehensive.toc.apiSettings'), href: '/help/settings/api' },
        { label: t('helpComprehensive.toc.authentication'), href: '/help/settings/auth' },
        { label: t('helpComprehensive.toc.usageQuota'), href: '/help/settings/quota' },
      ],
    },
  ];

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  const toggleExpanded = (id: string) => {
    setExpandedItems((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Fixed Header */}
      <div className="sticky top-0 z-20 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400">
              <ArrowLeft size={20} /> {t('helpComprehensive.header.back')}
            </button>
            <div className="flex items-center gap-2">
              <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
              <h1 className="text-xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.header.title')}</h1>
            </div>
          </div>
          <Link to="/dashboard/tickets" className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400">
            {t('helpComprehensive.header.contactSupport')}
          </Link>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-4 py-8 flex gap-8">
        {/* Sidebar Table of Contents */}
        <nav className="hidden lg:block w-64 shrink-0">
          <div className="sticky top-24">
            <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.toc.contents')}</h2>
            <ul className="space-y-1">
              {tocItems.map((item) => (
                <li key={item.id}>
                  <div className="flex items-center">
                    <button
                      onClick={() => scrollToSection(item.id)}
                      className="flex-1 flex items-center gap-2 px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors text-left"
                    >
                      {item.icon}
                      {item.label}
                    </button>
                    {item.subItems && (
                      <button
                        onClick={() => toggleExpanded(item.id)}
                        className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                      >
                        <ChevronRight
                          size={14}
                          className={`transition-transform ${expandedItems.includes(item.id) ? 'rotate-90' : ''}`}
                        />
                      </button>
                    )}
                  </div>
                  {item.subItems && expandedItems.includes(item.id) && (
                    <ul className="ml-6 mt-1 space-y-1 border-l border-gray-200 dark:border-gray-700 pl-2">
                      {item.subItems.map((subItem) => (
                        <li key={subItem.href}>
                          <Link
                            to={subItem.href}
                            onClick={scrollToTop}
                            className="block px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
                          >
                            {subItem.label}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </nav>

        {/* Main Content */}
        <main className="flex-1 min-w-0">
          {/* Introduction */}
          <section className="mb-12">
            <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.introduction.welcome')}</h2>
              <p className="text-gray-700 dark:text-gray-300 mb-4">
                {t('helpComprehensive.introduction.description')}
              </p>
              <p className="text-gray-600 dark:text-gray-400 text-sm">
                {t('helpComprehensive.introduction.tocHint')}
              </p>
            </div>
          </section>

          {/* ============================================== */}
          {/* GETTING STARTED */}
          {/* ============================================== */}
          <section id="getting-started" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                <Zap size={20} className="text-yellow-600 dark:text-yellow-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.gettingStarted.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.gettingStarted.checklistTitle')}</h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.gettingStarted.checklistDescription')}
              </p>
              <ol className="space-y-4">
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">1</span>
                  <div>
                    <Link to="/dashboard/help/services" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
                      {t('helpComprehensive.gettingStarted.step1Title')}
                      <ChevronRight size={14} className="text-brand-500" />
                    </Link>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step1Description')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">2</span>
                  <div>
                    <Link to="/dashboard/help/resources" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
                      {t('helpComprehensive.gettingStarted.step2Title')}
                      <ChevronRight size={14} className="text-brand-500" />
                    </Link>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step2Description')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">3</span>
                  <div>
                    <Link to="/dashboard/help/settings/appearance" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
                      {t('helpComprehensive.gettingStarted.step3Title')}
                      <ChevronRight size={14} className="text-brand-500" />
                    </Link>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step3Description')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">4</span>
                  <div>
                    <Link to="/dashboard/help/settings/booking" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
                      {t('helpComprehensive.gettingStarted.step4Title')}
                      <ChevronRight size={14} className="text-brand-500" />
                    </Link>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step4Description')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">5</span>
                  <div>
                    <Link to="/dashboard/help/scheduler" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
                      {t('helpComprehensive.gettingStarted.step5Title')}
                      <ChevronRight size={14} className="text-brand-500" />
                    </Link>
                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step5Description')}</p>
                  </div>
                </li>
              </ol>
            </div>
          </section>

          {/* ============================================== */}
          {/* DASHBOARD */}
          {/* ============================================== */}
          <section id="dashboard" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                <LayoutDashboard size={20} className="text-blue-600 dark:text-blue-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.dashboard.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.dashboard.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.dashboard.keyMetrics')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.totalAppointments')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.totalAppointmentsDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.activeCustomers')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.activeCustomersDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.servicesMetric')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.servicesMetricDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.resourcesMetric')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.resourcesMetricDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.dashboard.charts')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.dashboard.revenueChart')}</strong> {t('helpComprehensive.dashboard.revenueChartDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.dashboard.appointmentsChart')}</strong> {t('helpComprehensive.dashboard.appointmentsChartDesc')}</span>
                </li>
              </ul>
            </div>
          </section>

          {/* ============================================== */}
          {/* SCHEDULER */}
          {/* ============================================== */}
          <section id="scheduler" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                <Calendar size={20} className="text-green-600 dark:text-green-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.scheduler.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.scheduler.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.interfaceLayout')}</h3>
              <div className="space-y-3 mb-6">
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <Clock size={18} className="text-brand-500 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.pendingSidebarTitle')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.pendingSidebarDesc')}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <Calendar size={18} className="text-brand-500 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.calendarViewTitle')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.calendarViewDesc')}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <Edit size={18} className="text-brand-500 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.detailsSidebarTitle')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.detailsSidebarDesc')}</p>
                  </div>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
                  <span><strong>{t('helpComprehensive.scheduler.dragDropFeature')}</strong> {t('helpComprehensive.scheduler.dragDropDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
                  <span><strong>{t('helpComprehensive.scheduler.resizeFeature')}</strong> {t('helpComprehensive.scheduler.resizeDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
                  <span><strong>{t('helpComprehensive.scheduler.quickCreateFeature')}</strong> {t('helpComprehensive.scheduler.quickCreateDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
                  <span><strong>{t('helpComprehensive.scheduler.resourceFilterFeature')}</strong> {t('helpComprehensive.scheduler.resourceFilterDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
                  <span><strong>{t('helpComprehensive.scheduler.statusColorsFeature')}</strong> {t('helpComprehensive.scheduler.statusColorsDesc')}</span>
                </li>
              </ul>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.appointmentStatuses')}</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.scheduler.statusPending')}</span>
                </div>
                <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.scheduler.statusConfirmed')}</span>
                </div>
                <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.scheduler.statusCancelled')}</span>
                </div>
                <div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.scheduler.statusCompleted')}</span>
                </div>
                <div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.scheduler.statusNoShow')}</span>
                </div>
              </div>
            </div>
          </section>

          {/* ============================================== */}
          {/* SERVICES */}
          {/* ============================================== */}
          <section id="services" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                <Briefcase size={20} className="text-purple-600 dark:text-purple-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.services.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.services.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.services.serviceProperties')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.nameProp')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.namePropDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.durationProp')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.durationPropDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.priceProp')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.pricePropDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.descriptionProp')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.descriptionPropDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.services.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-center gap-2">
                  <GripVertical size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.services.dragReorderFeature')}</strong> {t('helpComprehensive.services.dragReorderDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Image size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.services.photoGalleryFeature')}</strong> {t('helpComprehensive.services.photoGalleryDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Eye size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.services.livePreviewFeature')}</strong> {t('helpComprehensive.services.livePreviewDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Plus size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.services.quickAddFeature')}</strong> {t('helpComprehensive.services.quickAddDesc')}</span>
                </li>
              </ul>
            </div>
          </section>

          {/* ============================================== */}
          {/* RESOURCES */}
          {/* ============================================== */}
          <section id="resources" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
                <ClipboardList size={20} className="text-orange-600 dark:text-orange-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.resources.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.resources.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.resources.resourceTypes')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <UserCog size={24} className="text-blue-600 dark:text-blue-400 mb-2" />
                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.staffType')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.staffTypeDesc')}</p>
                </div>
                <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                  <Layers size={24} className="text-green-600 dark:text-green-400 mb-2" />
                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.roomType')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.roomTypeDesc')}</p>
                </div>
                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <ClipboardList size={24} className="text-purple-600 dark:text-purple-400 mb-2" />
                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.equipmentType')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.equipmentTypeDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.resources.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.resources.staffAutocompleteFeature')}</strong> {t('helpComprehensive.resources.staffAutocompleteDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.resources.multilaneModeFeature')}</strong> {t('helpComprehensive.resources.multilaneModeDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.resources.viewCalendarFeature')}</strong> {t('helpComprehensive.resources.viewCalendarDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.resources.tableActionsFeature')}</strong> {t('helpComprehensive.resources.tableActionsDesc')}</span>
                </li>
              </ul>
            </div>
          </section>

          {/* ============================================== */}
          {/* CUSTOMERS */}
          {/* ============================================== */}
          <section id="customers" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center">
                <Users size={20} className="text-pink-600 dark:text-pink-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.customers.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.customers.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.customers.customerStatuses')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                  <h4 className="font-medium text-green-700 dark:text-green-300 text-sm">{t('helpComprehensive.customers.activeStatus')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.activeStatusDesc')}</p>
                </div>
                <div className="p-3 bg-gray-100 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-700 dark:text-gray-300 text-sm">{t('helpComprehensive.customers.inactiveStatus')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.inactiveStatusDesc')}</p>
                </div>
                <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                  <h4 className="font-medium text-red-700 dark:text-red-300 text-sm">{t('helpComprehensive.customers.blockedStatus')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.blockedStatusDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.customers.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                <li className="flex items-center gap-2">
                  <Search size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.customers.searchFeature')}</strong> {t('helpComprehensive.customers.searchDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Filter size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.customers.filterFeature')}</strong> {t('helpComprehensive.customers.filterDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Tag size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.customers.tagsFeature')}</strong> {t('helpComprehensive.customers.tagsDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <ArrowUpDown size={16} className="text-brand-500" />
                  <span><strong>{t('helpComprehensive.customers.sortingFeature')}</strong> {t('helpComprehensive.customers.sortingDesc')}</span>
                </li>
              </ul>

              <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                  <Eye size={18} className="text-purple-500" /> {t('helpComprehensive.customers.masqueradingTitle')}
                </h4>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  {t('helpComprehensive.customers.masqueradingDesc')}
                </p>
              </div>
            </div>
          </section>

          {/* ============================================== */}
          {/* STAFF */}
          {/* ============================================== */}
          <section id="staff" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
                <UserCog size={20} className="text-teal-600 dark:text-teal-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.staff.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.staff.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.staffRoles')}</h3>
              <div className="space-y-3 mb-6">
                <div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                  <Shield size={18} className="text-yellow-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.ownerRole')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.ownerRoleDesc')}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <Shield size={18} className="text-blue-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.managerRole')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.managerRoleDesc')}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                  <Shield size={18} className="text-green-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.staffRole')}</h4>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.staffRoleDesc')}</p>
                  </div>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.invitingStaff')}</h3>
              <ol className="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside mb-6">
                <li>{t('helpComprehensive.staff.inviteStep1')}</li>
                <li>{t('helpComprehensive.staff.inviteStep2')}</li>
                <li>{t('helpComprehensive.staff.inviteStep3')}</li>
                <li>{t('helpComprehensive.staff.inviteStep4')}</li>
                <li>{t('helpComprehensive.staff.inviteStep5')}</li>
              </ol>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.makeBookable')}</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                {t('helpComprehensive.staff.makeBookableDesc')}
              </p>
            </div>
          </section>

          {/* ============================================== */}
          {/* TIME BLOCKS */}
          {/* ============================================== */}
          <section id="time-blocks" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
                <CalendarOff size={20} className="text-rose-600 dark:text-rose-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.timeBlocks.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.timeBlocks.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.blockLevels')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.timeBlocks.businessLevel')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.businessLevelDesc')}</p>
                </div>
                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.timeBlocks.resourceLevel')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.resourceLevelDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.blockTypes')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.timeBlocks.hardBlock')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.hardBlockDesc')}</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.timeBlocks.softBlock')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.softBlockDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.recurrencePatterns')}</h3>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
                <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.timeBlocks.oneTimePattern')}</span>
                </div>
                <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.timeBlocks.weeklyPattern')}</span>
                </div>
                <div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">{t('helpComprehensive.timeBlocks.monthlyPattern')}</span>
                </div>
                <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">{t('helpComprehensive.timeBlocks.yearlyPattern')}</span>
                </div>
                <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.timeBlocks.holidayPattern')}</span>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.timeBlocks.schedulerOverlayFeature')}</strong> {t('helpComprehensive.timeBlocks.schedulerOverlayDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.timeBlocks.colorCodingFeature')}</strong> {t('helpComprehensive.timeBlocks.colorCodingDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.timeBlocks.monthViewFeature')}</strong> {t('helpComprehensive.timeBlocks.monthViewDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.timeBlocks.listViewFeature')}</strong> {t('helpComprehensive.timeBlocks.listViewDesc')}</span>
                </li>
              </ul>

              <div className="p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800">
                <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                  <UserCog size={18} className="text-teal-500" /> {t('helpComprehensive.timeBlocks.staffAvailability')}
                </h4>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  {t('helpComprehensive.timeBlocks.staffAvailabilityDesc')}
                </p>
              </div>
            </div>

            <Link to="/dashboard/help/time-blocks" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              <CalendarOff size={24} className="text-rose-500" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.timeBlocks.timeBlocksDocumentation')}</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.timeBlocksDocumentationDesc')}</p>
              </div>
              <ChevronRight size={20} className="text-gray-400 ml-auto" />
            </Link>
          </section>

          {/* ============================================== */}
          {/* PLUGINS */}
          {/* ============================================== */}
          <section id="plugins" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                <Puzzle size={20} className="text-indigo-600 dark:text-indigo-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.plugins.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.plugins.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.whatPluginsCanDo')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.plugins.sendEmailsCapability')}</strong> {t('helpComprehensive.plugins.sendEmailsDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.plugins.webhooksCapability')}</strong> {t('helpComprehensive.plugins.webhooksDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.plugins.reportsCapability')}</strong> {t('helpComprehensive.plugins.reportsDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span><strong>{t('helpComprehensive.plugins.cleanupCapability')}</strong> {t('helpComprehensive.plugins.cleanupDesc')}</span>
                </li>
              </ul>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.pluginTypes')}</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.plugins.marketplacePlugins')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.marketplacePluginsDesc')}</p>
                </div>
                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.plugins.customPlugins')}</h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.customPluginsDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.triggers')}</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                {t('helpComprehensive.plugins.triggersDesc')}
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.plugins.beforeEventTrigger')}</span>
                </div>
                <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.plugins.atStartTrigger')}</span>
                </div>
                <div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">{t('helpComprehensive.plugins.afterEndTrigger')}</span>
                </div>
                <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">{t('helpComprehensive.plugins.onStatusChangeTrigger')}</span>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.learnMore')}</h3>
              <Link to="/dashboard/help/plugins/docs" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                <Puzzle size={24} className="text-indigo-500" />
                <div>
                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.plugins.pluginDocumentation')}</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.pluginDocumentationDesc')}</p>
                </div>
                <ChevronRight size={20} className="text-gray-400 ml-auto" />
              </Link>
            </div>
          </section>

          {/* ============================================== */}
          {/* CONTRACTS */}
          {/* ============================================== */}
          <section id="contracts" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                <FileSignature size={20} className="text-emerald-600 dark:text-emerald-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.contracts.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.contracts.description')}
              </p>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractTemplates')}</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                {t('helpComprehensive.contracts.templatesDesc')}
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.templateProperties')}</h4>
                  <ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
                    <li>• <strong>{t('helpComprehensive.contracts.templateNameProp')}</strong> {t('helpComprehensive.contracts.templateNamePropDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.contracts.templateContentProp')}</strong> {t('helpComprehensive.contracts.templateContentPropDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.contracts.templateScopeProp')}</strong> {t('helpComprehensive.contracts.templateScopePropDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.contracts.templateExpirationProp')}</strong> {t('helpComprehensive.contracts.templateExpirationPropDesc')}</li>
                  </ul>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.availableVariables')}</h4>
                  <ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
                    <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_NAME}}'}</code></li>
                    <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_EMAIL}}'}</code></li>
                    <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{BUSINESS_NAME}}'}</code></li>
                    <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{DATE}}'}</code> and <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{YEAR}}'}</code></li>
                  </ul>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractWorkflow')}</h3>
              <ol className="space-y-3 mb-6">
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">1</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep1Title')}</span>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep1Desc')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">2</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep2Title')}</span>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep2Desc')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">3</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep3Title')}</span>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep3Desc')}</p>
                  </div>
                </li>
                <li className="flex items-start gap-3">
                  <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">4</span>
                  <div>
                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep4Title')}</span>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep4Desc')}</p>
                  </div>
                </li>
              </ol>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractStatuses')}</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                <div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.contracts.pendingStatus')}</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.pendingStatusDesc')}</p>
                </div>
                <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.contracts.signedStatus')}</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.signedStatusDesc')}</p>
                </div>
                <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
                  <span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.contracts.expiredStatus')}</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.expiredStatusDesc')}</p>
                </div>
                <div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.contracts.voidedStatus')}</span>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.voidedStatusDesc')}</p>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.legalCompliance')}</h3>
              <div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 mb-6">
                <div className="flex items-start gap-3">
                  <Shield size={20} className="text-emerald-600 mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">{t('helpComprehensive.contracts.complianceTitle')}</h4>
                    <p className="text-xs text-gray-600 dark:text-gray-300">
                      {t('helpComprehensive.contracts.complianceDesc')}
                    </p>
                  </div>
                </div>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.keyFeatures')}</h3>
              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                <li className="flex items-center gap-2">
                  <Send size={16} className="text-emerald-500" />
                  <span><strong>{t('helpComprehensive.contracts.emailDeliveryFeature')}</strong> {t('helpComprehensive.contracts.emailDeliveryDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <LinkIcon size={16} className="text-emerald-500" />
                  <span><strong>{t('helpComprehensive.contracts.shareableLinksFeature')}</strong> {t('helpComprehensive.contracts.shareableLinksDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Download size={16} className="text-emerald-500" />
                  <span><strong>{t('helpComprehensive.contracts.pdfDownloadFeature')}</strong> {t('helpComprehensive.contracts.pdfDownloadDesc')}</span>
                </li>
                <li className="flex items-center gap-2">
                  <Eye size={16} className="text-emerald-500" />
                  <span><strong>{t('helpComprehensive.contracts.statusTrackingFeature')}</strong> {t('helpComprehensive.contracts.statusTrackingDesc')}</span>
                </li>
              </ul>
            </div>

            <Link to="/dashboard/help/contracts" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
              <FileSignature size={24} className="text-emerald-500" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.contracts.contractsDocumentation')}</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.contractsDocumentationDesc')}</p>
              </div>
              <ChevronRight size={20} className="text-gray-400 ml-auto" />
            </Link>
          </section>

          {/* ============================================== */}
          {/* SETTINGS */}
          {/* ============================================== */}
          <section id="settings" className="mb-16 scroll-mt-24">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                <Settings size={20} className="text-gray-600 dark:text-gray-400" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.settings.title')}</h2>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {t('helpComprehensive.settings.description')}
              </p>

              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
                  <p className="text-sm text-blue-700 dark:text-blue-300">
                    <strong>{t('helpComprehensive.settings.ownerAccessNote')}</strong> {t('helpComprehensive.settings.ownerAccessDesc')}
                  </p>
                </div>
              </div>

              <div className="space-y-6">
                {/* General Settings */}
                <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.generalSettings')}</h3>
                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                    {t('helpComprehensive.settings.generalSettingsDesc')}
                  </p>
                  <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• <strong>{t('helpComprehensive.settings.businessNameSetting')}</strong> {t('helpComprehensive.settings.businessNameSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.subdomainSetting')}</strong> {t('helpComprehensive.settings.subdomainSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.timezoneSetting')}</strong> {t('helpComprehensive.settings.timezoneSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.timeDisplaySetting')}</strong> {t('helpComprehensive.settings.timeDisplaySettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.contactSetting')}</strong> {t('helpComprehensive.settings.contactSettingDesc')}</li>
                  </ul>
                </div>

                {/* Booking Settings */}
                <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.bookingSettings')}</h3>
                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                    {t('helpComprehensive.settings.bookingSettingsDesc')}
                  </p>
                  <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• <strong>{t('helpComprehensive.settings.bookingUrlSetting')}</strong> {t('helpComprehensive.settings.bookingUrlSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.returnUrlSetting')}</strong> {t('helpComprehensive.settings.returnUrlSettingDesc')}</li>
                  </ul>
                </div>

                {/* Branding Settings */}
                <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.brandingSettings')}</h3>
                  <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
                    {t('helpComprehensive.settings.brandingSettingsDesc')}
                  </p>
                  <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                    <li>• <strong>{t('helpComprehensive.settings.websiteLogoSetting')}</strong> {t('helpComprehensive.settings.websiteLogoSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.emailLogoSetting')}</strong> {t('helpComprehensive.settings.emailLogoSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.displayModeSetting')}</strong> {t('helpComprehensive.settings.displayModeSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.colorPalettesSetting')}</strong> {t('helpComprehensive.settings.colorPalettesSettingDesc')}</li>
                    <li>• <strong>{t('helpComprehensive.settings.customColorsSetting')}</strong> {t('helpComprehensive.settings.customColorsSettingDesc')}</li>
                  </ul>
                </div>

                {/* Other Settings */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.otherSettings')}</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <Link to="/dashboard/help/settings/resource-types" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.resourceTypesLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.resourceTypesLinkDesc')}</p>
                    </Link>
                    <Link to="/dashboard/help/settings/email" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.emailTemplatesLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.emailTemplatesLinkDesc')}</p>
                    </Link>
                    <Link to="/dashboard/help/settings/domains" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.customDomainsLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.customDomainsLinkDesc')}</p>
                    </Link>
                    <Link to="/dashboard/help/settings/billing" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.billingLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.billingLinkDesc')}</p>
                    </Link>
                    <Link to="/dashboard/help/settings/api" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.apiSettingsLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.apiSettingsLinkDesc')}</p>
                    </Link>
                    <Link to="/dashboard/help/settings/quota" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.usageQuotaLink')}</h4>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.usageQuotaLinkDesc')}</p>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Help Footer */}
          <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
            <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.footer.title')}</h3>
            <p className="text-gray-600 dark:text-gray-300 mb-4">
              {t('helpComprehensive.footer.description')}
            </p>
            <button
              onClick={() => navigate('/dashboard/tickets')}
              className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
            >
              {t('helpComprehensive.footer.contactSupport')}
            </button>
          </section>
        </main>
      </div>
    </div>
  );
};

export default HelpComprehensive;
