smoothschedule/frontend/src/pages/help/HelpResources.tsx

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

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  ClipboardList,
  Users,
  Building,
  Wrench,
  Calendar,
  Settings,
  CheckCircle,
  ChevronRight,
  HelpCircle,
  Clock,
  Plus,
  Eye,
  Pencil,
  Search,
  Keyboard,
  Layers,
  ToggleLeft,
  AlertCircle,
} from 'lucide-react';

const HelpResources: 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">
            <ClipboardList size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Resources Guide</h1>
            <p className="text-gray-500 dark:text-gray-400">Manage staff, rooms, and equipment for scheduling</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">
          <ClipboardList 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">
            Resources are the bookable entities in your scheduling system - staff members, rooms, equipment, or any other asset that needs time-slot management. Every appointment in your system is assigned to a resource.
          </p>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            The Resources page displays all your resources in a table format with their type, upcoming appointment counts, capacity settings, and status. From here you can create new resources, edit existing ones, and view individual resource calendars.
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            Properly configured resources are essential for preventing double-booking and ensuring your scheduler displays availability correctly.
          </p>
        </div>
      </section>

      {/* Resource Types 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" /> Resource Types
        </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">
            SmoothSchedule supports three built-in resource types, each with an associated icon and color coding:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
              <Users size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Team members who provide services - stylists, therapists, consultants, doctors, etc. Can be linked to a staff user account.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
              <Building size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Room</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Physical spaces - consultation rooms, massage rooms, studios, courts, meeting rooms, etc.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
              <Wrench size={20} className="text-purple-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Equipment</h4>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Tools and machinery - laser machines, MRI scanners, rental equipment, vehicles, etc.
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              <strong>Custom Resource Types:</strong> You can create additional resource types in Settings &gt; Resource Types to match your specific business needs (e.g., "Vehicle", "Studio", "Instructor").
            </p>
          </div>
        </div>
      </section>

      {/* The Resources Table Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <ClipboardList size={20} className="text-brand-500" /> The Resources Table
        </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 main view shows all resources in a table with the following columns:
          </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">
              <div className="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-600 flex items-center justify-center shrink-0">
                <Users size={16} className="text-gray-500" />
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Resource Name</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The name and type icon of the resource. The icon indicates whether it's Staff (blue person), Room (green building), or Equipment (purple wrench).
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
                <span className="text-xs font-medium text-blue-800 dark:text-blue-300">Type</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Type</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  A color-coded badge showing the resource type (Staff, Room, or Equipment).
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Calendar size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Upcoming</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  The count of future appointments assigned to this resource. Helps you see at a glance how busy each resource is.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Layers size={20} className="text-amber-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Capacity</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Shows "1 at a time" for single-booking resources or "X simultaneous" for multilane resources that can handle multiple concurrent appointments.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Status</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Indicates whether the resource is active and available for scheduling.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Settings size={20} className="text-gray-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Actions</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  View Calendar button to see the resource's schedule, and an Edit button to modify resource settings.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Creating a Resource 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 Resource
        </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 Resource"</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">Select Resource Type</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Choose Staff, Room, or Equipment from the dropdown. This determines the icon and how the resource behaves.
                </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">Link Staff Member (Staff type only)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  For Staff resources, search and select a staff user from your team. This links the resource to their user account. Type to search by name or email, use arrow keys to navigate, and press Enter to select.
                </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">Enter Resource Name</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Give the resource a descriptive name that will appear in the scheduler and booking interface (e.g., "Sarah (Stylist)", "Massage Room 1", "Laser Machine").
                </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">
                  Add notes about the resource for internal reference.
                </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">Configure Multilane Mode (Optional)</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Toggle on to allow multiple simultaneous bookings. Set the number of lanes (2-10) for resources like group classes or shared equipment.
                </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">Save</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click "Create Resource" to add the resource. It will appear immediately in the table and be available in the scheduler.
                </p>
              </div>
            </li>
          </ol>
        </div>
      </section>

      {/* Staff Autocomplete Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Search size={20} className="text-brand-500" /> Staff Member Autocomplete
        </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">
            When creating a Staff resource, you'll use an autocomplete field to link the resource to a staff user account:
          </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">
              <Search size={20} className="text-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Search</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Start typing to filter staff members by name or email. Results appear in a dropdown below the input.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Keyboard size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Keyboard Navigation</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Use <strong>↑/↓</strong> arrow keys to highlight options, <strong>Enter</strong> to select, and <strong>Escape</strong> to close the dropdown.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={20} className="text-green-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Selection Confirmation</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Once selected, a green indicator shows "Selected: [Name]" below the input field confirming your choice.
                </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">
                Staff must first be added via the Staff page before they can be linked to a resource. If you don't see someone in the autocomplete, make sure they have a staff account.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Multilane Mode Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Layers size={20} className="text-brand-500" /> Multilane Mode
        </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">
            Multilane mode allows a single resource to handle multiple appointments at the same time. This is useful for:
          </p>
          <ul className="space-y-2 mb-4">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Group fitness instructors who can teach multiple clients</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Rooms with multiple stations (salon chairs, dental chairs)</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Equipment that can be shared (3D printers, charging stations)</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Classes with limited capacity (yoga classes, workshops)</span>
            </li>
          </ul>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <ToggleLeft size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Enable Multilane</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Toggle the "Multilane Mode" switch in the resource form. When enabled, a number input appears.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Layers size={20} className="text-amber-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Set Lane Count</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Enter the number of simultaneous appointments allowed (2-10). For example, set to 5 for a yoga class with 5 spots.
                </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>In the Scheduler:</strong> When viewing a multilane resource, overlapping appointments appear in separate horizontal lanes, making it easy to see all concurrent bookings.
            </p>
          </div>
        </div>
      </section>

      {/* Viewing a Resource Calendar 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" /> Viewing a Resource Calendar
        </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>"View Calendar"</strong> button on any resource row to open a dedicated calendar view for that resource:
          </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">
              <Calendar size={20} className="text-brand-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Focused View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  See only the appointments assigned to this specific resource, without clutter from other resources.
                </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-blue-500 mt-0.5 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Date Navigation</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Navigate between weeks to see past and future appointments for planning and review.
                </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 shrink-0" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Appointment Details</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Click on any appointment in the calendar to view its full details.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Editing a Resource 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 a Resource
        </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 pencil icon in the Actions column to edit a resource. The edit form pre-fills with the current values.
          </p>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            You can change:
          </p>
          <ul className="space-y-2 mb-4">
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Resource type (Staff, Room, Equipment)</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Linked staff member (for Staff resources)</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Resource name and description</span>
            </li>
            <li className="flex items-start gap-2">
              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
              <span className="text-gray-600 dark:text-gray-300">Multilane settings and lane count</span>
            </li>
          </ul>
          <div className="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">
                Changing a resource's type or linked staff member may affect how existing appointments display. The appointments themselves remain intact.
              </p>
            </div>
          </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>Prevent Double-Booking:</strong> Resources automatically block conflicting time slots
              </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 Availability:</strong> Customers only see times when resources are actually free
              </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>Flexible Capacity:</strong> Multilane mode supports group bookings and shared resources
              </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>Staff Integration:</strong> Link resources to staff accounts for proper attribution and filtering
              </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>Quick Visibility:</strong> Upcoming appointment counts show resource utilization at a glance
              </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"
          >
            <Calendar 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/staff"
            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">Staff Management</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/settings/resource-types"
            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">Resource Types Settings</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
          <Link
            to="/dashboard/help/services"
            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"
          >
            <ClipboardList size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">Services Guide</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 resources.
        </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 HelpResources;