---
// ComparisonSection.astro - Competitive advantage comparison section
---

<section class="relative py-16 lg:py-24 overflow-hidden">
  <!-- Background gradients -->
  <div class="absolute inset-0" style="background: var(--bg-gradient);"></div>
  <div class="absolute inset-0" style="background: linear-gradient(to right, var(--bg-orb-2), var(--bg-orb-1), var(--bg-orb-2));"></div>
  
  <!-- Glassmorphism overlay -->
  <div class="absolute inset-0 backdrop-blur-sm" style="background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);"></div>
  
  <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center mb-16">
      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full backdrop-blur-sm mb-6" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
        <span class="text-sm font-medium" style="color: var(--glass-text-accent);">Built by Event Professionals</span>
      </div>
      
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6" style="color: var(--glass-text-primary);">
        Why We're Better Than 
        <span class="text-transparent bg-clip-text" style="background-image: linear-gradient(to right, var(--glass-text-accent), var(--glass-text-accent));">
          The Other Guys
        </span>
      </h2>
      
      <p class="text-xl max-w-3xl mx-auto leading-relaxed" style="color: var(--glass-text-secondary);">
        Built by people who've actually run gates — not just coded them. 
        Experience real ticketing without the headaches.
      </p>
    </div>

    <!-- Comparison Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 mb-16">
      
      <!-- Built from Experience -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">Built by Event Pros</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Created by actual event professionals who've worked ticket gates</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Built by disconnected tech teams who've never run an event</span>
          </div>
        </div>
      </div>

      <!-- Faster Payouts -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">Instant Payouts</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Stripe deposits go straight to you — no delays or fund holds</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Hold your money for days or weeks before releasing funds</span>
          </div>
        </div>
      </div>

      <!-- Transparent Fees -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">No Hidden Fees</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Flat $1.50 + 2.5% per ticket. Stripe's fee is separate and visible</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Hidden platform fees, surprise charges, and confusing pricing</span>
          </div>
        </div>
      </div>

      <!-- Modern Platform -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">Modern Technology</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Custom-built from scratch based on real-world event needs</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Bloated, recycled platforms with outdated interfaces</span>
          </div>
        </div>
      </div>

      <!-- Hands-On Support -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">Real Human Support</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Real humans help you before and during your event</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Outsourced support desks and endless ticket systems</span>
          </div>
        </div>
      </div>

      <!-- Performance & Reliability -->
      <div class="glassmorphism p-6 lg:p-8 rounded-2xl hover:scale-105 transition-all duration-300">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-12 h-12 rounded-full flex items-center justify-center" style="background: var(--success-bg);">
            <svg class="w-6 h-6" style="color: var(--success-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold" style="color: var(--glass-text-primary);">Rock-Solid Reliability</h3>
        </div>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--success-color);">✅ US:</span>
            <span class="text-sm" style="color: var(--glass-text-secondary);">Built for upscale events with enterprise-grade performance</span>
          </div>
          <div class="flex items-start gap-3">
            <span class="font-bold text-sm" style="color: var(--error-color);">❌ THEM:</span>
            <span class="text-sm" style="color: var(--glass-text-tertiary);">Crashes during sales rushes when you need them most</span>
          </div>
        </div>
      </div>

    </div>


    <!-- Call to Action -->
    <div class="text-center">
      <div class="inline-flex flex-col sm:flex-row gap-4">
        <a href="/login" class="inline-flex items-center justify-center px-8 py-4 font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg" style="background: linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234)); color: var(--glass-text-primary);" onmouseenter="this.style.background='linear-gradient(to right, rgb(29, 78, 216), rgb(126, 34, 206))'" onmouseleave="this.style.background='linear-gradient(to right, rgb(37, 99, 235), rgb(147, 51, 234))'">
          <span>Switch to Black Canyon</span>
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </a>
        <a href="/pricing" class="inline-flex items-center justify-center px-8 py-4 backdrop-blur-sm font-semibold rounded-xl transition-all duration-300" style="background: var(--glass-bg); color: var(--glass-text-primary); border: 1px solid var(--glass-border);" onmouseenter="this.style.background='var(--glass-bg-lg)'" onmouseleave="this.style.background='var(--glass-bg)'">
          Compare Fees
        </a>
      </div>
      <p class="text-sm mt-4" style="color: var(--glass-text-tertiary);">
        Ready to experience real ticketing? Join event professionals who've made the switch.
      </p>
    </div>
  </div>
</section>

<style>
  .glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow-lg);
  }
</style>