/**
 * Help Services Page
 *
 * Comprehensive help documentation for the Services management page.
 */

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  Briefcase,
  Clock,
  DollarSign,
  Users,
  Settings,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Tag,
  Plus,
  Pencil,
  Trash2,
  GripVertical,
  Eye,
  Image,
  ImagePlus,
  Upload,
  AlertCircle,
  LayoutGrid,
} from 'lucide-react';

const HelpServices: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Back Button */}
      <button
        onClick={() => navigate(-1)}
        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
      >
        <ArrowLeft size={20} /> Back
      </button>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <Briefcase size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Services Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Define and manage the services your business offers</p>
          </div>
        </div>
      </div>

      {/* Overview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Briefcase size={20} className="text-brand-500" /> Overview
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Services are what you offer to your customers - haircuts, massages, consultations, lessons, repairs, or any bookable activity. Each service has a name, duration, price, optional description, and photo gallery.
          </p>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Services page features a two-column layout: an editable list on the left where you can reorder services by dragging, and a live Customer Preview on the right showing exactly how your services appear in the booking interface.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            Well-defined services make booking seamless for customers and ensure consistent pricing and time allocation for every appointment.
          </p>
        </div>
      </section>

      {/* Page Layout Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <LayoutGrid size={20} className="text-brand-500" /> Page Layout
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Services page is divided into two columns for efficient management:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <GripVertical size={20} className="text-brand-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Left: Editable Services List</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Your services in a draggable list. Reorder by dragging, edit or delete with action buttons. Shows name, description, duration, price, and photo count.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Eye size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Right: Customer Preview</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  A live mockup showing how customers see your services in the booking widget. Updates instantly as you reorder.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-sm text-blue-800 dark:text-blue-200">
              <strong>Tip:</strong> The order you see in the editable list is exactly how services appear to customers when booking. Drag your most popular services to the top!
            </p>
          </div>
        </div>
      </section>

      {/* Service Properties Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Settings size={20} className="text-brand-500" /> Service Properties
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Each service has the following properties:
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Tag size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Name <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  A clear, descriptive name customers will see (e.g., "Haircut", "60-Minute Massage", "Initial Consultation"). Required.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Duration <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  How long the service takes in minutes (minimum 5, in 5-minute increments). This determines the time block reserved in the scheduler.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <DollarSign size={20} className="text-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Price <span className="text-red-500">*</span></h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The base price for this service displayed to customers. You can override the price on individual appointments if needed.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Briefcase size={20} className="text-orange-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Description</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Optional text describing what's included, what to expect, or any special notes. Shown to customers in the booking flow.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Image size={20} className="text-pink-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Photos</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Optional images showcasing the service. Multiple photos supported, reorderable. The first photo is the primary/featured image.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Drag and Drop Reordering Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <GripVertical size={20} className="text-brand-500" /> Drag and Drop Reordering
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Control the display order of your services by dragging and dropping:
          </p>
          <ol className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Grab the Handle</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click and hold the grip icon (⋮⋮) on the left side of any service card.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Drag to New Position</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Move the service up or down in the list. Visual feedback shows where it will be placed.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Release to Save</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drop the service and the new order is saved automatically. The Customer Preview updates instantly.
                </p>
              </div>
            </li>
          </ol>
          <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <p className="text-sm text-green-800 dark:text-green-200">
              <strong>Visual Feedback:</strong> When dragging, the service being moved becomes semi-transparent, and the drop target shows a highlighted border.
            </p>
          </div>
        </div>
      </section>

      {/* Creating a Service Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Plus size={20} className="text-brand-500" /> Creating a Service
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Click the <strong>"Add Service"</strong> button in the top right to open the creation form:
          </p>
          <ol className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Enter Service Name</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Give your service a clear name (e.g., "Haircut", "Massage", "Consultation").
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Set Duration</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Enter how many minutes the service takes. The scheduler will block this amount of time.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Set Price</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Enter the price customers pay for this service.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Add Description (Optional)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Describe what's included or what customers should know.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Upload Photos (Optional)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Add images to showcase the service. See the Photo Gallery section below for details.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">6</span>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Create</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click "Create" to add the service. It appears at the end of the list (drag to reorder).
                </p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      {/* Photo Gallery Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ImagePlus size={20} className="text-brand-500" /> Photo Gallery
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Each service can have multiple photos to showcase what customers will receive:
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Upload size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Upload Methods</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  <strong>Drag and drop</strong> images directly onto the drop zone, or click <strong>"browse files"</strong> to select from your computer. Multiple images can be uploaded at once.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <GripVertical size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Reorder Photos</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Drag photos to change their order. The first photo (position 1) is the primary/featured image shown in the service listing.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Trash2 size={20} className="text-red-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Delete Photos</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Hover over a photo and click the red trash button to remove it.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Eye size={20} className="text-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Photo Count Display</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  In the services list, a small image icon with count shows how many photos each service has.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-sm text-blue-800 dark:text-blue-200">
              <strong>Tip:</strong> Use high-quality photos that showcase your work. The first photo is what customers see first when browsing services!
            </p>
          </div>
        </div>
      </section>

      {/* Editing and Deleting Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Pencil size={20} className="text-brand-500" /> Editing and Deleting
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Pencil size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Edit a Service</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click the pencil icon on any service card to open the edit form. All fields are pre-filled with current values. Update what you need and click "Save".
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Trash2 size={20} className="text-red-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Delete a Service</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click the trash icon on a service card. A confirmation dialog appears - click confirm to permanently delete the service.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
            <div className="flex items-start gap-2">
              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
              <p className="text-sm text-amber-800 dark:text-amber-200">
                <strong>Note:</strong> Deleting a service does not affect existing appointments that used that service. Those appointments retain their data.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Customer Preview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Eye size={20} className="text-brand-500" /> Customer Preview
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The right side of the Services page shows a live preview of how your services appear to customers:
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Eye size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Live Preview</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The preview updates instantly when you reorder services by dragging. See exactly how the booking widget will look.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <LayoutGrid size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Booking Widget Style</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Styled like the actual booking interface with a branded header, service cards showing name, description, duration, and price.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ChevronRight size={20} className="text-purple-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Selection Indicator</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Each service shows a chevron (→) indicating it's clickable. The preview is visual only - clicking doesn't navigate.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-700/50 rounded-lg text-center">
            <p className="text-xs text-gray-500 dark:text-gray-400">
              Preview only - not clickable
            </p>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CheckCircle size={20} className="text-brand-500" /> Benefits
        </h2>
        <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">
          <ul className="space-y-3">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Clear Offerings:</strong> Customers see exactly what services you provide with pricing upfront
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Consistent Pricing:</strong> Set standard prices that apply automatically to new appointments
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Accurate Scheduling:</strong> Duration settings ensure the right amount of time is allocated
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Custom Order:</strong> Drag to prioritize popular services at the top of customer-facing lists
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Visual Appeal:</strong> Photo galleries showcase your work and attract bookings
              </span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
              <span className="text-gray-700 dark:text-gray-300">
                <strong>Live Preview:</strong> See exactly how customers experience your service catalog
              </span>
            </li>
          </ul>
        </div>
      </section>

      {/* Related Features */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Link
            to="/dashboard/help/scheduler"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Clock size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/resources"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Users size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Resources Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/customers"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Users size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Customers Guide</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/booking"
            className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
          >
            <Settings size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Booking Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      {/* Need More Help */}
      <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">Need More Help?</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">
          Our support team is ready to help with any questions about managing services.
        </p>
        <button
          onClick={() => navigate('/dashboard/tickets')}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          Contact Support
        </button>
      </section>
    </div>
  );
};

export default HelpServices;
