FormWaitlist Forms

---
/**
 * FormWaitlist — donkere wachtlijst-sectie: badge, kop, teller en e-mail-capture.
 *
 * Props:
 * - badge?: string
 * - headline?: string
 * - sub?: string
 * - count?: string
 * - countLabel?: string
 * - submitLabel?: string
 * - privacy?: string
 */
interface Props {
  badge?: string;
  headline?: string;
  sub?: string;
  count?: string;
  countLabel?: string;
  submitLabel?: string;
  privacy?: string;
}
const {
  badge = 'Binnenkort live',
  headline = 'Kom op de wachtlijst',
  sub = 'Exclusieve vroegboekkorting',
  count = '247',
  countLabel = 'mensen wachten al',
  submitLabel = 'Schrijf mij in op de wachtlijst',
  privacy = 'Geen spam. Je ontvangt alleen een bericht wanneer je aan de beurt bent.',
} = Astro.props;
---

<section class="bl-section fwl">
  <div class="bl-inner fwl-inner">
    <div class="fwl__col">
      {badge && <div class="fwl__badge">{badge}</div>}
      <h2 class="fwl__headline">{headline}</h2>
      {sub && <p class="fwl__sub">{sub}</p>}
      <div class="fwl__counter">
        <span class="fwl__count">{count}</span>
        <span class="fwl__count-label">{countLabel}</span>
      </div>
      <form class="fwl__form" novalidate>
        <div class="fwl__fields">
          <input class="fwl__input" type="text" placeholder="Voornaam" required />
          <input class="fwl__input" type="email" placeholder="E-mailadres" required />
        </div>
        <button class="fwl__btn" type="submit">{submitLabel}</button>
      </form>
      {privacy && <p class="fwl__privacy">{privacy}</p>}
    </div>
  </div>
</section>

<style>
.fwl{background:#0a0a0a}
.fwl-inner{display:flex;justify-content:center}
.fwl__col{width:100%;max-width:560px;text-align:center}
.fwl__badge{display:inline-block;background:#1e1e1e;color:#c7c9ff;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .9rem;border-radius:99px;margin-bottom:1.25rem;border:1px solid #3a3a50}
.fwl__headline{font-size:2rem;font-weight:800;color:#fff;margin:0 0 .75rem;line-height:1.2}
.fwl__sub{color:#aaa;font-size:1.125rem;line-height:1.6;margin:0 0 2rem}
.fwl__counter{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:2rem;background:#161616;border:1px solid #2a2a2a;border-radius:12px;padding:1.25rem}
.fwl__count{font-size:2.75rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fwl__count-label{font-size:.8125rem;color:#999;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.fwl__form{display:flex;flex-direction:column;gap:.75rem}
.fwl__fields{display:grid;grid-template-columns:1fr;gap:.75rem}
.fwl__input{padding:.85rem 1rem;border:1.5px solid #2a2a2a;border-radius:8px;font-size:1rem;color:#fff;background:#161616;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fwl__input::placeholder{color:#888}
.fwl__input:focus{border-color:var(--color-accent, #6366f1)}
.fwl__btn{padding:.95rem 1.5rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s;width:100%;font-family:inherit}
.fwl__btn:hover{opacity:.88}
.fwl__privacy{font-size:.8125rem;color:#999;margin:.75rem 0 0;line-height:1.5}
@media(min-width:480px){.fwl__fields{grid-template-columns:1fr 1fr}}
</style>