smoothschedule/frontend/src/pages/HelpGuide.tsx

/**
 * Help Guide - Main Documentation Hub
 *
 * Comprehensive guide linking to all help pages and providing quick overviews.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
  BookOpen,
  LayoutDashboard,
  Calendar,
  CheckSquare,
  Users,
  Briefcase,
  ClipboardList,
  UserCog,
  MessageSquare,
  Mail,
  CreditCard,
  Puzzle,
  Settings,
  ChevronRight,
  HelpCircle,
} from 'lucide-react';

interface HelpSection {
  title: string;
  description: string;
  links: {
    label: string;
    path: string;
    icon: React.ReactNode;
  }[];
}

const HelpGuide: React.FC = () => {
  const { t } = useTranslation();

  const sections: HelpSection[] = [
    {
      title: 'Core Features',
      description: 'Essential tools for managing your scheduling business',
      links: [
        { label: 'Dashboard', path: '/help/dashboard', icon: <LayoutDashboard size={18} /> },
        { label: 'Scheduler', path: '/help/scheduler', icon: <Calendar size={18} /> },
        { label: 'Tasks', path: '/help/tasks', icon: <CheckSquare size={18} /> },
      ],
    },
    {
      title: 'Manage',
      description: 'Organize your customers, services, and resources',
      links: [
        { label: 'Customers', path: '/help/customers', icon: <Users size={18} /> },
        { label: 'Services', path: '/help/services', icon: <Briefcase size={18} /> },
        { label: 'Resources', path: '/help/resources', icon: <ClipboardList size={18} /> },
        { label: 'Staff', path: '/help/staff', icon: <UserCog size={18} /> },
      ],
    },
    {
      title: 'Communicate',
      description: 'Stay connected with your customers',
      links: [
        { label: 'Messages', path: '/help/messages', icon: <MessageSquare size={18} /> },
        { label: 'Ticketing', path: '/help/ticketing', icon: <Mail size={18} /> },
      ],
    },
    {
      title: 'Money',
      description: 'Handle payments and track revenue',
      links: [
        { label: 'Payments', path: '/help/payments', icon: <CreditCard size={18} /> },
      ],
    },
    {
      title: 'Extend',
      description: 'Add functionality with plugins',
      links: [
        { label: 'Plugins', path: '/help/plugins', icon: <Puzzle size={18} /> },
      ],
    },
    {
      title: 'Settings',
      description: 'Configure your business settings',
      links: [
        { label: 'General Settings', path: '/help/settings/general', icon: <Settings size={18} /> },
        { label: 'Resource Types', path: '/help/settings/resource-types', icon: <Settings size={18} /> },
        { label: 'Booking Settings', path: '/help/settings/booking', icon: <Settings size={18} /> },
        { label: 'Appearance', path: '/help/settings/appearance', icon: <Settings size={18} /> },
        { label: 'Email Templates', path: '/help/settings/email', icon: <Settings size={18} /> },
        { label: 'Custom Domains', path: '/help/settings/domains', icon: <Settings size={18} /> },
        { label: 'API Settings', path: '/help/settings/api', icon: <Settings size={18} /> },
        { label: 'Authentication', path: '/help/settings/auth', icon: <Settings size={18} /> },
        { label: 'Billing', path: '/help/settings/billing', icon: <Settings size={18} /> },
        { label: 'Usage & Quota', path: '/help/settings/quota', icon: <Settings size={18} /> },
      ],
    },
  ];

  return (
    <div className="p-8 max-w-6xl mx-auto">
      {/* 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">
            <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              {t('help.guide.title', 'Platform Guide')}
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              {t('help.guide.subtitle', 'Learn how to use SmoothSchedule effectively')}
            </p>
          </div>
        </div>
      </div>

      {/* Quick Start */}
      <section className="mb-10">
        <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-xl font-semibold text-gray-900 dark:text-white mb-4">Quick Start</h2>
          <ol className="space-y-3">
            <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>
              <span className="text-gray-700 dark:text-gray-300">Set up your <Link to="/help/services" className="text-brand-600 hover:underline">services</Link> - what you offer to customers</span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">Add your <Link to="/help/resources" className="text-brand-600 hover:underline">resources</Link> - staff, rooms, or equipment</span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">Use the <Link to="/help/scheduler" className="text-brand-600 hover:underline">scheduler</Link> to manage appointments</span>
            </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>
              <span className="text-gray-700 dark:text-gray-300">Track your business with the <Link to="/help/dashboard" className="text-brand-600 hover:underline">dashboard</Link></span>
            </li>
          </ol>
        </div>
      </section>

      {/* Help Sections */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {sections.map((section, idx) => (
          <div
            key={idx}
            className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6"
          >
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
              {section.title}
            </h3>
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
              {section.description}
            </p>
            <ul className="space-y-2">
              {section.links.map((link, linkIdx) => (
                <li key={linkIdx}>
                  <Link
                    to={link.path}
                    className="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400"
                  >
                    <span className="text-brand-500">{link.icon}</span>
                    <span className="flex-1">{link.label}</span>
                    <ChevronRight size={16} className="text-gray-400" />
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Need Help */}
      <section className="mt-10 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">
          Can't find what you're looking for? Our support team is ready to help.
        </p>
        <Link
          to="/tickets"
          className="inline-flex items-center gap-2 px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          Contact Support
        </Link>
      </section>
    </div>
  );
};

export default HelpGuide;