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

<Layout title="Support - Black Canyon Tickets">
  <SimpleHeader />
  <main class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <div class="bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 text-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
        <h1 class="text-4xl font-bold mb-4">
          How can we help you?
        </h1>
        <p class="text-xl text-blue-100 mb-8">
          Find answers, get support, and learn how to make the most of Black Canyon Tickets
        </p>
        
        <!-- Enhanced Search -->
        <div class="max-w-lg mx-auto">
          <div class="relative">
            <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
            <input 
              type="text" 
              id="help-search"
              placeholder="Search help articles, guides, and FAQs..." 
              class="w-full pl-12 pr-4 py-4 text-gray-900 bg-white border-0 rounded-xl shadow-lg focus:ring-4 focus:ring-blue-300 focus:outline-none text-lg"
            />
          </div>
          <p class="text-sm text-blue-200 mt-3">
            Try searching: "create event", "scan tickets", "payments", "refunds"
          </p>
        </div>
      </div>
    </div>

    <!-- Quick Help Cards -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10">
      <div class="grid md:grid-cols-3 gap-6 mb-16">
        <!-- Get Started -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 text-center transform hover:scale-105 transition-all duration-200">
          <div class="w-16 h-16 bg-gradient-to-r from-green-400 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 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-xl font-bold text-gray-900 mb-3">New to the Platform?</h3>
          <p class="text-gray-600 mb-6 text-sm leading-relaxed">Start here for account setup, first event creation, and basic tutorials.</p>
          <a href="/docs" class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
            Getting Started Guide
            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>

        <!-- Contact Support -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 text-center transform hover:scale-105 transition-all duration-200">
          <div class="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-900 mb-3">Need Personal Help?</h3>
          <p class="text-gray-600 mb-6 text-sm leading-relaxed">Get direct support from our team. We typically respond within 24 hours.</p>
          <a href="mailto:support@blackcanyontickets.com" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
            Email Support
            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>

        <!-- Browse Knowledge Base -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 text-center transform hover:scale-105 transition-all duration-200">
          <div class="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-900 mb-3">Browse All Guides</h3>
          <p class="text-gray-600 mb-6 text-sm leading-relaxed">Comprehensive documentation covering every feature and use case.</p>
          <a href="#documentation" class="inline-flex items-center px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium">
            View Documentation
            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Popular Topics -->
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-gray-900 mb-4">Popular Help Topics</h2>
        <p class="text-lg text-gray-600">Quick access to the most commonly searched topics</p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Topic Card 1 -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-shadow">
          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-5 h-5 text-blue-600" 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="font-semibold text-gray-900 mb-2">Creating Events</h3>
          <p class="text-sm text-gray-600 mb-4">Learn how to set up your first event, add ticket types, and configure settings.</p>
          <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Learn more →</a>
        </div>

        <!-- Topic Card 2 -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-shadow">
          <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-5 h-5 text-green-600" 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="font-semibold text-gray-900 mb-2">QR Code Scanning</h3>
          <p class="text-sm text-gray-600 mb-4">Set up mobile scanning for door staff and handle check-ins efficiently.</p>
          <a href="#" class="text-green-600 hover:text-green-800 text-sm font-medium">Learn more →</a>
        </div>

        <!-- Topic Card 3 -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-shadow">
          <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-5 h-5 text-yellow-600" 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="font-semibold text-gray-900 mb-2">Payments & Payouts</h3>
          <p class="text-sm text-gray-600 mb-4">Understand fee structures, Stripe setup, and when you receive payments.</p>
          <a href="#" class="text-yellow-600 hover:text-yellow-800 text-sm font-medium">Learn more →</a>
        </div>

        <!-- Topic Card 4 -->
        <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg transition-shadow">
          <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-5 h-5 text-red-600" 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="font-semibold text-gray-900 mb-2">Troubleshooting</h3>
          <p class="text-sm text-gray-600 mb-4">Fix common issues with events, payments, scanning, and technical problems.</p>
          <a href="#" class="text-red-600 hover:text-red-800 text-sm font-medium">Learn more →</a>
        </div>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
      <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="bg-gradient-to-r from-gray-800 to-gray-900 px-8 py-8">
          <h2 class="text-3xl font-bold text-white mb-2">Frequently Asked Questions</h2>
          <p class="text-gray-300">Quick answers to the most common questions</p>
        </div>
        
        <div class="p-8">
          <div class="space-y-1">
            <!-- FAQ Item 1 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <button class="w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 hover:bg-gray-100 transition-colors" data-faq-toggle>
                <div class="flex items-center justify-between">
                  <h3 class="text-lg font-semibold text-gray-900">How do I create my first event?</h3>
                  <svg class="w-5 h-5 text-gray-400 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
              </button>
              <div class="hidden px-6 pb-4 bg-white">
                <div class="pt-2 text-gray-600">
                  <ol class="list-decimal list-inside space-y-2">
                    <li>Complete your account setup and verify your email</li>
                    <li>Connect your Stripe account for payment processing</li>
                    <li>Click "Create Event" in your dashboard</li>
                    <li>Fill in event details, date, time, and venue information</li>
                    <li>Set up ticket types with pricing</li>
                    <li>Upload cover image and additional photos</li>
                    <li>Preview your event and test the checkout process</li>
                    <li>Publish and start promoting your event</li>
                  </ol>
                </div>
              </div>
            </div>

            <!-- FAQ Item 2 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <button class="w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 hover:bg-gray-100 transition-colors" data-faq-toggle>
                <div class="flex items-center justify-between">
                  <h3 class="text-lg font-semibold text-gray-900">What are the platform fees?</h3>
                  <svg class="w-5 h-5 text-gray-400 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
              </button>
              <div class="hidden px-6 pb-4 bg-white">
                <div class="pt-2 text-gray-600">
                  <p class="mb-3">Our transparent fee structure is <strong>2.5% + $1.50 per ticket</strong>. This includes:</p>
                  <ul class="list-disc list-inside space-y-1 mb-3">
                    <li>Payment processing through Stripe</li>
                    <li>QR code generation and scanning</li>
                    <li>Event hosting and management tools</li>
                    <li>Customer support</li>
                    <li>Real-time analytics and reporting</li>
                  </ul>
                  <p>Fees are automatically deducted before funds are transferred to your account.</p>
                </div>
              </div>
            </div>

            <!-- FAQ Item 3 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <button class="w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 hover:bg-gray-100 transition-colors" data-faq-toggle>
                <div class="flex items-center justify-between">
                  <h3 class="text-lg font-semibold text-gray-900">How does QR code scanning work?</h3>
                  <svg class="w-5 h-5 text-gray-400 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
              </button>
              <div class="hidden px-6 pb-4 bg-white">
                <div class="pt-2 text-gray-600">
                  <p class="mb-3">Our QR scanning system is designed for simplicity:</p>
                  <ul class="list-disc list-inside space-y-1 mb-3">
                    <li><strong>No app required</strong> - works in any web browser</li>
                    <li><strong>Access</strong> the scanner at <code class="bg-gray-100 px-2 py-1 rounded">/scan</code></li>
                    <li><strong>Mobile-friendly</strong> - works on smartphones and tablets</li>
                    <li><strong>Real-time validation</strong> - instantly checks ticket authenticity</li>
                    <li><strong>Offline capability</strong> - continues working with poor connectivity</li>
                    <li><strong>Check-in tracking</strong> - prevents duplicate entries</li>
                  </ul>
                  <p>Train your door staff in minutes, not hours.</p>
                </div>
              </div>
            </div>

            <!-- FAQ Item 4 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <button class="w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 hover:bg-gray-100 transition-colors" data-faq-toggle>
                <div class="flex items-center justify-between">
                  <h3 class="text-lg font-semibold text-gray-900">When do I receive payment for ticket sales?</h3>
                  <svg class="w-5 h-5 text-gray-400 transform transition-transform" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                  </svg>
                </div>
              </button>
              <div class="hidden px-6 pb-4 bg-white">
                <div class="pt-2 text-gray-600">
                  <p class="mb-3">Payments are processed automatically through Stripe Connect:</p>
                  <ul class="list-disc list-inside space-y-1 mb-3">
                    <li><strong>Automatic processing</strong> - funds transfer without manual intervention</li>
                    <li><strong>Platform fees deducted</strong> - you receive the net amount</li>
                    <li><strong>Payout schedule</strong> - typically 2-7 business days (set by Stripe)</li>
                    <li><strong>Direct deposit</strong> - funds go straight to your connected bank account</li>
                    <li><strong>Real-time tracking</strong> - view pending and completed payouts in your dashboard</li>
                  </ul>
                  <p>You can view detailed payout information in your Stripe dashboard.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Documentation Section -->
    <div class="bg-white py-16" id="documentation">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">Complete Documentation</h2>
          <p class="text-xl text-gray-600">Everything you need to master Black Canyon Tickets</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Getting Started -->
          <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-8 border border-green-200">
            <div class="w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">Getting Started</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-green-600 mr-2">•</span>
                Account setup and verification
              </li>
              <li class="flex items-start">
                <span class="text-green-600 mr-2">•</span>
                Connecting your Stripe account
              </li>
              <li class="flex items-start">
                <span class="text-green-600 mr-2">•</span>
                Creating your first event
              </li>
              <li class="flex items-start">
                <span class="text-green-600 mr-2">•</span>
                Platform overview and basics
              </li>
            </ul>
            <a href="/docs/getting-started" class="inline-flex items-center text-green-600 hover:text-green-800 font-semibold">
              View Getting Started Guide
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>

          <!-- Event Management -->
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 border border-blue-200">
            <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">Event Management</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-blue-600 mr-2">•</span>
                Creating and configuring events
              </li>
              <li class="flex items-start">
                <span class="text-blue-600 mr-2">•</span>
                Setting up ticket types and pricing
              </li>
              <li class="flex items-start">
                <span class="text-blue-600 mr-2">•</span>
                Managing seating and capacity
              </li>
              <li class="flex items-start">
                <span class="text-blue-600 mr-2">•</span>
                Publishing and promotion
              </li>
            </ul>
            <a href="/docs/events" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-semibold">
              View Event Guides
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>

          <!-- Ticket Scanning -->
          <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-8 border border-purple-200">
            <div class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">QR Code Scanning</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-purple-600 mr-2">•</span>
                Setting up mobile scanning
              </li>
              <li class="flex items-start">
                <span class="text-purple-600 mr-2">•</span>
                Training door staff
              </li>
              <li class="flex items-start">
                <span class="text-purple-600 mr-2">•</span>
                Handling check-in issues
              </li>
              <li class="flex items-start">
                <span class="text-purple-600 mr-2">•</span>
                Offline scanning capabilities
              </li>
            </ul>
            <a href="/docs/scanning" class="inline-flex items-center text-purple-600 hover:text-purple-800 font-semibold">
              View Scanning Guide
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>

          <!-- Payments -->
          <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-2xl p-8 border border-yellow-200">
            <div class="w-12 h-12 bg-yellow-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">Payments & Payouts</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-yellow-600 mr-2">•</span>
                Stripe Connect setup
              </li>
              <li class="flex items-start">
                <span class="text-yellow-600 mr-2">•</span>
                Understanding platform fees
              </li>
              <li class="flex items-start">
                <span class="text-yellow-600 mr-2">•</span>
                Payout schedules and tracking
              </li>
              <li class="flex items-start">
                <span class="text-yellow-600 mr-2">•</span>
                Processing refunds
              </li>
            </ul>
            <a href="/docs/payments" class="inline-flex items-center text-yellow-600 hover:text-yellow-800 font-semibold">
              View Payment Guide
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>

          <!-- API Documentation -->
          <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-8 border border-indigo-200">
            <div class="w-12 h-12 bg-indigo-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">API Documentation</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-indigo-600 mr-2">•</span>
                REST API endpoints
              </li>
              <li class="flex items-start">
                <span class="text-indigo-600 mr-2">•</span>
                Authentication and security
              </li>
              <li class="flex items-start">
                <span class="text-indigo-600 mr-2">•</span>
                Webhook integrations
              </li>
              <li class="flex items-start">
                <span class="text-indigo-600 mr-2">•</span>
                Code examples and SDKs
              </li>
            </ul>
            <a href="/docs/api" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-semibold">
              View API Docs
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>

          <!-- Troubleshooting -->
          <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-2xl p-8 border border-red-200">
            <div class="w-12 h-12 bg-red-600 rounded-xl flex items-center justify-center mb-6">
              <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-xl font-bold text-gray-900 mb-4">Troubleshooting</h3>
            <ul class="space-y-3 text-gray-700 mb-6">
              <li class="flex items-start">
                <span class="text-red-600 mr-2">•</span>
                Common issues and solutions
              </li>
              <li class="flex items-start">
                <span class="text-red-600 mr-2">•</span>
                Payment processing problems
              </li>
              <li class="flex items-start">
                <span class="text-red-600 mr-2">•</span>
                Scanning and check-in issues
              </li>
              <li class="flex items-start">
                <span class="text-red-600 mr-2">•</span>
                Error codes and meanings
              </li>
            </ul>
            <a href="/docs/troubleshooting" class="inline-flex items-center text-red-600 hover:text-red-800 font-semibold">
              View Troubleshooting
              <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Contact Section -->
    <div class="bg-gradient-to-br from-gray-900 via-blue-900 to-indigo-900 py-16">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-white mb-4">Still Need Help?</h2>
        <p class="text-xl text-blue-100 mb-8">Our support team is here to help you succeed</p>
        
        <div class="grid md:grid-cols-2 gap-8 mb-8">
          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
            <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mx-auto mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">Email Support</h3>
            <p class="text-blue-100 mb-4">Get detailed help from our team</p>
            <a href="mailto:support@blackcanyontickets.com" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
              Send Email
            </a>
          </div>
          
          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
            <div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center mx-auto mb-4">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">Live Chat</h3>
            <p class="text-blue-100 mb-4">Instant help when you need it</p>
            <button class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
              Start Chat
            </button>
          </div>
        </div>
        
        <p class="text-blue-200">
          <strong>Response Time:</strong> We typically respond within 24 hours during business days
        </p>
      </div>
    </div>
  </main>

  <!-- AI Chat Widget -->
  <ChatWidget client:load />

  <script>
    // FAQ Toggle Functionality
    function toggleFaq(button) {
      const content = button.nextElementSibling;
      const arrow = button.querySelector('svg');
      
      if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        arrow.style.transform = 'rotate(180deg)';
      } else {
        content.classList.add('hidden');
        arrow.style.transform = 'rotate(0deg)';
      }
    }

    // Initialize FAQ functionality when DOM loads
    document.addEventListener('DOMContentLoaded', function() {
      const faqButtons = document.querySelectorAll('[data-faq-toggle]');
      faqButtons.forEach(button => {
        button.addEventListener('click', function() {
          toggleFaq(this);
        });
      });

      // Search functionality
      const searchInput = document.querySelector('#help-search');
      if (searchInput) {
        searchInput.addEventListener('input', function(e) {
          const searchTerm = e.target.value.toLowerCase();
          // TODO: Implement search functionality
          console.log('Searching for:', searchTerm);
        });
      }
    });
  </script>
</Layout>