{% extends "base.html" %}

{% block title %}Join the Waitlist - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="card max-w-sm mx-auto mt-8">
    <div style="text-align:center;margin-bottom:20px;">
      <div style="width:48px;height:48px;background:#FEF3C7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
        <svg width="22" height="22" fill="none" stroke="#B45309" stroke-width="2" viewBox="0 0 24 24">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
          <line x1="19" y1="8" x2="19" y2="14"/>
          <line x1="22" y1="11" x2="16" y2="11"/>
        </svg>
      </div>
      <h1 class="text-2xl mb-1">Join the Waitlist</h1>
      <p class="text-stone text-sm">Be the first to know when BeanFlows launches.</p>
    </div>

    <form method="post" class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="plan" value="{{ plan or 'free' }}">

      <div>
        <label for="email" class="form-label">Email</label>
        <input type="email" id="email" name="email" class="form-input"
               placeholder="you@example.com" required autofocus>
      </div>

      {% if plan and plan != 'free' %}
      <p class="form-hint">
        We'll remember your interest in the <strong>{{ plan | title }}</strong> plan.
      </p>
      {% endif %}

      <button type="submit" class="btn w-full">Get Early Access</button>
    </form>

    <p class="text-center text-xs text-stone mt-6">
      Coffee market data, first. No spam.
    </p>
  </div>
</main>
{% endblock %}
