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

<Layout title="Account Setup - Black Canyon Tickets Documentation">
  <SimpleHeader />
  <main class="min-h-screen bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      
      <!-- Breadcrumb -->
      <nav class="mb-8">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
          <li><a href="/docs" class="hover:text-blue-600">Documentation</a></li>
          <li>•</li>
          <li><a href="/docs/getting-started" class="hover:text-blue-600">Getting Started</a></li>
          <li>•</li>
          <li class="text-gray-900">Account Setup</li>
        </ol>
      </nav>

      <!-- Article Header -->
      <div class="mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          Account Setup
        </h1>
        <p class="text-xl text-gray-600 leading-relaxed">
          Setting up your Black Canyon Tickets organizer account is the first step to selling tickets for your events. This guide will walk you through the complete setup process.
        </p>
      </div>

      <!-- Content -->
      <div class="prose prose-lg max-w-none">
        
        <h2>Creating Your Account</h2>

        <div class="bg-blue-50 border-l-4 border-blue-400 p-6 my-6">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-blue-700">
                <strong>Before you start:</strong> Have your business information, bank details, and identification ready for the quickest setup experience.
              </p>
            </div>
          </div>
        </div>

        <h3>Step 1: Visit the Platform</h3>
        <ol>
          <li>Go to <a href="https://portal.blackcanyontickets.com" class="text-blue-600 hover:text-blue-800">portal.blackcanyontickets.com</a></li>
          <li>Click the <strong>"Sign Up"</strong> button in the top right corner</li>
        </ol>

        <div class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center my-6">
          <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <p class="mt-2 text-sm text-gray-500">Screenshot: Homepage with Sign Up button highlighted</p>
        </div>

        <h3>Step 2: Registration Details</h3>
        <ol>
          <li>Enter your <strong>email address</strong> (this will be your login)</li>
          <li>Create a <strong>secure password</strong> (minimum 8 characters)</li>
          <li>Confirm your password</li>
          <li>Click <strong>"Create Account"</strong></li>
        </ol>

        <div class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center my-6">
          <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <p class="mt-2 text-sm text-gray-500">Screenshot: Registration form with email and password fields</p>
        </div>

        <h3>Step 3: Email Verification</h3>
        <ol>
          <li>Check your email inbox for a verification message</li>
          <li>Click the verification link in the email</li>
          <li>Return to the platform and log in with your new credentials</li>
        </ol>

        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-6">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-yellow-700">
                <strong>Check your spam folder</strong> if you don't see the verification email within 5 minutes.
              </p>
            </div>
          </div>
        </div>

        <h2>Completing Your Organizer Profile</h2>

        <h3>Organization Information</h3>
        <p>Your organization information helps customers identify your events and builds trust:</p>

        <div class="bg-white border border-gray-200 rounded-lg p-6 my-6">
          <h4 class="font-semibold text-gray-900 mb-4">Required Fields:</h4>
          <ul class="space-y-2">
            <li><strong>Organization Name</strong>: The name that will appear on tickets and event pages</li>
            <li><strong>Display Name</strong>: How you want to be identified publicly</li>
            <li><strong>Contact Email</strong>: Primary email for customer inquiries</li>
            <li><strong>Phone Number</strong>: Optional, but recommended for customer service</li>
          </ul>
        </div>

        <div class="bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center my-6">
          <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <p class="mt-2 text-sm text-gray-500">Screenshot: Organization setup form with all required fields</p>
        </div>

        <h3>Venue Details</h3>
        <p>If you have a regular venue, providing these details helps with event creation:</p>

        <ul>
          <li><strong>Venue Name</strong>: Primary location for your events</li>
          <li><strong>Address</strong>: Full street address including city, state, and ZIP</li>
          <li><strong>Capacity</strong>: Typical maximum attendance</li>
          <li><strong>Accessibility</strong>: Any accessibility features or accommodations</li>
        </ul>

        <h3>Branding (Optional)</h3>
        <p>Customize your presence to match your brand:</p>

        <ul>
          <li><strong>Logo</strong>: Upload your organization or venue logo (recommended: 300x100px PNG)</li>
          <li><strong>Brand Colors</strong>: Choose colors that match your brand</li>
          <li><strong>Description</strong>: Brief description of your organization or venue</li>
        </ul>

        <h2>Account Verification</h2>

        <h3>Email Verification</h3>
        <ul>
          <li>Check your email for a verification link</li>
          <li>Click the link to confirm your email address</li>
          <li>This enables all account features</li>
        </ul>

        <h3>Identity Verification</h3>
        <p>For payment processing, you'll need to verify your identity:</p>
        <ul>
          <li>This happens during Stripe Connect setup</li>
          <li>Required for receiving payments from ticket sales</li>
          <li>Typically takes 1-2 business days</li>
        </ul>

        <div class="bg-green-50 border-l-4 border-green-400 p-6 my-6">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                <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>
            <div class="ml-3">
              <p class="text-sm text-green-700">
                <strong>Next Step:</strong> Once your account is set up, proceed to <a href="/docs/getting-started/stripe-connect" class="text-green-600 hover:text-green-800 underline">Stripe Connect setup</a> to enable payment processing.
              </p>
            </div>
          </div>
        </div>

        <h2>Security Best Practices</h2>

        <h3>Password Security</h3>
        <ul>
          <li>Use a strong, unique password</li>
          <li>Enable two-factor authentication if available</li>
          <li>Never share your login credentials</li>
        </ul>

        <h3>Account Safety</h3>
        <ul>
          <li>Log out when using shared computers</li>
          <li>Monitor your account for unusual activity</li>
          <li>Keep your contact information up to date</li>
        </ul>

        <h2>Troubleshooting</h2>

        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden my-6">
          <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">Common Issues & Solutions</h3>
          </div>
          <div class="px-6 py-4 space-y-4">
            <div>
              <h4 class="font-medium text-gray-900">Can't Access Your Account?</h4>
              <ul class="mt-2 text-sm text-gray-600 space-y-1">
                <li>• Use the "Forgot Password" link to reset your password</li>
                <li>• Check your spam folder for verification emails</li>
                <li>• Contact support if you continue having issues</li>
              </ul>
            </div>
            <div>
              <h4 class="font-medium text-gray-900">Email Not Verified?</h4>
              <ul class="mt-2 text-sm text-gray-600 space-y-1">
                <li>• Check your spam or junk folder</li>
                <li>• Request a new verification email from your account settings</li>
                <li>• Ensure your email address is correctly entered</li>
              </ul>
            </div>
          </div>
        </div>

        <h2>Support</h2>
        
        <p>Need help with account setup?</p>
        
        <ul>
          <li><strong>Email</strong>: <a href="mailto:support@blackcanyontickets.com">support@blackcanyontickets.com</a></li>
          <li><strong>Response Time</strong>: Typically within 24 hours</li>
          <li><strong>Include</strong>: Your registered email address and description of the issue</li>
        </ul>

      </div>

      <!-- Navigation -->
      <div class="mt-16 pt-8 border-t border-gray-200">
        <div class="flex justify-between">
          <a href="/docs/getting-started/introduction" class="inline-flex items-center text-blue-600 hover:text-blue-800">
            ← Introduction
          </a>
          <a href="/docs/getting-started/stripe-connect" class="inline-flex items-center text-blue-600 hover:text-blue-800">
            Stripe Connect Setup →
          </a>
        </div>
      </div>

    </div>
  </main>
</Layout>

<style>
  .prose h2 {
    @apply text-2xl font-bold text-gray-900 mt-8 mb-4;
  }
  .prose h3 {
    @apply text-xl font-semibold text-gray-900 mt-6 mb-3;
  }
  .prose h4 {
    @apply text-lg font-medium text-gray-900 mt-4 mb-2;
  }
  .prose p {
    @apply text-gray-700 mb-4 leading-relaxed;
  }
  .prose ul {
    @apply list-disc list-inside text-gray-700 mb-4 space-y-2;
  }
  .prose ol {
    @apply list-decimal list-inside text-gray-700 mb-4 space-y-2;
  }
  .prose li {
    @apply leading-relaxed;
  }
  .prose a {
    @apply text-blue-600 hover:text-blue-800;
  }
</style>