import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  Copy,
  Check,
  ChevronDown,
  ChevronRight,
  Zap,
  AlertCircle,
  Code,
  Calendar,
  Shield,
  Cpu,
} from 'lucide-react';

// =============================================================================
// TYPES & CONSTANTS
// =============================================================================

type CodeLanguage = 'python' | 'json';

interface LanguageConfig {
  label: string;
  icon: string;
}

const LANGUAGES: Record<CodeLanguage, LanguageConfig> = {
  python: { label: 'Python', icon: 'py' },
  json: { label: 'JSON', icon: '{}' },
};

// =============================================================================
// SYNTAX HIGHLIGHTING
// =============================================================================

const highlightSyntax = (code: string, language: CodeLanguage): React.ReactNode => {
  const patterns: Record<string, Array<{ pattern: RegExp; className: string }>> = {
    json: [
      { pattern: /"([^"\\]|\\.)*"(?=\s*:)/g, className: 'text-purple-400' },
      { pattern: /"([^"\\]|\\.)*"(?!\s*:)/g, className: 'text-green-400' },
      { pattern: /\b(true|false|null)\b/g, className: 'text-orange-400' },
      { pattern: /\b(-?\d+\.?\d*)\b/g, className: 'text-cyan-400' },
    ],
    python: [
      { pattern: /#.*/g, className: 'text-gray-500 italic' },
      { pattern: /\b(import|from|class|def|return|if|else|elif|for|while|try|except|with|as|None|True|False|self|async|await|in|and|or|not|is)\b/g, className: 'text-purple-400' },
      { pattern: /('([^'\\]|\\.)*'|"([^"\\]|\\.)*"|f"([^"\\]|\\.)*"|f'([^'\\]|\\.)*')/g, className: 'text-green-400' },
      { pattern: /\b(\d+\.?\d*)\b/g, className: 'text-cyan-400' },
      { pattern: /@\w+/g, className: 'text-pink-400' },
    ],
  };

  const langPatterns = patterns[language] || [];

  if (langPatterns.length === 0) {
    return <span>{code}</span>;
  }

  const lines = code.split('\n');

  return (
    <>
      {lines.map((line, lineIndex) => {
        let result: Array<{ text: string; className?: string; start: number }> = [{ text: line, start: 0 }];

        langPatterns.forEach(({ pattern, className }) => {
          const newResult: typeof result = [];

          result.forEach(segment => {
            if (segment.className) {
              newResult.push(segment);
              return;
            }

            const text = segment.text;
            const regex = new RegExp(pattern.source, pattern.flags);
            let lastIndex = 0;
            let match;

            while ((match = regex.exec(text)) !== null) {
              if (match.index > lastIndex) {
                newResult.push({ text: text.slice(lastIndex, match.index), start: segment.start + lastIndex });
              }
              newResult.push({ text: match[0], className, start: segment.start + match.index });
              lastIndex = match.index + match[0].length;

              if (match[0].length === 0) break;
            }

            if (lastIndex < text.length) {
              newResult.push({ text: text.slice(lastIndex), start: segment.start + lastIndex });
            }
          });

          result = newResult.length > 0 ? newResult : result;
        });

        return (
          <React.Fragment key={lineIndex}>
            {result.map((segment, i) => (
              <span key={i} className={segment.className}>{segment.text}</span>
            ))}
            {lineIndex < lines.length - 1 && '\n'}
          </React.Fragment>
        );
      })}
    </>
  );
};

// =============================================================================
// CODE BLOCK COMPONENTS
// =============================================================================

const CodeBlock: React.FC<{ code: string; language?: CodeLanguage; title?: string }> = ({
  code,
  language = 'json',
  title
}) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="rounded-lg overflow-hidden bg-[#0a0a0f] mb-4">
      {title && (
        <div className="px-4 py-2 text-xs text-gray-400 border-b border-gray-800 flex items-center justify-between">
          <span>{title}</span>
          <span className="text-gray-500">{LANGUAGES[language]?.label || language}</span>
        </div>
      )}
      <div className="relative">
        <pre className="p-4 overflow-x-auto text-sm font-mono leading-relaxed text-gray-300">
          <code>{highlightSyntax(code, language)}</code>
        </pre>
        <button
          onClick={handleCopy}
          className="absolute top-2 right-2 p-1.5 rounded bg-gray-800 hover:bg-gray-700 text-gray-400 transition-colors"
          title="Copy to clipboard"
        >
          {copied ? <Check size={14} /> : <Copy size={14} />}
        </button>
      </div>
    </div>
  );
};

// Removed TabbedCodeBlock - we only show Python examples since users write scripts in the UI

// =============================================================================
// SIDEBAR NAVIGATION
// =============================================================================

interface NavSection {
  titleKey: string;
  id: string;
  items?: { titleKey: string; id: string }[];
}

const navSections: NavSection[] = [
  { titleKey: 'Introduction', id: 'introduction' },
  { titleKey: 'Quick Start', id: 'quick-start' },
  { titleKey: 'How It Works', id: 'how-it-works' },
  {
    titleKey: 'Available Plugins',
    id: 'plugins',
    items: [
      { titleKey: 'Built-in Plugins', id: 'builtin-plugins' },
      { titleKey: 'Custom Scripts', id: 'custom-scripts' },
      { titleKey: 'Template Variables', id: 'template-variables' },
    ],
  },
  {
    titleKey: 'API Reference',
    id: 'api',
    items: [
      { titleKey: 'API Methods', id: 'api-methods' },
      { titleKey: 'Command Reference', id: 'command-reference' },
      { titleKey: 'Schedule Types', id: 'schedule-types' },
      { titleKey: 'Manage Tasks', id: 'manage-tasks' },
    ],
  },
  {
    titleKey: 'Examples',
    id: 'examples',
    items: [
      { titleKey: 'Win Back Customers', id: 'example-reengagement' },
      { titleKey: 'Booking Alerts', id: 'example-alerts' },
      { titleKey: 'Weekly Reports', id: 'example-reports' },
    ],
  },
  {
    titleKey: 'Security',
    id: 'security',
    items: [
      { titleKey: 'Safety Features', id: 'safety' },
      { titleKey: 'Resource Limits', id: 'limits' },
    ],
  },
  { titleKey: 'Plugin Licensing', id: 'licensing' },
];

