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

<Layout title="Apply to be a Territory Manager - Black Canyon Tickets">
  <div class="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900">
    <!-- Hero Section -->
    <div class="relative overflow-hidden">
      <div class="absolute inset-0 bg-black/20"></div>
      <div class="relative container mx-auto px-4 py-24">
        <div class="text-center max-w-4xl mx-auto">
          <h1 class="text-5xl md:text-6xl font-bold text-white mb-6 animate-fade-in">
            Get Paid to Help Events in Your Community
          </h1>
          <p class="text-xl md:text-2xl text-blue-100 mb-8 animate-fade-in-delay">
            Join our nationwide network of Territory Managers and earn commissions by connecting local events with our premium ticketing platform.
          </p>
          
          <!-- Development Disclaimer -->
          <div class="mb-8 max-w-2xl mx-auto bg-orange-500/10 border border-orange-500/20 rounded-lg p-4">
            <div class="text-orange-300 text-sm">
              <strong>⚠️ Development Feature:</strong> This Territory Manager system is currently in development. Applications submitted may not be processed immediately.
            </div>
          </div>
          <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
              <div class="text-3xl font-bold text-white">$0.10</div>
              <div class="text-blue-100">per ticket sold</div>
            </div>
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
              <div class="text-3xl font-bold text-white">$75</div>
              <div class="text-blue-100">per onsite event</div>
            </div>
            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
              <div class="text-3xl font-bold text-white">Unlimited</div>
              <div class="text-blue-100">earning potential</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Benefits Section -->
    <div class="container mx-auto px-4 py-16">
      <div class="text-center mb-12">
        <h2 class="text-4xl font-bold text-white mb-4">Why Join Our Team?</h2>
        <p class="text-xl text-blue-100">Flexible work, competitive pay, and the chance to help your community</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 mb-16">
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">💰</div>
          <h3 class="text-xl font-bold text-white mb-3">Earnings Potential</h3>
          <p class="text-blue-100">Earn $0.10 per ticket sold plus $75 per onsite event. Top performers have potential to earn $800+ monthly.*</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">📅</div>
          <h3 class="text-xl font-bold text-white mb-3">Flexible Schedule</h3>
          <p class="text-blue-100">Work on your own schedule. Perfect for students, retirees, or anyone seeking extra income.</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">🎯</div>
          <h3 class="text-xl font-bold text-white mb-3">Exclusive Territory</h3>
          <p class="text-blue-100">Get your own protected territory with no competition from other Territory Managers.</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">🎓</div>
          <h3 class="text-xl font-bold text-white mb-3">Full Training</h3>
          <p class="text-blue-100">Complete training program with marketing materials, sales scripts, and ongoing support.</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">🏆</div>
          <h3 class="text-xl font-bold text-white mb-3">Recognition & Rewards</h3>
          <p class="text-blue-100">Achievement badges, leaderboards, and bonus rewards for top performers.</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20">
          <div class="text-4xl mb-4">🌟</div>
          <h3 class="text-xl font-bold text-white mb-3">Community Impact</h3>
          <p class="text-blue-100">Help local events succeed by connecting them with professional ticketing solutions.</p>
        </div>
      </div>
    </div>

    <!-- Territory Map Section -->
    <div class="container mx-auto px-4 py-16">
      <div class="text-center mb-12">
        <h2 class="text-4xl font-bold text-white mb-4">Available Territories</h2>
        <p class="text-xl text-blue-100">Choose your preferred territory from available regions</p>
      </div>
      
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20 mb-8">
        <div id="territory-map" class="h-96 bg-gray-800 rounded-lg flex items-center justify-center">
          <p class="text-white text-lg">Interactive territory map will be loaded here</p>
        </div>
      </div>
    </div>

    <!-- Earnings Calculator -->
    <div class="container mx-auto px-4 py-16">
      <div class="text-center mb-12">
        <h2 class="text-4xl font-bold text-white mb-4">Earnings Calculator</h2>
        <p class="text-xl text-blue-100">Estimate your potential monthly earnings*</p>
      </div>
      
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 border border-white/20 max-w-2xl mx-auto">
        <div class="space-y-6">
          <div>
            <label class="block text-white text-sm font-medium mb-2">Events referred per month</label>
            <input type="range" id="events-slider" min="1" max="20" value="5" class="w-full">
            <div class="flex justify-between text-sm text-blue-100 mt-1">
              <span>1</span>
              <span id="events-value">5</span>
              <span>20</span>
            </div>
          </div>
          
          <div>
            <label class="block text-white text-sm font-medium mb-2">Average tickets per event</label>
            <input type="range" id="tickets-slider" min="10" max="500" value="100" class="w-full">
            <div class="flex justify-between text-sm text-blue-100 mt-1">
              <span>10</span>
              <span id="tickets-value">100</span>
              <span>500</span>
            </div>
          </div>
          
          <div>
            <label class="block text-white text-sm font-medium mb-2">Onsite events per month</label>
            <input type="range" id="onsite-slider" min="0" max="10" value="2" class="w-full">
            <div class="flex justify-between text-sm text-blue-100 mt-1">
              <span>0</span>
              <span id="onsite-value">2</span>
              <span>10</span>
            </div>
          </div>
          
          <div class="border-t border-white/20 pt-6">
            <div class="text-center">
              <div class="text-4xl font-bold text-white mb-2" id="total-earnings">$200</div>
              <div class="text-lg text-blue-100">Estimated monthly earnings potential</div>
              <div class="text-sm text-blue-200 mt-2" id="earnings-breakdown">
                $50 from ticket commissions + $150 from onsite events
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Earnings Disclaimer -->
    <div class="container mx-auto px-4 py-8">
      <div class="max-w-4xl mx-auto mb-8">
        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
          <div class="flex items-center justify-between">
            <div class="text-blue-100">
              <span class="text-sm">*Earnings are potential and may vary based on individual performance and market conditions.</span>
            </div>
            <button id="disclaimer-toggle" class="text-blue-400 hover:text-blue-300 text-sm underline">
              View Full Disclaimer
            </button>
          </div>
          
          <div id="disclaimer-content" class="hidden mt-4 pt-4 border-t border-white/20">
            <div class="text-blue-100 space-y-3 text-sm">
              <p><strong>Earnings are not guaranteed and results may vary.</strong> The earnings examples and calculator above represent potential earnings based on successful event referrals and ticket sales. Your actual earnings will depend on various factors including:</p>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>Your ability to identify and successfully refer events in your territory</li>
                <li>The number and size of events you refer</li>
                <li>Event organizer adoption of our ticketing platform</li>
                <li>Ticket sales performance for referred events</li>
                <li>Market conditions and seasonal variations</li>
                <li>Your level of effort and marketing effectiveness</li>
              </ul>
              <p><strong>No income claims are being made.</strong> Some Territory Managers may earn more, some may earn less, and some may earn nothing at all. Success as a Territory Manager requires dedication, networking skills, and active participation in your local event community.</p>
              <p><strong>Independent contractor status:</strong> Territory Managers are independent contractors, not employees. You will be responsible for your own taxes, expenses, and business operations.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action -->
    <div class="container mx-auto px-4 py-16 text-center">
      <h2 class="text-4xl font-bold text-white mb-6">Ready to Get Started?</h2>
      <p class="text-xl text-blue-100 mb-8">Join Territory Managers who are building their event referral business with BCT</p>
      <a href="/territory-manager/apply/form" class="inline-block bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl">
        Apply Now - It's Free
      </a>
      <p class="text-sm text-blue-200 mt-4">Application takes 5 minutes • Background check required • Independent contractor opportunity</p>
    </div>
  </div>

  <script>
    // Earnings calculator functionality
    const eventsSlider = document.getElementById('events-slider');
    const ticketsSlider = document.getElementById('tickets-slider');
    const onsiteSlider = document.getElementById('onsite-slider');
    const eventsValue = document.getElementById('events-value');
    const ticketsValue = document.getElementById('tickets-value');
    const onsiteValue = document.getElementById('onsite-value');
    const totalEarnings = document.getElementById('total-earnings');
    const earningsBreakdown = document.getElementById('earnings-breakdown');

    function updateCalculator() {
      const events = parseInt(eventsSlider.value);
      const tickets = parseInt(ticketsSlider.value);
      const onsite = parseInt(onsiteSlider.value);

      eventsValue.textContent = events;
      ticketsValue.textContent = tickets;
      onsiteValue.textContent = onsite;

      const ticketCommission = events * tickets * 0.10;
      const onsiteCommission = onsite * 75;
      const total = ticketCommission + onsiteCommission;

      totalEarnings.textContent = `$${total.toLocaleString()}`;
      earningsBreakdown.textContent = `$${ticketCommission.toLocaleString()} from ticket commissions + $${onsiteCommission.toLocaleString()} from onsite events (potential earnings*)`;
    }

    eventsSlider.addEventListener('input', updateCalculator);
    ticketsSlider.addEventListener('input', updateCalculator);
    onsiteSlider.addEventListener('input', updateCalculator);

    // Initialize calculator
    updateCalculator();

    // Disclaimer toggle functionality
    const disclaimerToggle = document.getElementById('disclaimer-toggle');
    const disclaimerContent = document.getElementById('disclaimer-content');
    
    disclaimerToggle.addEventListener('click', () => {
      disclaimerContent.classList.toggle('hidden');
      disclaimerToggle.textContent = disclaimerContent.classList.contains('hidden') ? 
        'View Full Disclaimer' : 'Hide Disclaimer';
    });

    // Animate elements on scroll
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-fade-in');
        }
      });
    }, observerOptions);

    document.querySelectorAll('.bg-white\\/10').forEach(el => {
      observer.observe(el);
    });
  </script>

  <style>
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in {
      animation: fadeIn 0.8s ease-out forwards;
    }

    .animate-fade-in-delay {
      animation: fadeIn 0.8s ease-out 0.2s forwards;
      opacity: 0;
    }

    /* Custom slider styles */
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-track {
      background: rgba(255, 255, 255, 0.2);
      height: 6px;
      border-radius: 3px;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, #3b82f6, #8b5cf6);
      height: 20px;
      width: 20px;
      border-radius: 50%;
      cursor: pointer;
    }

    input[type="range"]::-moz-range-track {
      background: rgba(255, 255, 255, 0.2);
      height: 6px;
      border-radius: 3px;
      border: none;
    }

    input[type="range"]::-moz-range-thumb {
      background: linear-gradient(to right, #3b82f6, #8b5cf6);
      height: 20px;
      width: 20px;
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }
  </style>
</Layout>