Add comprehensive tenant API documentation and settings help pages

- Create 6 new tenant API documentation pages:
  - HelpApiOverview: Authentication, scopes, rate limits, errors
  - HelpApiAppointments: CRUD operations for appointments
  - HelpApiServices: Read-only service catalog access
  - HelpApiResources: Staff, rooms, equipment endpoints
  - HelpApiCustomers: Customer management endpoints
  - HelpApiWebhooks: Real-time event subscriptions

- Create 6 new settings help pages for granular documentation

- Update HelpComprehensive with API section linking to new docs
- Update platform HelpApiDocs with comprehensive endpoint coverage
- Fix non-clickable /api/v1/docs/ links (now opens in new tab)
- Add routes for all new help pages in App.tsx
- Update FloatingHelpButton with new help page mappings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/help/HelpApiOverview.tsx

@@ -0,0 +1,551 @@
+/**
+ * Help API Overview Page
+ *
+ * Tenant-facing API documentation overview.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Code,
+  Key,
+  Shield,
+  AlertCircle,
+  Zap,
+  Book,
+  HelpCircle,
+  ChevronRight,
+  Calendar,
+  Users,
+  Settings,
+  Webhook,
+  CheckCircle,
+  XCircle,
+} from 'lucide-react';
+
+const HelpApiOverview: React.FC = () => {
+  const { t } = useTranslation();
+  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} />
+        {t('common.back', '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">
+            <Code size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              API Overview
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">
+              REST API for third-party integrations
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Introduction Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Book size={20} className="text-brand-500" />
+          Introduction
+        </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 provides a comprehensive REST API that allows you to integrate your scheduling
+            platform with third-party applications, build custom tools, and automate workflows.
+          </p>
+          <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4">
+            <h4 className="font-medium text-gray-900 dark:text-white mb-2">Base URL</h4>
+            <code className="text-sm text-brand-600 dark:text-brand-400">
+              https://your-subdomain.smoothschedule.com/api/v1/
+            </code>
+          </div>
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+            <div className="flex items-start gap-2">
+              <Book size={18} className="text-blue-600 dark:text-blue-400 mt-0.5" />
+              <div>
+                <p className="text-sm text-blue-800 dark:text-blue-300">
+                  <strong>Interactive Documentation:</strong> Explore and test API endpoints at{' '}
+                  <a
+                    href="/api/v1/docs/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-blue-100 dark:bg-blue-900/40 px-1 rounded font-mono hover:underline"
+                  >
+                    /api/v1/docs/
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Authentication Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Key size={20} className="text-brand-500" />
+          Authentication
+        </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">
+            All API requests require authentication using Bearer tokens in the Authorization header.
+          </p>
+
+          <div className="mb-6">
+            <h4 className="font-medium text-gray-900 dark:text-white mb-3">Token Format</h4>
+            <div className="space-y-2">
+              <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <CheckCircle size={18} className="text-green-500 mt-0.5" />
+                <div>
+                  <code className="text-sm text-gray-900 dark:text-white font-mono">ss_live_xxxxxxxxx</code>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Production environment</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <AlertCircle size={18} className="text-yellow-500 mt-0.5" />
+                <div>
+                  <code className="text-sm text-gray-900 dark:text-white font-mono">ss_test_xxxxxxxxx</code>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Sandbox environment (safe for testing)</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h4 className="font-medium text-gray-900 dark:text-white mb-3">Example Request</h4>
+            <div className="bg-gray-900 dark:bg-black rounded-lg p-4 overflow-x-auto">
+              <pre className="text-sm text-gray-100 font-mono">
+{`curl -X GET "https://demo.smoothschedule.com/api/v1/services/" \\
+  -H "Authorization: Bearer ss_live_xxxxxxxxx" \\
+  -H "Content-Type: application/json"`}
+              </pre>
+            </div>
+          </div>
+
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+            <div className="flex items-start gap-2">
+              <Shield size={18} className="text-yellow-600 dark:text-yellow-400 mt-0.5" />
+              <div>
+                <p className="text-sm text-yellow-800 dark:text-yellow-300">
+                  <strong>Security:</strong> API tokens are created in Business Settings → API.
+                  Each token has configurable scopes that control access to specific endpoints and operations.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Available Scopes 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" />
+          Available Scopes
+        </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 which operations your API token can perform by selecting scopes:
+          </p>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-white">Scope</th>
+                  <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-white">Description</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">services:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">View services and pricing</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">resources:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">View resources and staff</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">availability:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Check time slot availability</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">bookings:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">View appointments</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">bookings:write</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Create, update, cancel appointments</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">customers:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">View customer information</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">customers:write</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Create and update customers</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">business:read</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">View business information</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4">
+                    <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">webhooks:manage</code>
+                  </td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Manage webhook subscriptions</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      {/* Rate Limiting Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Zap size={20} className="text-brand-500" />
+          Rate Limiting
+        </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">
+            API requests are rate-limited to ensure fair usage and platform stability:
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Zap size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Global Limit</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">1,000 requests per hour</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Zap size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Burst Limit</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">100 requests per minute</p>
+              </div>
+            </div>
+          </div>
+          <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
+            <h4 className="font-medium text-gray-900 dark:text-white mb-2">Response Headers</h4>
+            <div className="space-y-1 text-sm font-mono text-gray-600 dark:text-gray-300">
+              <div><code>X-RateLimit-Limit</code> - Maximum requests allowed</div>
+              <div><code>X-RateLimit-Remaining</code> - Requests remaining in window</div>
+              <div><code>X-RateLimit-Reset</code> - Unix timestamp when limit resets</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Error Responses Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <AlertCircle size={20} className="text-brand-500" />
+          Error Responses
+        </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">
+            All errors follow a consistent JSON format:
+          </p>
+          <div className="bg-gray-900 dark:bg-black rounded-lg p-4 overflow-x-auto mb-4">
+            <pre className="text-sm text-gray-100 font-mono">
+{`{
+  "error": "validation_error",
+  "message": "Invalid request data",
+  "details": {
+    "start_time": ["This field is required."],
+    "service_id": ["Invalid service ID."]
+  }
+}`}
+            </pre>
+          </div>
+
+          <h4 className="font-medium text-gray-900 dark:text-white mb-3">HTTP Status Codes</h4>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-white">Code</th>
+                  <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-white">Status</th>
+                  <th className="text-left py-3 px-4 font-medium text-gray-900 dark:text-white">Description</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                <tr>
+                  <td className="py-3 px-4"><code className="text-green-600 dark:text-green-400">200</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">OK</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Request succeeded</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-green-600 dark:text-green-400">201</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Created</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Resource created successfully</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">400</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Bad Request</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Invalid request data</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">401</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Unauthorized</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Missing or invalid token</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">403</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Forbidden</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Insufficient scope permissions</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">404</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Not Found</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Resource does not exist</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">409</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Conflict</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Resource conflict (e.g., double booking)</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">429</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Too Many Requests</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Rate limit exceeded</td>
+                </tr>
+                <tr>
+                  <td className="py-3 px-4"><code className="text-red-600 dark:text-red-400">500</code></td>
+                  <td className="py-3 px-4 text-gray-900 dark:text-white">Internal Server Error</td>
+                  <td className="py-3 px-4 text-gray-600 dark:text-gray-300">Server error (contact support)</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      {/* Sandbox 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">
+          <Settings size={20} className="text-brand-500" />
+          Sandbox 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">
+            Test your integration safely without affecting production data:
+          </p>
+          <ul className="space-y-3 mb-4">
+            <li className="flex items-start gap-3">
+              <CheckCircle size={18} className="text-green-500 mt-0.5" />
+              <div>
+                <p className="text-gray-900 dark:text-white font-medium">Test Tokens</p>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Tokens prefixed with <code className="bg-gray-100 dark:bg-gray-700 px-1 rounded text-xs">ss_test_</code> work with sandbox data only
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <CheckCircle size={18} className="text-green-500 mt-0.5" />
+              <div>
+                <p className="text-gray-900 dark:text-white font-medium">Safe Testing</p>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Create, update, and delete test appointments without affecting real bookings
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <CheckCircle size={18} className="text-green-500 mt-0.5" />
+              <div>
+                <p className="text-gray-900 dark:text-white font-medium">Easy Toggle</p>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  Switch between test and live modes in Business Settings → API
+                </p>
+              </div>
+            </li>
+          </ul>
+          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={18} className="text-yellow-600 dark:text-yellow-400 mt-0.5" />
+              <div>
+                <p className="text-sm text-yellow-800 dark:text-yellow-300">
+                  <strong>Tip:</strong> Always test with sandbox tokens before using production tokens in your application.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Quick Links Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Book size={20} className="text-brand-500" />
+          API Endpoints
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link
+            to="/dashboard/help/api/appointments"
+            className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
+          >
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
+                <Calendar size={20} className="text-blue-600 dark:text-blue-400" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 mb-1">
+                  Appointments API
+                </h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Create, manage, and query appointments
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-end text-brand-600 dark:text-brand-400 text-sm font-medium">
+              View Docs
+              <ChevronRight size={16} className="ml-1" />
+            </div>
+          </Link>
+
+          <Link
+            to="/dashboard/help/api/services"
+            className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
+          >
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
+                <Settings size={20} className="text-green-600 dark:text-green-400" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 mb-1">
+                  Services API
+                </h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Access service catalog and pricing
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-end text-brand-600 dark:text-brand-400 text-sm font-medium">
+              View Docs
+              <ChevronRight size={16} className="ml-1" />
+            </div>
+          </Link>
+
+          <Link
+            to="/dashboard/help/api/resources"
+            className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
+          >
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
+                <Users size={20} className="text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 mb-1">
+                  Resources API
+                </h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Staff, rooms, and equipment data
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-end text-brand-600 dark:text-brand-400 text-sm font-medium">
+              View Docs
+              <ChevronRight size={16} className="ml-1" />
+            </div>
+          </Link>
+
+          <Link
+            to="/dashboard/help/api/customers"
+            className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
+          >
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center flex-shrink-0">
+                <Users size={20} className="text-orange-600 dark:text-orange-400" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 mb-1">
+                  Customers API
+                </h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Customer profiles and contact info
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-end text-brand-600 dark:text-brand-400 text-sm font-medium">
+              View Docs
+              <ChevronRight size={16} className="ml-1" />
+            </div>
+          </Link>
+
+          <Link
+            to="/dashboard/help/api/webhooks"
+            className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
+          >
+            <div className="flex items-start gap-3 mb-3">
+              <div className="w-10 h-10 rounded-lg bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center flex-shrink-0">
+                <Webhook size={20} className="text-pink-600 dark:text-pink-400" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 mb-1">
+                  Webhooks
+                </h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Real-time event notifications
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-end text-brand-600 dark:text-brand-400 text-sm font-medium">
+              View Docs
+              <ChevronRight size={16} className="ml-1" />
+            </div>
+          </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 API integration questions.
+        </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 HelpApiOverview;