const Sidebar: React.FC<{
  activeSection: string;
  onSectionClick: (id: string) => void;
}> = ({ activeSection, onSectionClick }) => {
  const [expandedSections, setExpandedSections] = useState<string[]>(['plugins', 'api', 'examples', 'security']);

  const toggleSection = (id: string) => {
    setExpandedSections(prev =>
      prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]
    );
  };

  return (
    <nav className="w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-800 sticky top-[65px] h-[calc(100vh-65px)] overflow-y-auto">
      <div className="p-4 space-y-1">
        {navSections.map(section => (
          <div key={section.id}>
            {section.items ? (
              <>
                <button
                  onClick={() => toggleSection(section.id)}
                  className="w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
                >
                  {section.titleKey}
                  {expandedSections.includes(section.id) ? (
                    <ChevronDown size={16} />
                  ) : (
                    <ChevronRight size={16} />
                  )}
                </button>
                {expandedSections.includes(section.id) && (
                  <div className="ml-3 mt-1 space-y-0.5">
                    {section.items.map(item => (
                      <button
                        key={item.id}
                        onClick={() => onSectionClick(item.id)}
                        className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded-md transition-colors ${
                          activeSection === item.id
                            ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
                            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
                        }`}
                      >
                        <span className="truncate">{item.titleKey}</span>
                      </button>
                    ))}
                  </div>
                )}
              </>
            ) : (
              <button
                onClick={() => onSectionClick(section.id)}
                className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                  activeSection === section.id
                    ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                }`}
              >
                {section.titleKey}
              </button>
            )}
          </div>
        ))}
      </div>
    </nav>
  );
};

// =============================================================================
// API SECTION COMPONENT (Stripe-style split pane)
// =============================================================================

interface ApiSectionProps {
  id: string;
  children: React.ReactNode;
}

const ApiSection: React.FC<ApiSectionProps> = ({ id, children }) => {
  return (
    <section id={id} className="py-12 border-b border-gray-200 dark:border-gray-800 last:border-b-0 scroll-mt-24">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {children}
      </div>
    </section>
  );
};

const ApiContent: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="prose prose-gray dark:prose-invert max-w-none">
    {children}
  </div>
);

const ApiExample: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="lg:sticky lg:top-[81px] z-10">
    {children}
  </div>
);

// =============================================================================
// ATTRIBUTE TABLE
// =============================================================================

interface Attribute {
  name: string;
  type: string;
  description: string;
  required?: boolean;
}

const AttributeTable: React.FC<{ attributes: Attribute[] }> = ({ attributes }) => (
  <div className="mt-4 space-y-3">
    {attributes.map(attr => (
      <div key={attr.name} className="border-b border-gray-100 dark:border-gray-800 pb-3 last:border-b-0">
        <div className="flex items-center gap-2">
          <code className="text-sm font-mono text-purple-600 dark:text-purple-400">{attr.name}</code>
          <span className="text-xs text-gray-500">{attr.type}</span>
          {attr.required && (
            <span className="text-xs text-red-500 font-medium">required</span>
          )}
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{attr.description}</p>
      </div>
    ))}
  </div>
);

// =============================================================================
// MAIN COMPONENT
// =============================================================================

const HelpPluginDocs: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState('introduction');

  const handleSectionClick = (id: string) => {
    setActiveSection(id);
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  // Track active section on scroll
  useEffect(() => {
    const handleScroll = () => {
      const sections = document.querySelectorAll('section[id]');
      let current = 'introduction';
      const headerHeight = 72;
      const threshold = headerHeight + 32;

      sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        if (rect.top <= threshold) {
          current = section.id;
        }
      });

      setActiveSection(current);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // =============================================================================
  // CODE SNIPPETS
  // =============================================================================

  const simplePluginExample = `# Get scheduled appointments
appointments = api.get_appointments(status='SCHEDULED')

# Count them
count = len(appointments)

# Log the result
api.log(f'Found {count} scheduled appointments')

# Return result
result = {'total': count}`;

  const reengagementExample = `# Get customers who haven't booked in 60 days
from datetime import datetime, timedelta

cutoff = (datetime.now() - timedelta(days=60)).strftime('%Y-%m-%d')
customers = api.get_customers(has_email=True, limit=50)

# Send re-engagement emails
sent = 0
for customer in customers[:30]:  # Limit to 30 per run
    message = f'''Hi {customer['name']},

We miss you! It's been a while since your last visit.

Get 20% off your next appointment with code: COMEBACK20

Hope to see you soon!'''

    success = api.send_email(
        to=customer['email'],
        subject='We Miss You! 20% Off',
        body=message
    )

    if success:
        sent += 1

result = {'emails_sent': sent}`;

  const alertExample = `# Get appointments for next 7 days
from datetime import datetime, timedelta

today = datetime.now().strftime('%Y-%m-%d')
next_week = (datetime.now() + timedelta(days=7)).strftime('%Y-%m-%d')

upcoming = api.get_appointments(
    start_date=today,
    end_date=next_week,
    status='SCHEDULED'
)

# Alert if bookings are low
if len(upcoming) < 10:
    alert = f'''⚠️ LOW BOOKING ALERT

Only {len(upcoming)} appointments for next 7 days.

Recommendation: Run a promotion!'''

    api.send_email(
        to='manager@business.com',
        subject='⚠️ Low Bookings',
        body=alert
    )

    result = {'alert_sent': True, 'count': len(upcoming)}
else:
    result = {'alert_sent': False, 'count': len(upcoming)}`;

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
        {/* Header */}
        <header className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
          <div className="flex items-center justify-between px-6 py-4">
            <div className="flex items-center gap-4">
              <button
                onClick={() => navigate(-1)}
                className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
              >
                <ArrowLeft size={20} />
                <span className="text-sm">{t('common.back', 'Back')}</span>
              </button>
              <div className="h-6 w-px bg-gray-200 dark:bg-gray-700" />
              <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
                Automation Plugins
              </h1>
            </div>
          </div>
        </header>

        <div className="flex relative">
          {/* Sidebar */}
          <Sidebar activeSection={activeSection} onSectionClick={handleSectionClick} />

          {/* Main Content */}
          <main className="flex-1 min-w-0 px-8 lg:px-12">
            {/* Introduction */}
            <ApiSection id="introduction">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Automation Plugins
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Automate your business with powerful plugins that run on schedules. Send emails,
                  generate reports, and create custom workflows - all without writing complex code.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Key Features
                </h3>
                <ul className="text-gray-600 dark:text-gray-300">
                  <li><strong>Safe Scripting</strong> - Write Python-like code with if/else, loops, variables</li>
                  <li><strong>Flexible Scheduling</strong> - Run daily, weekly, hourly, or on cron schedules</li>
                  <li><strong>Resource Protected</strong> - Automatic limits prevent abuse</li>
                  <li><strong>Pre-built Templates</strong> - Start with ready-made plugins</li>
                </ul>
              </ApiContent>
              <ApiExample>
                <div className="p-6 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    What You Can Automate
                  </h3>
                  <ul className="space-y-3 text-gray-700 dark:text-gray-300">
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Send weekly summary reports to managers</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Re-engage customers who haven't booked in 60 days</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Alert when bookings are unusually low</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Send birthday wishes with discount codes</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Generate custom analytics and export data</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <Zap size={16} className="text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                      <span>Integrate with external services via webhooks</span>
                    </li>
                  </ul>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Quick Start */}
            <ApiSection id="quick-start">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Quick Start
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Create your first automation in 3 simple steps:
                </p>
                <ol className="text-gray-600 dark:text-gray-300">
                  <li><strong>Write your script</strong> - Use simple Python code to access your data</li>
                  <li><strong>Set a schedule</strong> - Choose when and how often to run</li>
                  <li><strong>Activate & monitor</strong> - Your automation runs automatically</li>
                </ol>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="SIMPLE EXAMPLE"
                  language="python"
                  code={simplePluginExample}
                />
                <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                  <p className="text-sm text-green-800 dark:text-green-200">
                    <strong>That's it!</strong> This script counts scheduled appointments and logs the result.
                    It runs automatically on your schedule.
                  </p>
                </div>
              </ApiExample>
            </ApiSection>

            {/* How It Works */}
            <ApiSection id="how-it-works">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  How It Works
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Your scripts run in a secure sandbox with access to your business data through
                  a simple API object.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Available API Methods
                </h3>
                <ul className="text-gray-600 dark:text-gray-300 text-sm">
                  <li><code>api.get_appointments()</code> - Get your appointments</li>
                  <li><code>api.get_customers()</code> - Get your customers</li>
                  <li><code>api.send_email()</code> - Send emails</li>
                  <li><code>api.create_appointment()</code> - Create appointments</li>
                  <li><code>api.log()</code> - Debug logging</li>
                </ul>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Execution Flow
                </h3>
                <ol className="text-gray-600 dark:text-gray-300 text-sm">
                  <li>Script is validated for safety</li>
                  <li>Loop guards injected to prevent infinite loops</li>
                  <li>Executed with resource limits (30s timeout, 50 API calls)</li>
                  <li>Results logged for audit trail</li>
                  <li>Next run automatically scheduled</li>
                </ol>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="EXECUTION FLOW"
                  language="python"
                  code={`# 1. Your script starts
appointments = api.get_appointments(status='SCHEDULED')

# 2. Loop protection active
for apt in appointments:  # ← Monitored for infinite loops
    api.log(f"Processing: {apt['title']}")

# 3. Resource limits enforced
# - Max 30 seconds execution time
# - Max 50 API calls
# - Max 10,000 loop iterations

# 4. Result returned
result = {'processed': len(appointments)}

# 5. Execution logged and next run scheduled`}
                />
              </ApiExample>
            </ApiSection>

            {/* Built-in Plugins */}
            <ApiSection id="builtin-plugins">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Built-in Plugins
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Ready-to-use plugins for common business tasks. Just configure and activate.
                </p>
                <AttributeTable
                  attributes={[
                    { name: 'client_reengagement', type: 'marketing', description: 'Reach out to customers who haven\'t booked recently with personalized discount codes.' },
                    { name: 'daily_report', type: 'reporting', description: 'Generate and email daily summary reports with appointment stats and metrics.' },
                    { name: 'low_show_rate_alert', type: 'monitoring', description: 'Monitor cancellation rates and alert when they exceed your threshold.' },
                    { name: 'webhook', type: 'integration', description: 'Call external APIs and integrate with third-party services.' },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <div className="p-6 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    How to Use Built-in Plugins
                  </h3>
                  <ol className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
                    <li className="flex items-start gap-2">
                      <span className="text-purple-600 dark:text-purple-400 font-semibold">1.</span>
                      <span>Navigate to Automation in your dashboard</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-purple-600 dark:text-purple-400 font-semibold">2.</span>
                      <span>Click "Create New Task"</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-purple-600 dark:text-purple-400 font-semibold">3.</span>
                      <span>Select a built-in plugin from the dropdown</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-purple-600 dark:text-purple-400 font-semibold">4.</span>
                      <span>Configure the plugin settings</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-purple-600 dark:text-purple-400 font-semibold">5.</span>
                      <span>Set your schedule and activate</span>
                    </li>
                  </ol>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Custom Scripts */}
            <ApiSection id="custom-scripts">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Custom Scripts
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Write your own automation logic with Python. Access your data, write if/else logic,
                  use loops, and create powerful custom workflows.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  What You Can Use
                </h3>
                <ul className="text-gray-600 dark:text-gray-300 text-sm grid grid-cols-2 gap-2">
                  <li>✓ if/else statements</li>
                  <li>✓ for/while loops</li>
                  <li>✓ Variables & lists</li>
                  <li>✓ Dictionaries</li>
                  <li>✓ String formatting</li>
                  <li>✓ Math operations</li>
                </ul>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  What's Blocked
                </h3>
                <ul className="text-gray-600 dark:text-gray-300 text-sm grid grid-cols-2 gap-2">
                  <li>✗ import statements</li>
                  <li>✗ File system access</li>
                  <li>✗ eval/exec</li>
                  <li>✗ Network access*</li>
                </ul>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  *Except approved API calls via api.http_get()
                </p>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="CUSTOM SCRIPT EXAMPLE"
                  language="python"
                  code={`# Get last 7 days of appointments
from datetime import datetime, timedelta

end = datetime.now().strftime('%Y-%m-%d')
start = (datetime.now() - timedelta(days=7)).strftime('%Y-%m-%d')

appointments = api.get_appointments(
    start_date=start,
    end_date=end
)

# Group by status
stats = {}
for apt in appointments:
    status = apt['status']
    stats[status] = stats.get(status, 0) + 1

# Build report
report = f"Weekly Report ({start} to {end})\\n\\n"
for status, count in stats.items():
    report += f"{status}: {count}\\n"
report += f"\\nTotal: {len(appointments)}"

# Email it
api.send_email(
    to='manager@business.com',
    subject='Weekly Report',
    body=report
)

result = {'total': len(appointments), 'by_status': stats}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Template Variables */}
            <ApiSection id="template-variables">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Template Variables
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Make your plugins reusable and shareable with powerful template variables. The system supports
                  four types of templates for maximum flexibility.
                </p>

                {/* 1. PROMPT Variables */}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  1. User Input (PROMPT)
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Prompt users for custom values during plugin installation. The system automatically
                  generates a configuration form based on your template variables.
                </p>
                <div className="mt-2 space-y-2 text-sm">
                  <div>
                    <code className="text-purple-600 dark:text-purple-400">{'{{PROMPT:variable|description}}'}</code>
                    <span className="text-gray-500 ml-2">- Required field</span>
                  </div>
                  <div>
                    <code className="text-purple-600 dark:text-purple-400">{'{{PROMPT:variable|description|default}}'}</code>
                    <span className="text-gray-500 ml-2">- Optional field with default value</span>
                  </div>
                  <div>
                    <code className="text-purple-600 dark:text-purple-400">{'{{PROMPT:variable|description|default|textarea}}'}</code>
                    <span className="text-gray-500 ml-2">- Multi-line text input (for email bodies, long messages)</span>
                  </div>
                </div>
                <div className="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded border border-amber-200 dark:border-amber-800">
                  <p className="text-sm text-amber-800 dark:text-amber-200 font-semibold mb-1">
                    Field Type Detection
                  </p>
                  <p className="text-xs text-amber-700 dark:text-amber-300">
                    The system automatically detects field types from variable names and descriptions: <code>email</code> for email validation,
                    <code> number</code> for numeric inputs, <code>message/body/content</code> for textareas, <code>url/webhook</code> for URLs.
                    You can override this by explicitly specifying the type as the 4th parameter.
                  </p>
                </div>
                <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
                  <p className="text-sm text-blue-800 dark:text-blue-200">
                    <strong>Example:</strong> <code className="text-purple-600">{'{{PROMPT:manager_email|Manager email address}}'}</code>
                  </p>
                  <p className="text-sm text-blue-800 dark:text-blue-200 mt-1">
                    <strong>With default:</strong> <code className="text-purple-600">{'{{PROMPT:discount|Discount code|SAVE20}}'}</code>
                  </p>
                </div>

                {/* 2. CONTEXT Variables */}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  2. Business Context (CONTEXT)
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Automatically filled with business information from the system. No user input required!
                </p>
                <div className="mt-2 space-y-1 text-sm font-mono">
                  <div className="text-green-600 dark:text-green-400">✓ {'{{CONTEXT:business_name}}'} - Business name</div>
                  <div className="text-green-600 dark:text-green-400">✓ {'{{CONTEXT:owner_email}}'} - Owner email</div>
                  <div className="text-green-600 dark:text-green-400">✓ {'{{CONTEXT:owner_name}}'} - Owner full name</div>
                  <div className="text-green-600 dark:text-green-400">✓ {'{{CONTEXT:contact_email}}'} - Contact email</div>
                  <div className="text-green-600 dark:text-green-400">✓ {'{{CONTEXT:phone}}'} - Business phone</div>
                </div>
                <div className="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
                  <p className="text-sm text-green-800 dark:text-green-200">
                    <strong>Benefit:</strong> Users don't need to manually enter data that's already in the system!
                  </p>
                </div>

                {/* 3. DATE Helpers */}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  3. Date Helpers (DATE)
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Pre-calculated dates without writing datetime code. All dates return YYYY-MM-DD format.
                </p>
                <div className="mt-2 space-y-1 text-sm font-mono">
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:today}}'} or {'{{DATE:now}}'} - Current date</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:tomorrow}}'} - Tomorrow's date</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:yesterday}}'} - Yesterday's date</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:+7d}}'} - 7 days from now</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:-30d}}'} - 30 days ago</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:+2w}}'} - 2 weeks from now</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:monday}}'} - Next Monday</div>
                  <div className="text-blue-600 dark:text-blue-400">{'{{DATE:friday}}'} - Next Friday</div>
                </div>

                {/* 4. Insertion Codes */}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  4. Insertion Codes (Dynamic Content)
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Use insertion codes within your PROMPT template text (like email bodies) to inject dynamic content
                  at runtime. These are automatically replaced with actual values when the plugin executes.
                </p>
                <div className="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
                  <p className="text-sm text-green-800 dark:text-green-200 mb-2">
                    <strong>Business Information:</strong>
                  </p>
                  <div className="space-y-1 text-xs text-green-700 dark:text-green-300 pl-3">
                    <div><code>{'{{BUSINESS_NAME}}'}</code> - Your business name</div>
                    <div><code>{'{{BUSINESS_EMAIL}}'}</code> - Business contact email</div>
                    <div><code>{'{{BUSINESS_PHONE}}'}</code> - Business phone number</div>
                  </div>
                </div>
                <div className="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
                  <p className="text-sm text-blue-800 dark:text-blue-200 mb-2">
                    <strong>Customer & Appointment Data:</strong>
                  </p>
                  <div className="space-y-1 text-xs text-blue-700 dark:text-blue-300 pl-3">
                    <div><code>{'{{CUSTOMER_NAME}}'}</code> - Customer's name (in appointment contexts)</div>
                    <div><code>{'{{CUSTOMER_EMAIL}}'}</code> - Customer's email address</div>
                    <div><code>{'{{APPOINTMENT_TIME}}'}</code> - Full appointment date and time</div>
                    <div><code>{'{{APPOINTMENT_DATE}}'}</code> - Appointment date only</div>
                    <div><code>{'{{APPOINTMENT_SERVICE}}'}</code> - Service name</div>
                  </div>
                </div>
                <div className="mt-2 p-3 bg-purple-50 dark:bg-purple-900/20 rounded border border-purple-200 dark:border-purple-800">
                  <p className="text-sm text-purple-800 dark:text-purple-200 mb-2">
                    <strong>Date & Time:</strong>
                  </p>
                  <div className="space-y-1 text-xs text-purple-700 dark:text-purple-300 pl-3">
                    <div><code>{'{{TODAY}}'}</code> - Today's date (YYYY-MM-DD)</div>
                    <div><code>{'{{NOW}}'}</code> - Current date and time</div>
                  </div>
                </div>
                <div className="mt-3 p-4 bg-amber-50 dark:bg-amber-900/20 rounded border border-amber-200 dark:border-amber-800">
                  <p className="text-sm text-amber-800 dark:text-amber-200 font-semibold mb-2">Example: Email Template with Insertion Codes</p>
                  <code className="text-xs block bg-white dark:bg-gray-900 p-3 rounded font-mono text-amber-900 dark:text-amber-100 whitespace-pre-wrap">
{`email_body = '{{PROMPT:email_body|Email Message|Hi {{CUSTOMER_NAME}},

This is a reminder about your appointment:

Date/Time: {{APPOINTMENT_TIME}}
Service: {{APPOINTMENT_SERVICE}}

If you have questions, contact us at {{BUSINESS_EMAIL}}

Best regards,
{{BUSINESS_NAME}}||textarea}}'`}
                  </code>
                </div>

                {/* 5. Validation & Types */}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  5. Automatic Validation
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  The system automatically detects field types and validates input:
                </p>
                <div className="mt-2 space-y-1 text-sm">
                  <div><strong>Email:</strong> Variables with "email" in name/description are validated</div>
                  <div><strong>Number:</strong> Variables with "count", "days", "hours", "limit" are numeric</div>
                  <div><strong>URL:</strong> Variables with "url", "webhook", "endpoint" are validated</div>
                  <div><strong>Textarea:</strong> Variables with "message", "body", "content" use multi-line input</div>
                </div>

                <div className="mt-6 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                  <p className="text-sm text-purple-800 dark:text-purple-200">
                    <strong>Pro Tip:</strong> Combine all template types for maximum power! Use CONTEXT
                    for business info, DATE for time logic, PROMPT for user configuration, and Insertion Codes
                    within your email templates for personalized dynamic content.
                  </p>
                </div>
              </ApiContent>

              <ApiExample>
                {/* Visual Mockup of Configuration Form */}
                <div className="mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg border-2 border-indigo-200 dark:border-indigo-800 shadow-lg">
                  <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200 dark:border-gray-700">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                      Configure Plugin
                    </h3>
                    <span className="text-xs text-gray-500 dark:text-gray-400">Step 2 of 3</span>
                  </div>

                  <div className="space-y-4">
                    {/* Field 1: Required, no default */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Days Inactive <span className="text-red-500">*</span>
                      </label>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                        Number of days before a customer is considered inactive
                      </p>
                      <input
                        type="number"
                        placeholder="Enter days inactive"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm"
                        value=""
                        readOnly
                      />
                    </div>

                    {/* Field 2: Optional with default */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Discount Code
                      </label>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                        Promotional discount code to offer
                      </p>
                      <input
                        type="text"
                        placeholder="Enter discount code"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm"
                        value="SAVE20"
                        readOnly
                      />
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 italic">
                        Default: SAVE20
                      </p>
                    </div>

                    {/* Field 3: Email type (auto-detected) */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Manager Email <span className="text-red-500">*</span>
                      </label>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                        Email address for reports and notifications
                      </p>
                      <input
                        type="email"
                        placeholder="manager@example.com"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm"
                        value=""
                        readOnly
                      />
                      <p className="text-xs text-green-600 dark:text-green-400 mt-1 flex items-center gap-1">
                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
                        </svg>
                        Email validation enabled
                      </p>
                    </div>

                    {/* Field 4: Textarea (auto-detected) */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Email Message
                      </label>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                        Custom message to include in re-engagement emails
                      </p>
                      <textarea
                        rows={3}
                        placeholder="Enter email message"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm resize-none"
                        value="We miss you! Come back and save 20%"
                        readOnly
                      />
                    </div>
                  </div>

                  {/* Info Box */}
                  <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                    <p className="text-xs text-blue-800 dark:text-blue-200">
                      <strong>Auto-filled values:</strong> business_name, owner_email, phone
                      (no input needed)
                    </p>
                  </div>

                  {/* Buttons */}
                  <div className="mt-6 flex gap-3">
                    <button className="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                      Back
                    </button>
                    <button className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                      Install Plugin →
                    </button>
                  </div>
                </div>

                <CodeBlock
                  title="PLUGIN CODE WITH PROMPT VARIABLES"
                  language="python"
                  code={`# The plugin code that generates the form above

# Required field (no default)
days = {{PROMPT:days_inactive|Number of days before a customer is considered inactive}}

# Optional field (has default)
discount = {{PROMPT:discount_code|Promotional discount code to offer|SAVE20}}

# Email type (auto-detected and validated)
manager = {{PROMPT:manager_email|Email address for reports and notifications}}

# Textarea type (auto-detected)
custom_msg = {{PROMPT:email_message|Custom message to include in re-engagement emails}}

# Context variables (auto-filled, no form needed)
business = {{CONTEXT:business_name}}
owner = {{CONTEXT:owner_email}}
phone = {{CONTEXT:phone}}`}
                />

                <CodeBlock
                  title="ALL TEMPLATE TYPES EXAMPLE"
                  language="python"
                  code={`# Advanced re-engagement plugin with all template types
from datetime import datetime, timedelta

# DATE helper - no code needed!
today = {{DATE:today}}
cutoff_date = {{DATE:-60d}}  # 60 days ago

# PROMPT with default value
days = {{PROMPT:days_inactive|Days before inactive|60}}
discount = {{PROMPT:discount_code|Promotional code|SAVE20}}

# Get inactive customers
customers = api.get_customers(has_email=True)

# Send personalized emails
for customer in customers[:30]:
    message = f'''Hi {customer['name']},

We miss you at {{CONTEXT:business_name}}!

Come back before {{DATE:+7d}} and use code {discount}
for 20% off your next appointment.

Questions? Call {{CONTEXT:phone}} or email {{CONTEXT:contact_email}}

Best regards,
{{CONTEXT:owner_name}}'''

    api.send_email(
        to=customer['email'],
        subject={{PROMPT:subject|Email subject|We Miss You!}},
        body=message
    )

result = {'sent': 30, 'cutoff': cutoff_date}`}
                />

                <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <h3 className="font-semibold text-blue-900 dark:text-blue-200 mb-2">
                    What Gets Replaced
                  </h3>
                  <div className="space-y-2 text-sm">
                    <div className="grid grid-cols-2 gap-2">
                      <div className="text-blue-700 dark:text-blue-300 font-mono text-xs">{'{{CONTEXT:business_name}}'}</div>
                      <div className="text-blue-800 dark:text-blue-200">→ "Acme Spa" (auto-filled)</div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="text-blue-700 dark:text-blue-300 font-mono text-xs">{'{{DATE:today}}'}</div>
                      <div className="text-blue-800 dark:text-blue-200">→ "2025-01-15" (calculated)</div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="text-blue-700 dark:text-blue-300 font-mono text-xs">{'{{DATE:-60d}}'}</div>
                      <div className="text-blue-800 dark:text-blue-200">→ "2024-11-16" (60 days ago)</div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="text-blue-700 dark:text-blue-300 font-mono text-xs">{'{{PROMPT:discount_code|...|SAVE20}}'}</div>
                      <div className="text-blue-800 dark:text-blue-200">→ "SAVE20" (default used)</div>
                    </div>
                  </div>
                </div>

                <div className="mt-4 space-y-3">
                  <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
                    <h4 className="font-semibold text-green-900 dark:text-green-200 text-sm mb-1">
                      Benefits of CONTEXT Variables
                    </h4>
                    <ul className="text-xs text-green-800 dark:text-green-200 space-y-1">
                      <li>✓ No user input required - fully automatic</li>
                      <li>✓ Always up-to-date with current business info</li>
                      <li>✓ Prevents typos in business name/email</li>
                      <li>✓ Faster plugin installation</li>
                    </ul>
                  </div>

                  <div className="p-3 bg-orange-50 dark:bg-orange-900/20 rounded border border-orange-200 dark:border-orange-800">
                    <h4 className="font-semibold text-orange-900 dark:text-orange-200 text-sm mb-1">
                      Benefits of DATE Helpers
                    </h4>
                    <ul className="text-xs text-orange-800 dark:text-orange-200 space-y-1">
                      <li>✓ No datetime imports or code needed</li>
                      <li>✓ Simpler, more readable scripts</li>
                      <li>✓ Consistent date formatting (YYYY-MM-DD)</li>
                      <li>✓ Human-friendly expressions (+7d, monday)</li>
                    </ul>
                  </div>

                  <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded border border-purple-200 dark:border-purple-800">
                    <h4 className="font-semibold text-purple-900 dark:text-purple-200 text-sm mb-1">
                      Benefits of Default Values
                    </h4>
                    <ul className="text-xs text-purple-800 dark:text-purple-200 space-y-1">
                      <li>✓ Faster setup with pre-filled sensible defaults</li>
                      <li>✓ Users can accept defaults or customize</li>
                      <li>✓ Makes fields optional instead of required</li>
                      <li>✓ Great for expert/beginner modes</li>
                    </ul>
                  </div>
                </div>
              </ApiExample>
            </ApiSection>

            {/* API Methods */}
            <section id="api-methods" className="py-12 border-b border-gray-200 dark:border-gray-800 scroll-mt-24">
              <div className="prose prose-gray dark:prose-invert max-w-none">
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  API Methods Reference
                </h2>
                <p className="text-gray-600 dark:text-gray-300 mb-8">
                  All scripts have access to the <code>api</code> object with these methods. Each method shows its signature, available filters/parameters, and return data structure.
                </p>

                {/* get_appointments */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Appointments</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_appointments(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    {/* Status Filters */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Status Filters</span>
                      <div className="mt-1 space-y-1 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— Exact match: SCHEDULED, COMPLETED, CANCELED, NO_SHOW, EN_ROUTE, IN_PROGRESS, AWAITING_PAYMENT, PAID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status__in</code> <span className="text-gray-500">— Multiple statuses: <code>['SCHEDULED', 'COMPLETED']</code></span></div>
                      </div>
                    </div>

                    {/* DateTime Comparison Filters */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">DateTime Comparisons <span className="text-gray-400">(ISO format: YYYY-MM-DDTHH:MM:SS)</span></span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">start_time__gt</code> <span className="text-gray-500">— After this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time__gte</code> <span className="text-gray-500">— On or after this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time__lt</code> <span className="text-gray-500">— Before this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time__lte</code> <span className="text-gray-500">— On or before this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_time__gt</code> <span className="text-gray-500">— Ends after this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_time__gte</code> <span className="text-gray-500">— Ends on or after</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_time__lt</code> <span className="text-gray-500">— Ends before this time</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_time__lte</code> <span className="text-gray-500">— Ends on or before</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte</code> <span className="text-gray-500">— Created on or after</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__lte</code> <span className="text-gray-500">— Created on or before</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">updated_at__gte</code> <span className="text-gray-500">— Updated on or after</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">updated_at__lte</code> <span className="text-gray-500">— Updated on or before</span></div>
                      </div>
                    </div>

                    {/* Shortcut Date Filters */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Date Shortcuts <span className="text-gray-400">(YYYY-MM-DD format)</span></span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">start_date</code> <span className="text-gray-500">— Appointments starting on or after this date</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_date</code> <span className="text-gray-500">— Appointments starting on or before this date</span></div>
                      </div>
                    </div>

                    {/* Related Object Filters */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Related Objects</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">service_id</code> <span className="text-gray-500">— Filter by service ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">location_id</code> <span className="text-gray-500">— Filter by location ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_id</code> <span className="text-gray-500">— Filter by customer ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">resource_id</code> <span className="text-gray-500">— Filter by resource/staff ID</span></div>
                      </div>
                    </div>

                    {/* Text Search Filters */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Text Search <span className="text-gray-400">(case-insensitive)</span></span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">title__icontains</code> <span className="text-gray-500">— Title contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">notes__icontains</code> <span className="text-gray-500">— Notes contain text</span></div>
                      </div>
                    </div>

                    {/* Numeric Comparisons */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Price/Amount Comparisons</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">deposit_amount__gte</code> <span className="text-gray-500">— Deposit ≥ amount</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">deposit_amount__lte</code> <span className="text-gray-500">— Deposit ≤ amount</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">final_price__gte</code> <span className="text-gray-500">— Final price ≥ amount</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">final_price__lte</code> <span className="text-gray-500">— Final price ≤ amount</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_deposit</code> <span className="text-gray-500">— True/False: has a deposit</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_final_price</code> <span className="text-gray-500">— True/False: has final price</span></div>
                      </div>
                    </div>

                    {/* Pagination */}
                    <div className="mb-4">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Pagination</span>
                      <div className="mt-1 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 1000)</span></div>
                      </div>
                    </div>

                    <CodeBlock
                      language="python"
                      code={`# Example: Get scheduled appointments for next week with high deposits
appointments = api.get_appointments(
    status__in=['SCHEDULED', 'CONFIRMED'],
    start_time__gte='2025-01-15T00:00:00',
    start_time__lt='2025-01-22T00:00:00',
    deposit_amount__gte=50.00,
    limit=100
)

# Returns:
[
    {
        "id": 1234,
        "title": "Haircut with Sarah",
        "start_time": "2025-01-15T10:00:00+00:00",
        "end_time": "2025-01-15T11:00:00+00:00",
        "status": "SCHEDULED",
        "notes": "Client prefers short layers",
        "created_at": "2025-01-10T14:30:00+00:00",
        "updated_at": "2025-01-12T09:00:00+00:00",
        "service_id": 301,
        "service_name": "Haircut",
        "location_id": 1,
        "location_name": "Downtown Salon",
        "deposit_amount": 75.00,
        "final_price": null
    }
]`}
                    />
                  </div>
                </div>

                {/* create_appointment */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-end">
                    <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                      api.create_appointment(title, start_time, end_time, notes) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">title</code> <span className="text-gray-500">— Appointment title (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time</code> <span className="text-gray-500">— ISO datetime (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_time</code> <span className="text-gray-500">— ISO datetime (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">notes</code> <span className="text-gray-500">— Optional notes</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "id": 1235,
    "title": "Consultation",
    "start_time": "2025-01-20T14:00:00+00:00",
    "end_time": "2025-01-20T15:00:00+00:00",
    "status": "SCHEDULED",
    "notes": "New client intake",
    "created_at": "2025-01-15T09:00:00+00:00"
}`}
                    />
                  </div>
                </div>

                {/* update_appointment */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-end">
                    <code className="text-sm bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">
                      api.update_appointment(id, **updates) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Updateable Fields</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">title</code> <span className="text-gray-500">— New title</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— SCHEDULED, COMPLETED, CANCELED, NO_SHOW</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">notes</code> <span className="text-gray-500">— Updated notes</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time</code> / <code className="text-purple-600 dark:text-purple-400">end_time</code> <span className="text-gray-500">— Reschedule</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "id": 1234,
    "title": "Haircut with Sarah",
    "start_time": "2025-01-15T10:00:00+00:00",
    "end_time": "2025-01-15T11:00:00+00:00",
    "status": "COMPLETED",
    "notes": "Great session! Rebook in 6 weeks.",
    "customer_id": 5001,
    "customer_name": "Jane Doe",
    "updated_at": "2025-01-15T11:05:00+00:00"
}`}
                    />
                  </div>
                </div>

                {/* get_recurring_appointments */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: recurring_appointments</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_recurring_appointments(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact recurring appointment ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— active, paused, canceled</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status__in</code> <span className="text-gray-500">— Multiple statuses ['active', 'paused']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">title__icontains</code> <span className="text-gray-500">— Title contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">recurring_pattern__icontains</code> <span className="text-gray-500">— Recurrence rule contains</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time__gte/lte/gt/lt</code> <span className="text-gray-500">— Time comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_id</code> <span className="text-gray-500">— Filter by customer ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">resource_id</code> <span className="text-gray-500">— Filter by resource ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 50,
        "title": "Weekly Massage - John",
        "recurrence_rule": "FREQ=WEEKLY;BYDAY=TU",
        "start_time": "14:00:00",
        "end_time": "15:00:00",
        "customer_id": 5002,
        "customer_name": "John Smith",
        "resource_id": 102,
        "resource_name": "Mike Thompson",
        "next_occurrence": "2025-01-21T14:00:00+00:00",
        "occurrences_remaining": null,
        "status": "active"
    }
]`}
                    />
                  </div>
                </div>

                {/* get_customers */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Customers</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_customers(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact customer ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">email</code> <span className="text-gray-500">— Exact email match</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">email__icontains</code> <span className="text-gray-500">— Email contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_email</code> <span className="text-gray-500">— true/false, filter by email presence</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_phone</code> <span className="text-gray-500">— true/false, filter by phone presence</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— Filter by active status</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Date comparisons (ISO format)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 1000)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 5001,
        "email": "jane@example.com",
        "name": "Jane Doe",
        "first_name": "Jane",
        "last_name": "Doe",
        "phone": "+15551234567",
        "created_at": "2024-06-15T10:00:00+00:00",
        "last_appointment": "2025-01-15T10:00:00+00:00",
        "total_appointments": 12,
        "notes": "Prefers morning appointments"
    }
]`}
                    />
                  </div>
                </div>

                {/* get_resources */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Resources</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_resources(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact resource ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">type</code> <span className="text-gray-500">— STAFF, ROOM, or EQUIPMENT</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">type__in</code> <span className="text-gray-500">— Multiple types ['STAFF', 'ROOM']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">description__icontains</code> <span className="text-gray-500">— Description contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— true/false (default: true)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_mobile</code> <span className="text-gray-500">— Filter by mobile capability</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">location_id</code> <span className="text-gray-500">— Filter by location</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">user_id</code> <span className="text-gray-500">— Filter by linked user ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">max_concurrent_events__gte/lte</code> <span className="text-gray-500">— Concurrency comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 101,
        "name": "Sarah Johnson",
        "type": "STAFF",
        "resource_type_id": 1,
        "resource_type_name": "Hair Stylist",
        "location_id": 1,
        "location_name": "Downtown Salon",
        "user_id": 201,
        "user_email": "sarah@salon.com",
        "is_active": true,
        "max_concurrent_events": 1,
        "color": "#4F46E5",
        "description": "Senior stylist, 10 years experience"
    }
]`}
                    />
                  </div>
                </div>

                {/* get_resource_availability */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-end">
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_resource_availability(resource_id, ...) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">resource_id</code> <span className="text-gray-500">— Resource ID (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Number of days to check</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_date</code> <span className="text-gray-500">— Start of period (YYYY-MM-DD)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">end_date</code> <span className="text-gray-500">— End of period (YYYY-MM-DD)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "resource_id": 101,
    "resource_name": "Sarah Johnson",
    "period_start": "2025-01-15",
    "period_end": "2025-01-21",
    "total_hours": 56.0,
    "booked_hours": 32.5,
    "available_hours": 23.5,
    "utilization": 58.04,
    "appointment_count": 15,
    "appointments": [
        {
            "id": 1234,
            "title": "Haircut",
            "start_time": "2025-01-15T10:00:00+00:00",
            "end_time": "2025-01-15T11:00:00+00:00",
            "customer_name": "Jane Doe"
        }
    ]
}`}
                    />
                  </div>
                </div>

                {/* get_services */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Services</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_services(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact service ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">description__icontains</code> <span className="text-gray-500">— Description contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— true/false (default: true)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_global</code> <span className="text-gray-500">— Filter global services</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">variable_pricing</code> <span className="text-gray-500">— Filter by variable pricing</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">requires_deposit</code> <span className="text-gray-500">— Filter by deposit required</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">location_id</code> <span className="text-gray-500">— Filter by location</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">duration__gte/lte</code> <span className="text-gray-500">— Duration comparisons (minutes)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">price__gte/lte</code> <span className="text-gray-500">— Price comparisons (decimal)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">price_cents__gte/lte</code> <span className="text-gray-500">— Price comparisons (cents)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 301,
        "name": "Haircut",
        "description": "Includes wash and style",
        "duration": 60,
        "price": 45.00,
        "price_cents": 4500,
        "currency": "USD",
        "requires_deposit": true,
        "deposit_amount": 10.00,
        "deposit_amount_cents": 1000,
        "is_active": true,
        "is_global": true,
        "location_id": null,
        "location_name": null,
        "category": "Hair Services",
        "buffer_before": 0,
        "buffer_after": 15
    }
]`}
                    />
                  </div>
                </div>

                {/* get_service_stats */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-end">
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_service_stats(service_id, days) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">service_id</code> <span className="text-gray-500">— Service ID (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "service_id": 301,
    "service_name": "Haircut",
    "period_days": 30,
    "total_bookings": 145,
    "completed_bookings": 132,
    "canceled_bookings": 8,
    "no_show_bookings": 5,
    "completion_rate": 91.03,
    "cancellation_rate": 5.52,
    "no_show_rate": 3.45,
    "total_revenue": 5940.00,
    "average_revenue": 45.00,
    "unique_customers": 98,
    "repeat_customers": 34
}`}
                    />
                  </div>
                </div>

                {/* get_locations */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Locations</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_locations(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact location ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">city__icontains</code> <span className="text-gray-500">— City contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">state</code> <span className="text-gray-500">— Exact state match</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">country</code> <span className="text-gray-500">— Exact country match</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">postal_code</code> <span className="text-gray-500">— Exact postal code</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">timezone</code> <span className="text-gray-500">— Exact timezone</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— true/false (default: true)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_primary</code> <span className="text-gray-500">— Filter primary location</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_phone</code> <span className="text-gray-500">— Has phone number</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_email</code> <span className="text-gray-500">— Has email address</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 1,
        "name": "Downtown Salon",
        "address": "123 Main Street",
        "city": "Denver",
        "state": "CO",
        "zip_code": "80202",
        "country": "US",
        "phone": "+13035551234",
        "email": "downtown@salon.com",
        "timezone": "America/Denver",
        "is_active": true,
        "is_primary": true,
        "resource_count": 5,
        "service_count": 12
    }
]`}
                    />
                  </div>
                </div>

                {/* get_location_stats */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: multi_location</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_location_stats(location_id, days) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">location_id</code> <span className="text-gray-500">— Location ID (required)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "location_id": 1,
    "location_name": "Downtown Salon",
    "period_days": 30,
    "total_appointments": 320,
    "completed_appointments": 298,
    "canceled_appointments": 15,
    "no_show_appointments": 7,
    "completion_rate": 93.13,
    "total_revenue": 14400.00,
    "average_daily_appointments": 10.67,
    "busiest_day": "Saturday",
    "busiest_hour": 14,
    "resource_utilization": 72.5,
    "top_services": [
        {"service_name": "Haircut", "count": 145},
        {"service_name": "Color", "count": 87}
    ]
}`}
                    />
                  </div>
                </div>

                {/* get_staff */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Staff</h3>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_staff(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact staff ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">role</code> <span className="text-gray-500">— staff, manager, or owner</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">role__in</code> <span className="text-gray-500">— Multiple roles ['staff', 'manager']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">email</code> <span className="text-gray-500">— Exact email match</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">email__icontains</code> <span className="text-gray-500">— Email contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Full name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">first_name__icontains</code> <span className="text-gray-500">— First name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">last_name__icontains</code> <span className="text-gray-500">— Last name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— true/false (default: true)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">has_phone</code> <span className="text-gray-500">— Has phone number</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 201,
        "email": "sarah@salon.com",
        "name": "Sarah Johnson",
        "first_name": "Sarah",
        "last_name": "Johnson",
        "phone": "+15559876543",
        "role": "staff",
        "is_active": true,
        "resource_id": 101,
        "resource_name": "Sarah Johnson",
        "hire_date": "2020-03-15",
        "permissions": {
            "can_view_all_appointments": true,
            "can_manage_customers": false
        }
    }
]`}
                    />
                  </div>
                </div>

                {/* get_staff_performance */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-end">
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_staff_performance(staff_id=None, days=30) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">staff_id</code> <span className="text-gray-500">— Specific staff (optional, omit for all)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "period_days": 30,
    "staff_count": 5,
    "staff": [
        {
            "staff_id": 201,
            "staff_name": "Sarah Johnson",
            "email": "sarah@salon.com",
            "total_appointments": 85,
            "completed_appointments": 80,
            "canceled_appointments": 3,
            "no_show_appointments": 2,
            "completion_rate": 94.12,
            "hours_worked": 72.5,
            "hours_available": 160.0,
            "utilization": 45.31,
            "total_revenue": 3825.00,
            "average_per_appointment": 47.81,
            "unique_customers": 62,
            "repeat_customer_rate": 35.48
        }
    ],
    "totals": {
        "total_appointments": 320,
        "total_revenue": 14400.00,
        "average_completion_rate": 91.5
    }
}`}
                    />
                  </div>
                </div>

                {/* send_email */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div>
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Communication</h3>
                    </div>
                    <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                      api.send_email(to, subject, body) → bool
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-1 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">to</code> <span className="text-gray-500">— Email address OR customer ID (int)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">subject</code> <span className="text-gray-500">— Email subject (max 200 chars)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">body</code> <span className="text-gray-500">— Email body (max 10,000 chars)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns: True (sent) or False (failed)

# Example - send to email:
api.send_email('jane@example.com', 'Thanks!', 'We hope to see you again.')

# Example - send to customer by ID:
api.send_email(5001, 'Reminder', 'Your appointment is tomorrow.')`}
                    />
                  </div>
                </div>

                {/* send_sms */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: sms_enabled</span>
                    <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                      api.send_sms(to, message) → bool
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-1 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">to</code> <span className="text-gray-500">— Phone number in E.164 format (+15551234567)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">message</code> <span className="text-gray-500">— SMS text (max 1600 chars)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns: True (sent) or False (failed)

api.send_sms('+15551234567', 'Reminder: Your appointment is tomorrow at 10am!')`}
                    />
                  </div>
                </div>

                {/* get_sms_balance */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: sms_enabled</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_sms_balance() → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "credits_remaining": 450,
    "monthly_limit": 500,
    "credits_used_this_month": 50,
    "reset_date": "2025-02-01",
    "cost_per_sms": 0.05
}`}
                    />
                  </div>
                </div>

                {/* get_email_templates */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: can_use_email_templates</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_email_templates(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact template ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">template_type</code> <span className="text-gray-500">— Exact template type</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">template_type__in</code> <span className="text-gray-500">— Multiple template types</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">name__icontains</code> <span className="text-gray-500">— Name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">subject__icontains</code> <span className="text-gray-500">— Subject contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">is_active</code> <span className="text-gray-500">— true/false (default: true)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Date comparisons (ISO format)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 10,
        "name": "Appointment Reminder",
        "subject": "Reminder: {{appointment_title}}",
        "body": "Hi {{customer_name}}, this is a reminder...",
        "variables": ["customer_name", "appointment_title", "appointment_date", "appointment_time"],
        "is_active": true,
        "category": "reminders",
        "created_at": "2024-06-01T10:00:00+00:00"
    }
]`}
                    />
                  </div>
                </div>

                {/* send_template_email */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: can_use_email_templates</span>
                    <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                      api.send_template_email(template_id, to, variables) → bool
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-1 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">template_id</code> <span className="text-gray-500">— Email template ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">to</code> <span className="text-gray-500">— Recipient email address</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">variables</code> <span className="text-gray-500">— Dict of template variables</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns: True (sent) or False (failed)

api.send_template_email(
    template_id=10,
    to='jane@example.com',
    variables={
        'customer_name': 'Jane',
        'appointment_title': 'Haircut',
        'appointment_date': 'January 20, 2025',
        'appointment_time': '2:00 PM'
    }
)`}
                    />
                  </div>
                </div>

                {/* get_payments */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div className="flex items-center gap-2">
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Payments</h3>
                      <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: payment_processing</span>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_payments(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact payment ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— pending, completed, failed, refunded</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status__in</code> <span className="text-gray-500">— Multiple statuses ['completed', 'pending']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">currency</code> <span className="text-gray-500">— Currency code (USD, EUR, etc.)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_id</code> <span className="text-gray-500">— Filter by customer ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_email__icontains</code> <span className="text-gray-500">— Customer email contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">amount__gte/lte</code> <span className="text-gray-500">— Amount comparisons (decimal)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">amount_cents__gte/lte</code> <span className="text-gray-500">— Amount comparisons (cents)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Date comparisons (ISO format)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">completed_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Completion date comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days_back</code> <span className="text-gray-500">— Limit to last N days</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 8001,
        "amount": 45.00,
        "amount_cents": 4500,
        "currency": "USD",
        "status": "completed",
        "payment_method": "card",
        "card_brand": "visa",
        "card_last4": "4242",
        "customer_id": 5001,
        "customer_email": "jane@example.com",
        "customer_name": "Jane Doe",
        "appointment_id": 1234,
        "service_name": "Haircut",
        "stripe_payment_id": "pi_3abc123",
        "created_at": "2025-01-15T11:05:00+00:00",
        "refunded_amount": 0.00
    }
]`}
                    />
                  </div>
                </div>

                {/* get_invoices */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: payment_processing</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_invoices(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact invoice ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— draft, sent, paid, overdue, canceled</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status__in</code> <span className="text-gray-500">— Multiple statuses ['paid', 'sent']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">currency</code> <span className="text-gray-500">— Currency code (USD, EUR, etc.)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">plan_name__icontains</code> <span className="text-gray-500">— Plan name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">total__gte/lte</code> <span className="text-gray-500">— Total amount comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">total_cents__gte/lte</code> <span className="text-gray-500">— Total comparisons (cents)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Date comparisons (ISO format)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">paid_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Payment date comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">period_start__gte/lte/gt/lt</code> <span className="text-gray-500">— Period start comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">period_end__gte/lte/gt/lt</code> <span className="text-gray-500">— Period end comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">days_back</code> <span className="text-gray-500">— Limit to last N days</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 9001,
        "invoice_number": "INV-2025-0042",
        "status": "paid",
        "subtotal": 90.00,
        "tax": 7.20,
        "total": 97.20,
        "amount_paid": 97.20,
        "amount_due": 0.00,
        "currency": "USD",
        "customer_id": 5001,
        "customer_email": "jane@example.com",
        "customer_name": "Jane Doe",
        "due_date": "2025-01-22",
        "paid_at": "2025-01-20T14:30:00+00:00",
        "line_items": [
            {"description": "Haircut", "quantity": 1, "unit_price": 45.00, "total": 45.00},
            {"description": "Color", "quantity": 1, "unit_price": 45.00, "total": 45.00}
        ],
        "created_at": "2025-01-15T11:00:00+00:00"
    }
]`}
                    />
                  </div>
                </div>

                {/* get_revenue_stats */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: payment_processing</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_revenue_stats(days) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "period_days": 30,
    "total_revenue": 12500.00,
    "total_revenue_cents": 1250000,
    "payment_count": 278,
    "average_payment": 44.96,
    "currency": "USD",
    "refunds": {"count": 3, "total": 135.00},
    "by_day": {
        "2025-01-15": {"count": 12, "amount": 540.00, "amount_cents": 54000},
        "2025-01-14": {"count": 10, "amount": 450.00, "amount_cents": 45000}
    },
    "by_service": {
        "Haircut": {"count": 145, "amount": 6525.00},
        "Color": {"count": 87, "amount": 3915.00}
    },
    "by_payment_method": {
        "card": {"count": 250, "amount": 11250.00},
        "cash": {"count": 28, "amount": 1250.00}
    }
}`}
                    />
                  </div>
                </div>

                {/* get_contracts */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div className="flex items-center gap-2">
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Contracts</h3>
                      <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: can_use_contracts</span>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_contracts(**filters) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Filters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">id</code> <span className="text-gray-500">— Exact contract ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status</code> <span className="text-gray-500">— draft, sent, signed, expired, canceled</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">status__in</code> <span className="text-gray-500">— Multiple statuses ['sent', 'signed']</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_id</code> <span className="text-gray-500">— Filter by customer ID</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">customer_email__icontains</code> <span className="text-gray-500">— Customer email contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">title__icontains</code> <span className="text-gray-500">— Title contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">template_name__icontains</code> <span className="text-gray-500">— Template name contains text</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">expires_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Expiration date comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">sent_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Sent date comparisons</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">created_at__gte/lte/gt/lt</code> <span className="text-gray-500">— Date comparisons (ISO format)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">limit</code> <span className="text-gray-500">— Max results (default 100, max 500)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 601,
        "title": "Service Agreement",
        "status": "signed",
        "customer_id": 5001,
        "customer_email": "jane@example.com",
        "customer_name": "Jane Doe",
        "template_id": 1,
        "template_name": "Standard Service Agreement",
        "created_at": "2025-01-01T10:00:00+00:00",
        "sent_at": "2025-01-01T10:05:00+00:00",
        "signed_at": "2025-01-02T14:30:00+00:00",
        "expires_at": "2026-01-01T00:00:00+00:00",
        "pdf_url": "/contracts/601/pdf/"
    }
]`}
                    />
                  </div>
                </div>

                {/* get_expiring_contracts */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: can_use_contracts</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_expiring_contracts(days) → List[dict]
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Contracts expiring within N days (default 30)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
[
    {
        "id": 601,
        "title": "Service Agreement",
        "status": "signed",
        "customer_id": 5001,
        "customer_email": "jane@example.com",
        "customer_name": "Jane Doe",
        "signed_at": "2024-01-15T14:30:00+00:00",
        "expires_at": "2025-01-15T00:00:00+00:00",
        "days_until_expiry": 3
    }
]`}
                    />
                  </div>
                </div>

                {/* create_video_meeting */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div className="flex items-center gap-2">
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Video</h3>
                      <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: can_add_video_conferencing</span>
                    </div>
                    <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                      api.create_video_meeting(...) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">provider</code> <span className="text-gray-500">— zoom, google_meet, or teams</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">title</code> <span className="text-gray-500">— Meeting title</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">duration</code> <span className="text-gray-500">— Duration in minutes</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">start_time</code> <span className="text-gray-500">— ISO datetime (optional)</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "provider": "zoom",
    "meeting_id": "85678432109",
    "title": "Virtual Consultation",
    "duration": 60,
    "start_time": "2025-01-20T14:00:00+00:00",
    "join_url": "https://zoom.us/j/85678432109?pwd=abc123",
    "host_url": "https://zoom.us/s/85678432109?zak=xyz789",
    "password": "abc123",
    "dial_in": "+1 253 215 8782",
    "created_at": "2025-01-15T09:00:00+00:00"
}`}
                    />
                  </div>
                </div>

                {/* get_analytics */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-start">
                    <div className="flex items-center gap-2">
                      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Analytics</h3>
                      <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: advanced_reporting</span>
                    </div>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_analytics(**filters) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">metrics</code> <span className="text-gray-500">— List: bookings, customers, services, staff, revenue</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns:
{
    "period_days": 30,
    "period_start": "2024-12-16",
    "period_end": "2025-01-15",
    "bookings": {
        "total": 320, "completed": 298, "canceled": 15, "no_show": 7,
        "completion_rate": 93.13, "average_per_day": 10.67
    },
    "customers": {
        "total": 1250, "with_email": 1180, "with_phone": 1100,
        "new_this_period": 45, "returning_this_period": 189
    },
    "services": {
        "total": 15, "active": 12,
        "most_booked": {"name": "Haircut", "count": 145},
        "highest_revenue": {"name": "Color", "revenue": 3915.00}
    },
    "staff": {
        "total": 8, "active": 7,
        "top_performer": {"name": "Sarah Johnson", "appointments": 85}
    },
    "revenue": {
        "total": 14400.00, "average_per_appointment": 45.00, "growth_vs_previous": 12.5
    }
}`}
                    />
                  </div>
                </div>

                {/* get_booking_trends */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3 flex justify-between items-center">
                    <span className="text-xs bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">Requires: advanced_reporting</span>
                    <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                      api.get_booking_trends(days, group_by) → dict
                    </code>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-3">
                      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</span>
                      <div className="mt-1 grid grid-cols-2 gap-2 text-sm">
                        <div><code className="text-purple-600 dark:text-purple-400">days</code> <span className="text-gray-500">— Period in days (default 30)</span></div>
                        <div><code className="text-purple-600 dark:text-purple-400">group_by</code> <span className="text-gray-500">— day, week, hour, or weekday</span></div>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Returns (group_by='weekday'):
{
    "period_days": 30,
    "group_by": "weekday",
    "data": {
        "Monday": {"total": 45, "completed": 42, "canceled": 2, "no_show": 1, "revenue": 2025.00},
        "Tuesday": {"total": 52, "completed": 50, "canceled": 1, "no_show": 1, "revenue": 2340.00},
        "Wednesday": {"total": 48, "completed": 45, "canceled": 2, "no_show": 1, "revenue": 2160.00},
        "Thursday": {"total": 50, "completed": 47, "canceled": 2, "no_show": 1, "revenue": 2250.00},
        "Friday": {"total": 55, "completed": 52, "canceled": 2, "no_show": 1, "revenue": 2475.00},
        "Saturday": {"total": 60, "completed": 55, "canceled": 3, "no_show": 2, "revenue": 2700.00},
        "Sunday": {"total": 10, "completed": 7, "canceled": 3, "no_show": 0, "revenue": 450.00}
    },
    "summary": {"busiest_day": "Saturday", "slowest_day": "Sunday", "peak_hour": 14}
}`}
                    />
                  </div>
                </div>

                {/* Utilities */}
                <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <div className="bg-gray-50 dark:bg-gray-800 px-4 py-3">
                    <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">Utilities</h3>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-4 space-y-2">
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Log message for debugging</span>
                        <code className="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">api.log(message) → None</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Count items in a list</span>
                        <code className="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">api.count(items) → int</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Sum numeric values</span>
                        <code className="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">api.sum(items) → float</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Filter by condition</span>
                        <code className="text-sm bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">api.filter(items, lambda) → list</code>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# Examples:
api.log('Processing started')           # Visible in execution logs
total = api.count(appointments)         # Returns: 25
revenue = api.sum([a['price'] for a in appointments])  # Returns: 1125.00
upcoming = api.filter(appointments, lambda a: a['status'] == 'SCHEDULED')`}
                    />
                  </div>
                </div>

                {/* HTTP Methods */}
                <div className="mb-8 rounded-lg border-2 border-red-200 dark:border-red-800 overflow-hidden">
                  <div className="bg-red-50 dark:bg-red-900/30 px-4 py-3">
                    <div className="flex justify-between items-start">
                      <div>
                        <h3 className="text-base font-semibold text-red-900 dark:text-red-200 m-0 flex items-center gap-2">
                          <AlertCircle className="w-4 h-4" />
                          External HTTP Methods
                        </h3>
                        <p className="text-xs text-red-700 dark:text-red-300 mt-1">All URLs must be whitelisted before use</p>
                      </div>
                    </div>
                  </div>
                  <div className="p-4 bg-white dark:bg-gray-900">
                    <div className="mb-4 space-y-2">
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Fetch data from URL</span>
                        <code className="text-sm bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">api.http_get(url, headers) → str</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Send data to URL</span>
                        <code className="text-sm bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-2 py-1 rounded">api.http_post(url, data, headers) → str</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Update resource</span>
                        <code className="text-sm bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">api.http_put(url, data, headers) → str</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Partial update</span>
                        <code className="text-sm bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">api.http_patch(url, data, headers) → str</code>
                      </div>
                      <div className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-800 rounded">
                        <span className="text-sm text-gray-700 dark:text-gray-300">Delete resource</span>
                        <code className="text-sm bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 px-2 py-1 rounded">api.http_delete(url, headers) → str</code>
                      </div>
                    </div>
                    <CodeBlock
                      language="python"
                      code={`# All methods return response body as string (10 second timeout)

response = api.http_get(
    url='https://api.example.com/data',
    headers={'Authorization': 'Bearer token123'}
)
# Returns: '{"status": "ok", "data": [...]}'

response = api.http_post(
    url='https://hooks.slack.com/webhook',
    data={'text': 'New appointment scheduled!'},
    headers={'Content-Type': 'application/json'}
)
# Returns: 'ok'`}
                    />
                    <div className="mt-4 p-3 bg-red-100 dark:bg-red-900/40 rounded border border-red-300 dark:border-red-700 text-sm">
                      <p className="font-semibold text-red-900 dark:text-red-200">To request URL whitelisting:</p>
                      <p className="text-red-800 dark:text-red-300 mt-1">
                        Email <a href="mailto:pluginaccess@smoothschedule.com" className="underline font-mono">pluginaccess@smoothschedule.com</a> with
                        the URLs, HTTP methods needed, and an exact copy of your code.
                      </p>
                    </div>
                  </div>
                </div>

              </div>
            </section>

            {/* Command Reference */}
            <ApiSection id="command-reference">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Command Reference
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Scripts run in a secure sandbox with a restricted set of Python commands.
                  This prevents malicious code while giving you the power to write useful automations.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Allowed Control Flow & Operators
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  All standard Python control flow statements and operators are supported:
                </p>
                <div className="grid grid-cols-2 gap-2 text-sm font-mono mb-4">
                  <div className="text-green-600 dark:text-green-400">✓ if / elif / else</div>
                  <div className="text-green-600 dark:text-green-400">✓ for loops</div>
                  <div className="text-green-600 dark:text-green-400">✓ while loops</div>
                  <div className="text-green-600 dark:text-green-400">✓ break / continue</div>
                  <div className="text-green-600 dark:text-green-400">✓ try / except / finally</div>
                  <div className="text-green-600 dark:text-green-400">✓ with statements</div>
                  <div className="text-green-600 dark:text-green-400">✓ and / or / not</div>
                  <div className="text-green-600 dark:text-green-400">✓ in / is / ==</div>
                  <div className="text-green-600 dark:text-green-400">✓ +, -, *, /, //, %</div>
                  <div className="text-green-600 dark:text-green-400">✓ &lt;, &gt;, &lt;=, &gt;=, !=</div>
                  <div className="text-green-600 dark:text-green-400">✓ List comprehensions</div>
                  <div className="text-green-600 dark:text-green-400">✓ Dict comprehensions</div>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Allowed Built-in Functions
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  These Python built-in functions are available in your scripts:
                </p>
                <div className="grid grid-cols-2 gap-2 text-sm font-mono">
                  <div className="text-green-600 dark:text-green-400">✓ len()</div>
                  <div className="text-green-600 dark:text-green-400">✓ range()</div>
                  <div className="text-green-600 dark:text-green-400">✓ min()</div>
                  <div className="text-green-600 dark:text-green-400">✓ max()</div>
                  <div className="text-green-600 dark:text-green-400">✓ sum()</div>
                  <div className="text-green-600 dark:text-green-400">✓ abs()</div>
                  <div className="text-green-600 dark:text-green-400">✓ round()</div>
                  <div className="text-green-600 dark:text-green-400">✓ int()</div>
                  <div className="text-green-600 dark:text-green-400">✓ float()</div>
                  <div className="text-green-600 dark:text-green-400">✓ str()</div>
                  <div className="text-green-600 dark:text-green-400">✓ bool()</div>
                  <div className="text-green-600 dark:text-green-400">✓ list()</div>
                  <div className="text-green-600 dark:text-green-400">✓ dict()</div>
                  <div className="text-green-600 dark:text-green-400">✓ enumerate()</div>
                  <div className="text-green-600 dark:text-green-400">✓ zip()</div>
                  <div className="text-green-600 dark:text-green-400">✓ sorted()</div>
                  <div className="text-green-600 dark:text-green-400">✓ reversed()</div>
                  <div className="text-green-600 dark:text-green-400">✓ any()</div>
                  <div className="text-green-600 dark:text-green-400">✓ all()</div>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mt-6">
                  Blocked Operations
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  These operations are disabled for security:
                </p>
                <div className="grid grid-cols-2 gap-2 text-sm font-mono">
                  <div className="text-red-600 dark:text-red-400">✗ import statements</div>
                  <div className="text-red-600 dark:text-red-400">✗ exec()</div>
                  <div className="text-red-600 dark:text-red-400">✗ eval()</div>
                  <div className="text-red-600 dark:text-red-400">✗ compile()</div>
                  <div className="text-red-600 dark:text-red-400">✗ __import__()</div>
                  <div className="text-red-600 dark:text-red-400">✗ class definitions</div>
                  <div className="text-red-600 dark:text-red-400">✗ function definitions</div>
                  <div className="text-red-600 dark:text-red-400">✗ file operations</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>Note:</strong> While you cannot use <code>import</code>,
                    the <code>datetime</code> module is available for use in your scripts
                    via <code>from datetime import datetime, timedelta</code>. This is
                    pre-imported in the execution context.
                  </p>
                </div>
              </ApiContent>
              <ApiExample>
                <div className="space-y-4">
                  <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                    <h3 className="font-semibold text-green-900 dark:text-green-200 mb-2">
                      Allowed: Basic Python Operations
                    </h3>
                    <CodeBlock
                      language="python"
                      code={`# ✓ Variables and data structures
count = 0
my_list = [1, 2, 3]
my_dict = {'key': 'value'}

# ✓ Loops and conditionals
for item in my_list:
    if item > 1:
        count += 1

# ✓ List comprehensions
filtered = [x for x in my_list if x > 1]

# ✓ String operations
message = f"Count: {count}"

# ✓ Math operations
total = sum([1, 2, 3])
avg = total / len(my_list)`}
                    />
                  </div>
                  <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                    <h3 className="font-semibold text-red-900 dark:text-red-200 mb-2">
                      Blocked: Dangerous Operations
                    </h3>
                    <CodeBlock
                      language="python"
                      code={`# ✗ Import statements
import os  # Error!

# ✗ Code execution
eval('1 + 1')  # Error!
exec('print("hi")')  # Error!

# ✗ Function definitions
def my_function():  # Error!
    pass

# ✗ Class definitions
class MyClass:  # Error!
    pass`}
                    />
                  </div>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Schedule Types */}
            <ApiSection id="schedule-types">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Schedule Types
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Choose when and how often your automation runs.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Cron Expression
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Flexible scheduling using cron syntax:
                </p>
                <ul className="text-gray-600 dark:text-gray-300 text-sm">
                  <li><code>0 9 * * 1</code> - Every Monday at 9 AM</li>
                  <li><code>0 0 * * *</code> - Daily at midnight</li>
                  <li><code>0 */2 * * *</code> - Every 2 hours</li>
                </ul>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Fixed Interval
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Run every N minutes: <code>interval_minutes: 60</code>
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  One-Time
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Run once at a specific datetime: <code>run_at: "2025-02-01T10:00:00Z"</code>
                </p>
              </ApiContent>
              <ApiExample>
                <div className="p-6 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-900/20 dark:to-teal-900/20 rounded-lg border border-green-200 dark:border-green-800">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    Common Schedule Examples
                  </h3>
                  <div className="space-y-4 text-sm">
                    <div className="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
                      <div className="font-mono text-purple-600 dark:text-purple-400 mb-1">0 9 * * 1</div>
                      <div className="text-gray-600 dark:text-gray-400">Every Monday at 9:00 AM</div>
                    </div>
                    <div className="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
                      <div className="font-mono text-purple-600 dark:text-purple-400 mb-1">0 0 * * *</div>
                      <div className="text-gray-600 dark:text-gray-400">Every day at midnight</div>
                    </div>
                    <div className="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
                      <div className="font-mono text-purple-600 dark:text-purple-400 mb-1">0 */4 * * *</div>
                      <div className="text-gray-600 dark:text-gray-400">Every 4 hours</div>
                    </div>
                    <div className="p-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700">
                      <div className="font-mono text-purple-600 dark:text-purple-400 mb-1">Interval: 60 minutes</div>
                      <div className="text-gray-600 dark:text-gray-400">Every hour</div>
                    </div>
                  </div>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Manage Tasks */}
            <ApiSection id="manage-tasks">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Manage Tasks
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Create, update, and monitor your scheduled automation tasks through the dashboard.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Dashboard Actions
                </h3>
                <ul className="text-gray-600 dark:text-gray-300 text-sm space-y-2">
                  <li><strong>Create:</strong> Click "New Automation" to create a task</li>
                  <li><strong>Edit:</strong> Click on any task to modify its settings</li>
                  <li><strong>Pause/Resume:</strong> Toggle tasks on/off without deleting</li>
                  <li><strong>Delete:</strong> Remove tasks you no longer need</li>
                  <li><strong>View Logs:</strong> See execution history and results</li>
                  <li><strong>Test Run:</strong> Execute manually to test your script</li>
                </ul>
              </ApiContent>
              <ApiExample>
                <div className="p-6 bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-900/20 dark:to-blue-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    Task Management Tips
                  </h3>
                  <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
                    <li className="flex items-start gap-2">
                      <span className="text-indigo-600 dark:text-indigo-400">•</span>
                      <span>Always test your script with "Run Now" before scheduling</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-indigo-600 dark:text-indigo-400">•</span>
                      <span>Check execution logs regularly to catch errors early</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-indigo-600 dark:text-indigo-400">•</span>
                      <span>Pause tasks during maintenance or high-traffic periods</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-indigo-600 dark:text-indigo-400">•</span>
                      <span>Use descriptive names to identify tasks at a glance</span>
                    </li>
                  </ul>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Real-World Example: Re-engagement */}
            <ApiSection id="example-reengagement">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Example: Win Back Lost Customers
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Automatically identify customers who haven't booked in 60 days and send them
                  a personalized discount code to win them back.
                </p>
                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                    Expected Results
                  </h3>
                  <ul className="text-sm text-gray-700 dark:text-gray-300">
                    <li>• 15-20% of contacted customers return</li>
                    <li>• $3,000-5,000/month in recovered revenue</li>
                    <li>• Runs automatically every Monday</li>
                  </ul>
                </div>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="RE-ENGAGEMENT SCRIPT"
                  language="python"
                  code={reengagementExample}
                />
              </ApiExample>
            </ApiSection>

            {/* Real-World Example: Alerts */}
            <ApiSection id="example-alerts">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Example: Low Booking Alerts
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Get notified when upcoming bookings are unusually low so you can take action
                  before it impacts revenue.
                </p>
                <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                    Use Case
                  </h3>
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    Spa manager gets daily email if next week has less than 10 bookings,
                    prompting them to run a promotion or send reminders to past customers.
                  </p>
                </div>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="BOOKING ALERT SCRIPT"
                  language="python"
                  code={alertExample}
                />
              </ApiExample>
            </ApiSection>

            {/* Example: Weekly Reports */}
            <ApiSection id="example-reports">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Example: Weekly Reports
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Automatically generate and email weekly summary reports with appointment statistics.
                </p>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  What It Does
                </h3>
                <ul className="text-gray-600 dark:text-gray-300 text-sm">
                  <li>Counts appointments by status (scheduled, completed, canceled)</li>
                  <li>Calculates revenue from completed appointments</li>
                  <li>Emails formatted report to manager</li>
                  <li>Runs every Monday at 9 AM</li>
                </ul>
              </ApiContent>
              <ApiExample>
                <CodeBlock
                  title="WEEKLY REPORT SCRIPT"
                  language="python"
                  code={`# Get last 7 days of appointments
from datetime import datetime, timedelta

end = datetime.now().strftime('%Y-%m-%d')
start = (datetime.now() - timedelta(days=7)).strftime('%Y-%m-%d')

appointments = api.get_appointments(
    start_date=start,
    end_date=end
)

# Group by status
stats = {}
for apt in appointments:
    status = apt['status']
    stats[status] = stats.get(status, 0) + 1

# Build report
report = f'''Weekly Report ({start} to {end})

Scheduled: {stats.get('SCHEDULED', 0)}
Completed: {stats.get('COMPLETED', 0)}
Canceled: {stats.get('CANCELED', 0)}

Total: {len(appointments)}'''

# Email it
api.send_email(
    to='manager@business.com',
    subject='Weekly Report',
    body=report
)

result = {'total': len(appointments), 'by_status': stats}`}
                />
              </ApiExample>
            </ApiSection>

            {/* Safety Features */}
            <ApiSection id="safety">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Safety Features
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Multiple layers of protection ensure your data and our servers stay safe.
                </p>
                <AttributeTable
                  attributes={[
                    { name: 'Sandboxed Execution', type: 'security', description: 'Scripts run in isolated environments with no access to system resources' },
                    { name: 'Code Validation', type: 'security', description: 'All scripts validated before execution to prevent dangerous operations' },
                    { name: 'Data Isolation', type: 'security', description: 'Each script only accesses its own business\'s data - complete multi-tenant isolation' },
                    { name: 'No File Access', type: 'security', description: 'Scripts cannot read or write files on the server' },
                    { name: 'No Code Injection', type: 'security', description: 'eval() and exec() are blocked to prevent code injection attacks' },
                  ]}
                />
              </ApiContent>
              <ApiExample>
                <div className="space-y-4">
                  <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                    <h3 className="font-semibold text-red-900 dark:text-red-200 mb-2">
                      Blocked: File System Access
                    </h3>
                    <CodeBlock
                      language="python"
                      code={`# ❌ This will fail
open('/etc/passwd', 'r')  # Error!
import os  # Error!`}
                    />
                  </div>
                  <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                    <h3 className="font-semibold text-red-900 dark:text-red-200 mb-2">
                      Blocked: Code Injection
                    </h3>
                    <CodeBlock
                      language="python"
                      code={`# ❌ This will fail
eval('1 + 1')  # Error!
exec('print("hi")')  # Error!`}
                    />
                  </div>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Plugin Licensing */}
            <ApiSection id="licensing">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Plugin Licensing
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Understand the licensing terms for plugins you create and share on SmoothSchedule.
                </p>

                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Private Plugins
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  Plugins you create for personal use remain <strong>private</strong>. You retain full ownership and control:
                </p>
                <ul className="text-gray-600 dark:text-gray-300 text-sm">
                  <li>Only accessible within your business account</li>
                  <li>Not visible in the public marketplace</li>
                  <li>You choose any license you want (or none)</li>
                  <li>SmoothSchedule can execute your code to provide the service</li>
                </ul>

                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Marketplace Plugins (Public Sharing)
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  When you <strong>publish a plugin to the marketplace</strong>, you agree to the{' '}
                  <span className="font-semibold">SmoothSchedule Community Plugin License</span>:
                </p>

                <div className="bg-purple-50 dark:bg-purple-900/20 border-2 border-purple-200 dark:border-purple-800 rounded-lg p-4 my-4">
                  <h4 className="font-semibold text-purple-900 dark:text-purple-100 mb-2">
                    SmoothSchedule Community Plugin License (SCPL)
                  </h4>
                  <div className="text-sm text-purple-800 dark:text-purple-200 space-y-2">
                    <p>
                      <strong>You grant the following rights:</strong>
                    </p>
                    <ol className="ml-4 space-y-1">
                      <li>
                        <strong>SmoothSchedule Rights:</strong> SmoothSchedule may use, execute, host, and distribute your plugin code
                        to provide the marketplace service
                      </li>
                      <li>
                        <strong>User Rights:</strong> Other SmoothSchedule users may install, use, and modify your plugin
                        for their own business purposes
                      </li>
                      <li>
                        <strong>Attribution:</strong> Your authorship will be credited in the marketplace listing
                      </li>
                      <li>
                        <strong>Modifications:</strong> Users may adapt your code to their needs, but cannot republish
                        modified versions to the marketplace without your permission
                      </li>
                      <li>
                        <strong>Revocation:</strong> You may unpublish your plugin at any time. Existing installations
                        will continue to function, but new installs will be disabled
                      </li>
                    </ol>
                    <p className="mt-3">
                      <strong>You retain:</strong> Copyright ownership, ability to license elsewhere, right to unpublish
                    </p>
                    <p className="mt-2 text-xs italic">
                      Similar to: MIT License + SmoothSchedule Service Rights
                    </p>
                  </div>
                </div>

                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  Code Verification & Security
                </h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  When you upload a plugin (private or marketplace):
                </p>
                <ul className="text-gray-600 dark:text-gray-300 text-sm">
                  <li>Original code is stored for security verification</li>
                  <li>Changing code after URL whitelisting will fail upload</li>
                  <li>SmoothSchedule may review code for security compliance</li>
                  <li>Malicious code will result in account suspension</li>
                </ul>
              </ApiContent>
              <ApiExample>
                <div className="space-y-4">
                  {/* Comparison Table */}
                  <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                    <div className="p-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
                      <h3 className="font-semibold text-gray-900 dark:text-white">
                        Private vs. Marketplace Plugins
                      </h3>
                    </div>
                    <div className="divide-y divide-gray-200 dark:divide-gray-700">
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="font-semibold text-gray-700 dark:text-gray-300">Feature</div>
                        <div className="font-semibold text-gray-700 dark:text-gray-300">Private</div>
                        <div className="font-semibold text-gray-700 dark:text-gray-300">Marketplace</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">Visibility</div>
                        <div className="text-gray-900 dark:text-white">Your business only</div>
                        <div className="text-gray-900 dark:text-white">All users</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">License</div>
                        <div className="text-gray-900 dark:text-white">Any (or none)</div>
                        <div className="text-gray-900 dark:text-white">SCPL (required)</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">Ownership</div>
                        <div className="text-green-600 dark:text-green-400">✓ You retain all rights</div>
                        <div className="text-green-600 dark:text-green-400">✓ You retain copyright</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">Attribution</div>
                        <div className="text-gray-900 dark:text-white">N/A</div>
                        <div className="text-green-600 dark:text-green-400">✓ Required</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">Can Unpublish</div>
                        <div className="text-green-600 dark:text-green-400">✓ Delete anytime</div>
                        <div className="text-green-600 dark:text-green-400">✓ Hide from marketplace</div>
                      </div>
                      <div className="grid grid-cols-3 gap-4 p-3 text-xs">
                        <div className="text-gray-600 dark:text-gray-400">SmoothSchedule Use</div>
                        <div className="text-green-600 dark:text-green-400">✓ Execute only</div>
                        <div className="text-green-600 dark:text-green-400">✓ Execute + Distribute</div>
                      </div>
                    </div>
                  </div>

                  {/* Important Notice */}
                  <div className="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <h3 className="flex items-center gap-2 font-semibold text-blue-900 dark:text-blue-100 mb-2">
                      <AlertCircle size={18} />
                      Important to Know
                    </h3>
                    <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-2">
                      <li>
                        <strong>SmoothSchedule Service Rights:</strong> By uploading any plugin, you grant SmoothSchedule
                        the right to execute your code to provide the automation service
                      </li>
                      <li>
                        <strong>No Warranty:</strong> Plugins are provided "as-is" without warranty. Test thoroughly
                        before deploying to production
                      </li>
                      <li>
                        <strong>Compliance:</strong> You are responsible for ensuring your plugin complies with all
                        applicable laws and regulations
                      </li>
                      <li>
                        <strong>Data Privacy:</strong> Handle customer data responsibly and in compliance with GDPR,
                        CCPA, and other privacy laws
                      </li>
                    </ul>
                  </div>

                  {/* Quick Decision Guide */}
                  <div className="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                    <h3 className="font-semibold text-gray-900 dark:text-white mb-3 text-sm">
                      Should I Publish to Marketplace?
                    </h3>
                    <div className="space-y-3 text-xs">
                      <div>
                        <div className="font-semibold text-green-700 dark:text-green-400 mb-1">✓ Publish if:</div>
                        <ul className="ml-4 space-y-1 text-gray-600 dark:text-gray-400">
                          <li>You want to help the community</li>
                          <li>Your plugin solves a common problem</li>
                          <li>You're comfortable with the SCPL terms</li>
                          <li>You want recognition as the author</li>
                        </ul>
                      </div>
                      <div>
                        <div className="font-semibold text-red-700 dark:text-red-400 mb-1">✗ Keep Private if:</div>
                        <ul className="ml-4 space-y-1 text-gray-600 dark:text-gray-400">
                          <li>Contains business-specific logic</li>
                          <li>Uses proprietary algorithms</li>
                          <li>Integrates with private internal systems</li>
                          <li>You want to restrict access</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Resource Limits */}
            <ApiSection id="limits">
              <ApiContent>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-0">
                  Resource Limits
                </h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Automatic limits prevent resource abuse and keep the platform fast for everyone.
                </p>
                <AttributeTable
                  attributes={[
                    { name: 'Execution Time', type: '30 seconds', description: 'Maximum execution time per run' },
                    { name: 'API Calls', type: '50 calls', description: 'Maximum API calls per execution' },
                    { name: 'Loop Iterations', type: '10,000', description: 'Prevents infinite loops' },
                    { name: 'Memory', type: '50 MB', description: 'Maximum memory usage' },
                  ]}
                />
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  What Happens When Limits Are Hit?
                </h3>
                <ol className="text-gray-600 dark:text-gray-300 text-sm">
                  <li>Script stops gracefully with clear error message</li>
                  <li>Execution logged with failure status</li>
                  <li>You receive notification in your dashboard</li>
                  <li>Task will retry on next scheduled run</li>
                </ol>
              </ApiContent>
              <ApiExample>
                <div className="p-6 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                    Optimization Tips
                  </h3>
                  <ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
                    <li className="flex items-start gap-2">
                      <span className="text-orange-600 dark:text-orange-400">•</span>
                      <span>Use filters to reduce data fetched (limit, status, dates)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-orange-600 dark:text-orange-400">•</span>
                      <span>Avoid nested loops where possible</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-orange-600 dark:text-orange-400">•</span>
                      <span>Cache API results in variables instead of repeated calls</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-orange-600 dark:text-orange-400">•</span>
                      <span>Break large tasks into smaller scheduled tasks</span>
                    </li>
                  </ul>
                </div>
              </ApiExample>
            </ApiSection>

            {/* Footer padding */}
            <div className="h-24" />
          </main>
        </div>
      </div>
  );
};

export default HelpPluginDocs;
