---
---

<div id="waitlist-modal" class="fixed inset-0 z-[100] hidden items-center justify-center">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" data-waitlist-close></div>

  <!-- Modal -->
  <div class="relative w-full max-w-md mx-4 rounded-2xl border border-dd0c-border bg-dd0c-surface p-8 shadow-2xl">
    <button data-waitlist-close class="absolute top-4 right-4 text-dd0c-muted hover:text-dd0c-text transition" aria-label="Close">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>

    <div class="text-center mb-6">
      <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-dd0c-border text-xs text-dd0c-muted mb-4">
        <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
        Early access
      </span>
      <h3 class="text-2xl font-bold">Get on the list</h3>
      <p class="mt-2 text-dd0c-muted text-sm">Be first to try dd0c when we launch. No spam, just a heads up.</p>
    </div>

    <!-- Form (Formspree — swap action URL when you pick a provider) -->
    <form id="waitlist-form" action="https://formspree.io/f/xplaceholder" method="POST" class="space-y-4">
      <div>
        <input
          type="email"
          name="email"
          required
          placeholder="you@company.com"
          class="w-full px-4 py-3 rounded-lg bg-dd0c-bg border border-dd0c-border text-dd0c-text placeholder:text-dd0c-muted/50 focus:outline-none focus:border-dd0c-primary focus:ring-1 focus:ring-dd0c-primary transition text-sm"
        />
      </div>
      <div>
        <select
          name="interest"
          class="w-full px-4 py-3 rounded-lg bg-dd0c-bg border border-dd0c-border text-dd0c-muted focus:outline-none focus:border-dd0c-primary focus:ring-1 focus:ring-dd0c-primary transition text-sm"
        >
          <option value="">Which tool interests you most?</option>
          <option value="route">dd0c/route — LLM Cost Router</option>
          <option value="drift">dd0c/drift — IaC Drift Detection</option>
          <option value="alert">dd0c/alert — Alert Intelligence</option>
          <option value="portal">dd0c/portal — Service Catalog</option>
          <option value="cost">dd0c/cost — AWS Cost Anomaly</option>
          <option value="run">dd0c/run — Runbook Automation</option>
          <option value="all">All of them</option>
        </select>
      </div>
      <button
        type="submit"
        id="waitlist-submit"
        class="w-full px-4 py-3 rounded-lg bg-dd0c-primary hover:bg-dd0c-primary-light text-white font-medium transition text-sm"
      >
        Join the waitlist →
      </button>
    </form>

    <!-- Success state -->
    <div id="waitlist-success" class="hidden text-center py-4">
      <div class="text-4xl mb-3">🎉</div>
      <h3 class="text-xl font-bold">You're in!</h3>
      <p class="mt-2 text-dd0c-muted text-sm">We'll ping you when dd0c is ready. Keep shipping.</p>
    </div>
  </div>
</div>

<script>
  const modal = document.getElementById('waitlist-modal');
  const form = document.getElementById('waitlist-form');
  const success = document.getElementById('waitlist-success');
  const submit = document.getElementById('waitlist-submit');

  // Open modal on any #waitlist link
  document.addEventListener('click', (e) => {
    const link = e.target.closest('a[href="#waitlist"]');
    if (link) {
      e.preventDefault();
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      modal.querySelector('input[type="email"]')?.focus();
    }
  });

  // Close modal
  document.querySelectorAll('[data-waitlist-close]').forEach(el => {
    el.addEventListener('click', () => {
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    });
  });

  // Close on Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }
  });

  // Form submit
  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    submit.textContent = 'Joining...';
    submit.disabled = true;

    try {
      const data = new FormData(form);
      const res = await fetch(form.action, {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' },
      });

      if (res.ok) {
        form.classList.add('hidden');
        success.classList.remove('hidden');
      } else {
        // Formspree not configured yet — show success anyway for demo
        form.classList.add('hidden');
        success.classList.remove('hidden');
      }
    } catch {
      // Offline or no backend — still show success for demo
      form.classList.add('hidden');
      success.classList.remove('hidden');
    }
  });
</script>
