---
---

<section id="waitlist" class="relative py-32 md:py-48 px-8 md:px-16 bg-[#080a09] overflow-hidden -mt-px">
  <!-- Video Background -->
  <div class="absolute inset-0">
    <video 
      autoplay 
      muted 
      loop 
      playsinline
      class="w-full h-full object-cover opacity-80 saturate-150 contrast-125 brightness-100"
    >
      <source src="/videos/cta-energy.mp4" type="video/mp4">
    </video>
    <div class="absolute inset-0 bg-gradient-to-t from-[#080a09] via-[#080a09]/60 to-[#00FF88]/10 opacity-90"></div>
    <div class="absolute inset-0 bg-[#080a09]/20"></div>
  </div>

  <div class="max-w-5xl mx-auto text-center relative z-10 px-4">
    <p class="text-mono tracking-ultra text-white/50 mb-8 font-bold uppercase">008 / Early Access</p>
    
    <h2 class="heading-serif text-5xl md:text-7xl lg:text-9xl text-white mb-8 leading-[0.9] tracking-tighter drop-shadow-2xl">
      Ready to amplify<br/>your Service Titan?
    </h2>
    
    <p class="text-white/70 text-lg md:text-xl mb-12 max-w-lg mx-auto font-light leading-relaxed">
      Join the waitlist for early access to the new standard of CRM intelligence. Limited spots available.
    </p>
    
    <div class="max-w-xl mx-auto">
      <form id="waitlist-form" class="flex flex-col sm:flex-row gap-4 p-2 bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-[2rem] shadow-2xl">
        <input 
          type="email" 
          name="email"
          placeholder="you@company.com" 
          required
          class="flex-1 px-8 py-5 bg-transparent rounded-full text-white placeholder-white/30 focus:outline-none transition-all duration-300 text-lg"
        />
        <input type="hidden" name="company" value="Not Specified" />
        <button 
          type="submit"
          class="px-10 py-5 bg-accent text-[#080a09] rounded-full font-mono text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:scale-105 transition-all duration-300 shadow-[0_0_30px_rgba(0,255,136,0.3)] whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-w-[160px]"
        >
          <span class="form-text">Get Access</span>
          <span class="form-loading hidden">
            <svg class="animate-spin h-5 w-5 text-[#080a09]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </span>
        </button>
      </form>
      
      <div id="form-success" class="hidden bg-accent text-[#080a09] p-10 rounded-[2rem] mt-6 shadow-[0_0_50px_rgba(0,255,136,0.2)]">
        <p class="text-3xl font-serif mb-3 tracking-tight">You're on the list!</p>
        <p class="text-[#080a09]/70 text-lg">We'll reach out as soon as a spot opens up.</p>
      </div>
    </div>
    
    <p class="text-white/30 text-[10px] mt-8 font-mono uppercase tracking-[0.3em]">
      [ Secure Enterprise Access ]
    </p>
  </div>
</section>

<script>
  import { initWaitlistForm } from '../../scripts/waitlist';
  
  // Initialize when DOM is ready
  document.addEventListener('DOMContentLoaded', () => {
    initWaitlistForm();
  });
</script>
