---
import Layout from '../../layouts/Layout.astro';
import SimpleHeader from '../../components/SimpleHeader.astro';
---

<Layout title="Documentation - Black Canyon Tickets">
  <SimpleHeader />
  <main class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <div class="bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800 text-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <h1 class="text-5xl font-bold mb-6">
          Documentation
        </h1>
        <p class="text-xl text-blue-100 mb-8">
          Complete guides to master every feature of Black Canyon Tickets
        </p>
      </div>
    </div>

    <!-- Documentation Grid -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-10 pb-20">
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        
        <!-- Getting Started -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-green-500 to-green-600 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="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" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">Getting Started</h3>
            <p class="text-green-100 mt-2">Set up your account and create your first event</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-green-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/getting-started/account-setup" class="font-medium text-gray-900 hover:text-green-600">Account Setup</a>
                  <p class="text-sm text-gray-600">Create and verify your organizer account</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-green-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/getting-started/stripe-connect" class="font-medium text-gray-900 hover:text-green-600">Stripe Connect</a>
                  <p class="text-sm text-gray-600">Enable payment processing</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-green-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/getting-started/first-event" class="font-medium text-gray-900 hover:text-green-600">First Event</a>
                  <p class="text-sm text-gray-600">Step-by-step event creation guide</p>
                </div>
              </li>
            </ul>
            <a href="/docs/getting-started/introduction" class="inline-flex items-center text-green-600 hover:text-green-800 font-semibold">
              Start Here →
            </a>
          </div>
        </div>

        <!-- Event Management -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">Event Management</h3>
            <p class="text-blue-100 mt-2">Create, customize, and manage your events</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-blue-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/events/creating-events" class="font-medium text-gray-900 hover:text-blue-600">Creating Events</a>
                  <p class="text-sm text-gray-600">Comprehensive event creation guide</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-blue-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/events/ticket-types" class="font-medium text-gray-900 hover:text-blue-600">Ticket Types</a>
                  <p class="text-sm text-gray-600">Configure pricing and ticket options</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-blue-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/events/seating" class="font-medium text-gray-900 hover:text-blue-600">Seating Management</a>
                  <p class="text-sm text-gray-600">Set up seating charts and assignments</p>
                </div>
              </li>
            </ul>
            <a href="/docs/events/creating-events" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-semibold">
              Learn More →
            </a>
          </div>
        </div>

        <!-- QR Scanning -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 2V5h1v1H5zM3 13a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm2 2v-1h1v1H5zM13 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1V4zm2 2V5h1v1h-1z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">QR Code Scanning</h3>
            <p class="text-purple-100 mt-2">Mobile ticket scanning and check-in</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-purple-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/scanning/setup" class="font-medium text-gray-900 hover:text-purple-600">Scanner Setup</a>
                  <p class="text-sm text-gray-600">Configure mobile scanning for your events</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-purple-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/scanning/training" class="font-medium text-gray-900 hover:text-purple-600">Staff Training</a>
                  <p class="text-sm text-gray-600">Train your door staff quickly</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-purple-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/scanning/troubleshooting" class="font-medium text-gray-900 hover:text-purple-600">Troubleshooting</a>
                  <p class="text-sm text-gray-600">Fix common scanning issues</p>
                </div>
              </li>
            </ul>
            <a href="/docs/scanning/setup" class="inline-flex items-center text-purple-600 hover:text-purple-800 font-semibold">
              Get Started →
            </a>
          </div>
        </div>

        <!-- Payments -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-500 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">Payments & Payouts</h3>
            <p class="text-yellow-100 mt-2">Stripe integration and financial management</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-orange-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/payments/stripe-setup" class="font-medium text-gray-900 hover:text-orange-600">Stripe Setup</a>
                  <p class="text-sm text-gray-600">Connect your Stripe account</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-orange-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/payments/fees" class="font-medium text-gray-900 hover:text-orange-600">Platform Fees</a>
                  <p class="text-sm text-gray-600">Understand our pricing structure</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-orange-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/payments/payouts" class="font-medium text-gray-900 hover:text-orange-600">Payouts</a>
                  <p class="text-sm text-gray-600">When and how you get paid</p>
                </div>
              </li>
            </ul>
            <a href="/docs/payments/stripe-setup" class="inline-flex items-center text-orange-600 hover:text-orange-800 font-semibold">
              Learn More →
            </a>
          </div>
        </div>

        <!-- API Documentation -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">API Documentation</h3>
            <p class="text-indigo-100 mt-2">Integrate with your existing systems</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-indigo-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/api/overview" class="font-medium text-gray-900 hover:text-indigo-600">API Overview</a>
                  <p class="text-sm text-gray-600">Getting started with our API</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-indigo-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/api/authentication" class="font-medium text-gray-900 hover:text-indigo-600">Authentication</a>
                  <p class="text-sm text-gray-600">API keys and security</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-indigo-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/api/webhooks" class="font-medium text-gray-900 hover:text-indigo-600">Webhooks</a>
                  <p class="text-sm text-gray-600">Real-time event notifications</p>
                </div>
              </li>
            </ul>
            <a href="/docs/api/overview" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-semibold">
              API Reference →
            </a>
          </div>
        </div>

        <!-- Troubleshooting -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-all duration-300">
          <div class="bg-gradient-to-r from-red-500 to-red-600 p-6">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-2xl font-bold text-white">Troubleshooting</h3>
            <p class="text-red-100 mt-2">Fix common issues and problems</p>
          </div>
          <div class="p-6">
            <ul class="space-y-3 mb-6">
              <li class="flex items-start">
                <span class="text-red-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/troubleshooting/common-issues" class="font-medium text-gray-900 hover:text-red-600">Common Issues</a>
                  <p class="text-sm text-gray-600">Most frequently encountered problems</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-red-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/troubleshooting/payment-issues" class="font-medium text-gray-900 hover:text-red-600">Payment Issues</a>
                  <p class="text-sm text-gray-600">Stripe and checkout problems</p>
                </div>
              </li>
              <li class="flex items-start">
                <span class="text-red-600 mr-3 text-lg">•</span>
                <div>
                  <a href="/docs/troubleshooting/scanning-issues" class="font-medium text-gray-900 hover:text-red-600">Scanning Issues</a>
                  <p class="text-sm text-gray-600">QR code and check-in problems</p>
                </div>
              </li>
            </ul>
            <a href="/docs/troubleshooting/common-issues" class="inline-flex items-center text-red-600 hover:text-red-800 font-semibold">
              Get Help →
            </a>
          </div>
        </div>

      </div>

      <!-- Quick Links -->
      <div class="mt-16 text-center">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Quick Links</h2>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="/support" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
            ← Back to Support
          </a>
          <a href="mailto:support@blackcanyontickets.com" class="inline-flex items-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium">
            Email Support
          </a>
          <a href="/" class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
            Back to Dashboard
          </a>
        </div>
      </div>
    </div>
  </main>
</Layout>