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

import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  ArrowLeft, FileSignature, FileText, Send, CheckCircle, ChevronRight,
  HelpCircle, Shield, Clock, Users, AlertCircle, Copy, Eye, Download,
  Plus, Pencil, Trash2, ChevronDown, Ban, ExternalLink,
  LayoutGrid,
} from 'lucide-react';

const HelpContracts: React.FC = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <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} /> {t('common.back', 'Back')}
      </button>

      <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">
            <FileSignature 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.contracts.overview.title', 'Contracts & E-Signature System')}</h1>
            <p className="text-gray-500 dark:text-gray-400">{t('help.contracts.overview.description', 'The contracts system allows you to create contract templates, send them to customers for signing, and maintain legally compliant audit trails.')}</p>
          </div>
        </div>
      </div>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <FileSignature size={20} className="text-brand-500" /> {t('help.contracts.overview.title', '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">
            {t('help.contracts.overview.description', 'The contracts system allows you to create contract templates, send them to customers for signing, and maintain legally compliant audit trails.')}
          </p>
          <p className="text-gray-600 dark:text-gray-300">
            {t('help.contracts.overview.compliance', 'Built for ESIGN Act and UETA compliance, capturing all necessary data for legally binding electronic signatures.')}
          </p>
        </div>
      </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" /> {t('help.contracts.pageLayout.title', '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">
            {t('help.contracts.pageLayout.description', 'The Contracts page is organized into two main sections:')}
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
              <ChevronDown size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('contracts.templates', 'Templates')}</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('help.contracts.pageLayout.templatesSection', 'Templates - Create and manage reusable contract templates')}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
              <ChevronDown size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('contracts.sentContracts', 'Sent Contracts')}</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {t('help.contracts.pageLayout.sentContractsSection', 'Sent Contracts - Track contracts sent to customers')}
                </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>{t('help.contracts.pageLayout.tip', 'Tip: Both sections can be expanded or collapsed by clicking the headers. Your preference is remembered.')}</strong>
            </p>
          </div>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <FileText size={20} className="text-brand-500" /> {t('help.contracts.templates.title', 'Contract Templates')}
        </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">
            {t('help.contracts.templates.description', 'Templates are reusable documents with placeholders that are automatically filled when sending to customers.')}
          </p>

          <h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.templates.variablesTitle', 'Available Variables')}</h3>
          <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
            {t('help.contracts.templates.variablesDescription', 'Use these placeholders in your template content to automatically personalize contracts:')}
          </p>
          <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm font-mono">
              <div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_NAME}}"}</span> - {t('help.contracts.templates.variables.customerName', 'Full name')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_FIRST_NAME}}"}</span> - {t('help.contracts.templates.variables.customerFirstName', 'First name')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_EMAIL}}"}</span> - {t('help.contracts.templates.variables.customerEmail', 'Email address')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{CUSTOMER_PHONE}}"}</span> - {t('help.contracts.templates.variables.customerPhone', 'Phone number')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_NAME}}"}</span> - {t('help.contracts.templates.variables.businessName', 'Your business name')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_EMAIL}}"}</span> - {t('help.contracts.templates.variables.businessEmail', 'Contact email')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{BUSINESS_PHONE}}"}</span> - {t('help.contracts.templates.variables.businessPhone', 'Business phone')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{DATE}}"}</span> - {t('help.contracts.templates.variables.date', 'Current date')}</div>
              <div><span className="text-blue-600 dark:text-blue-400">{"{{YEAR}}"}</span> - {t('help.contracts.templates.variables.year', 'Current year')}</div>
            </div>
          </div>

          <h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.templates.scopesTitle', 'Contract Scopes')}</h3>
          <div className="space-y-3">
            <div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
              <Users size={20} className="text-blue-500 mt-0.5" />
              <div>
                <span className="font-medium text-gray-900 dark:text-white">{t('contracts.scope.customer', 'Customer-Level')}</span>
                <p className="text-sm text-gray-500 dark:text-gray-400">{t('help.contracts.templates.scopes.customer', 'One-time contracts per customer (e.g., privacy policy, terms of service). Once signed, not sent again.')}</p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
              <Clock size={20} className="text-purple-500 mt-0.5" />
              <div>
                <span className="font-medium text-gray-900 dark:text-white">{t('contracts.scope.appointment', 'Per Appointment')}</span>
                <p className="text-sm text-gray-500 dark:text-gray-400">{t('help.contracts.templates.scopes.appointment', 'Signed for each booking (e.g., liability waivers, service agreements). Unique contracts created for each appointment.')}</p>
              </div>
            </div>
          </div>
        </div>
      </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" /> {t('help.contracts.creating.title', 'Creating a Template')}
        </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">
            {t('help.contracts.creating.description', 'To create a new contract template:')}
          </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">{t('help.contracts.creating.steps.1', 'Click the "New Template" button')}</h4>
              </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">{t('help.contracts.creating.steps.2', 'Enter a name and description for the template')}</h4>
              </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">{t('help.contracts.creating.steps.3', 'Write your contract content using the HTML editor')}</h4>
              </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">{t('help.contracts.creating.steps.4', 'Set the scope (Customer-Level or Per Appointment)')}</h4>
              </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">{t('help.contracts.creating.steps.5', 'Optionally set expiration (in days) and version notes')}</h4>
              </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">{t('help.contracts.creating.steps.6', 'Set status to Active when ready to use the template')}</h4>
              </div>
            </li>
          </ol>
        </div>
      </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" /> {t('help.contracts.managing.title', 'Managing Templates')}
        </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">
            {t('help.contracts.managing.description', 'Each template shows its scope, status, and version. Use the actions menu to:')}
          </p>
          <div className="space-y-3">
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Eye size={18} className="text-blue-500" />
              <div>
                <span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.preview', 'Preview PDF')}</span>
                <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.preview', 'See how the contract looks as a PDF with sample data')}</span>
              </div>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Pencil size={18} className="text-blue-500" />
              <div>
                <span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.edit', 'Edit')}</span>
                <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.edit', 'Update template name, content, or settings')}</span>
              </div>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Trash2 size={18} className="text-red-500" />
              <div>
                <span className="font-medium text-gray-900 dark:text-white">{t('contracts.actions.delete', 'Delete')}</span>
                <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">- {t('help.contracts.managing.actions.delete', 'Permanently remove a template (cannot undo if active contracts exist)')}</span>
              </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" />
              <p className="text-sm text-amber-800 dark:text-amber-200">
                <strong>{t('help.contracts.managing.note', 'Note: Templates have statuses: Draft (not ready), Active (can be sent), and Archived (hidden but kept for records)')}</strong>
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Send size={20} className="text-brand-500" /> {t('help.contracts.sending.title', 'Sending Contracts')}
        </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">
            {t('help.contracts.sending.description', 'To send a contract to a customer:')}
          </p>
          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">1</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.1', 'Click "Create Contract" in the Sent Contracts section')}</h4>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">2</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.2', 'Select an active template from the dropdown')}</h4>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">3</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.3', 'Search and select a customer')}</h4>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">4</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.4', 'Optionally link to a specific appointment or service')}</h4>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">5</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.5', 'Check "Send email immediately" to notify the customer')}</h4>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">6</span>
              </div>
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">{t('help.contracts.sending.steps.6', 'Click "Send Contract"')}</h4>
              </div>
            </div>
          </div>
        </div>
      </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" /> {t('help.contracts.statusActions.title', 'Contract Status & Actions')}
        </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-3 mb-6">
            <div className="flex items-center gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
              <div className="w-3 h-3 rounded-full bg-yellow-500" />
              <span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.pending', 'Pending')}</span>
              <span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.pending', 'Sent but not yet signed')}</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
              <div className="w-3 h-3 rounded-full bg-green-500" />
              <span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.signed', 'Signed')}</span>
              <span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.signed', 'Successfully signed by customer')}</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <div className="w-3 h-3 rounded-full bg-gray-500" />
              <span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.expired', 'Expired')}</span>
              <span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.expired', 'Signing deadline passed')}</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
              <div className="w-3 h-3 rounded-full bg-red-500" />
              <span className="font-medium text-gray-900 dark:text-white">{t('contracts.status.voided', 'Voided')}</span>
              <span className="text-sm text-gray-500 dark:text-gray-400">- {t('help.contracts.statusActions.statuses.voided', 'Manually revoked by business')}</span>
            </div>
          </div>

          <h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.statusActions.actionsTitle', 'Available Actions')}</h3>
          <div className="space-y-2">
            <div className="flex items-center gap-3 p-2 text-sm">
              <Eye size={16} className="text-blue-500" />
              <span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.viewDetails', 'View Details')}</strong> - {t('help.contracts.statusActions.actions.viewDetails', 'See full contract information and content preview')}</span>
            </div>
            <div className="flex items-center gap-3 p-2 text-sm">
              <Copy size={16} className="text-blue-500" />
              <span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.copyLink', 'Copy Signing Link')}</strong> - {t('help.contracts.statusActions.actions.copyLink', 'Get the public signing URL to share with customer')}</span>
            </div>
            <div className="flex items-center gap-3 p-2 text-sm">
              <ExternalLink size={16} className="text-blue-500" />
              <span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.openSigningPage', 'Open Signing Page')}</strong> - {t('help.contracts.statusActions.actions.openSigning', 'Preview what the customer sees')}</span>
            </div>
            <div className="flex items-center gap-3 p-2 text-sm">
              <Send size={16} className="text-green-500" />
              <span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.resend', 'Resend Email')}</strong> - {t('help.contracts.statusActions.actions.resend', 'Send another signing reminder email')}</span>
            </div>
            <div className="flex items-center gap-3 p-2 text-sm">
              <Ban size={16} className="text-red-500" />
              <span className="text-gray-700 dark:text-gray-300"><strong>{t('contracts.actions.void', 'Void Contract')}</strong> - {t('help.contracts.statusActions.actions.void', 'Revoke a pending contract')}</span>
            </div>
          </div>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Shield size={20} className="text-brand-500" /> {t('help.contracts.legalCompliance.title', 'Legal Compliance')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
            <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('help.contracts.legalCompliance.notice', 'The contract system is designed to meet ESIGN Act and UETA requirements. Each signature captures:')}</strong>
              </p>
            </div>
          </div>

          <h3 className="font-semibold text-gray-900 dark:text-white mb-3">{t('help.contracts.legalCompliance.auditDataTitle', 'Audit Trail Data')}</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.documentHash', 'Document hash (SHA-256) - Tamper evidence')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.signedTimestamp', 'Signed timestamp (ISO) - Time of signing')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.ipAddress', 'IP address - Signer identification')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.userAgent', 'User agent - Browser/device info')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.consentCheckbox', 'Consent checkbox states - Proof of intent')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
              <CheckCircle size={16} className="text-green-500" />
              <span>{t('help.contracts.legalCompliance.auditData.geolocation', 'Geolocation (optional) - Additional identification')}</span>
            </div>
          </div>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Download size={20} className="text-brand-500" /> {t('help.contracts.pdfGeneration.title', 'PDF Generation')}
        </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">
            {t('help.contracts.pdfGeneration.description', 'After a contract is signed, a PDF is automatically generated containing:')}
          </p>
          <ul className="space-y-2">
            <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">{t('help.contracts.pdfGeneration.includes.content', 'Full contract content')}</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">{t('help.contracts.pdfGeneration.includes.signature', 'Signature section with signer name and date')}</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">{t('help.contracts.pdfGeneration.includes.audit', 'Audit trail table with all compliance data')}</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">{t('help.contracts.pdfGeneration.includes.legal', 'Legal notice about ESIGN Act compliance')}</span>
            </li>
          </ul>
          <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>{t('help.contracts.pdfGeneration.tip', 'Signed PDFs can be downloaded by both the business and customer for their records.')}</strong>
            </p>
          </div>
        </div>
      </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" /> {t('help.contracts.bestPractices.title', 'Best Practices')}
        </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">{t('help.contracts.bestPractices.tips.1', 'Use clear, descriptive template names for easy identification')}</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">{t('help.contracts.bestPractices.tips.2', 'Keep contract content concise and readable')}</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">{t('help.contracts.bestPractices.tips.3', 'Test templates with sample data before setting to Active')}</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">{t('help.contracts.bestPractices.tips.4', 'Use version notes to track changes over time')}</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">{t('help.contracts.bestPractices.tips.5', 'Archive old templates instead of deleting to preserve history')}</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">{t('help.contracts.bestPractices.tips.6', 'Set appropriate expiration dates for time-sensitive contracts')}</span>
            </li>
          </ul>
        </div>
      </section>

      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">{t('help.contracts.relatedFeatures.title', 'Related Features')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <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">
            <FileText size={20} className="text-brand-500" />
            <span className="text-gray-900 dark:text-white">{t('help.contracts.relatedFeatures.servicesGuide', 'See the Services Guide for linking contracts to services')}</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">{t('help.contracts.relatedFeatures.customersGuide', 'See the Customers Guide for managing customer contacts')}</span>
            <ChevronRight size={16} className="text-gray-400 ml-auto" />
          </Link>
        </div>
      </section>

      <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('help.contracts.needHelp.title', 'Need Help?')}</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4">{t('help.contracts.needHelp.description', 'If you have questions about using contracts, our support team is here to help.')}</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('help.contracts.needHelp.contactSupport', 'Contact Support')}</button>
      </section>
    </div>
  );
};

export default HelpContracts;
