FormEventReg Forms

---
/**
 * FormEventReg — evenement-registratie: event-kaart bovenaan, registratieformulier eronder.
 *
 * Props:
 * - badge?: string
 * - eventTitle?: string
 * - eventMeta?: string[]      losse meta-regels (datum, locatie, beschikbaarheid)
 * - heading?: string
 * - newsletterLabel?: string
 * - button?: string
 * - note?: string
 * - action?: string
 */
interface Props {
  badge?: string;
  eventTitle?: string;
  eventMeta?: string[];
  heading?: string;
  newsletterLabel?: string;
  button?: string;
  note?: string;
  action?: string;
}
const {
  badge = 'Evenement',
  eventTitle = 'Marketing Masterclass',
  eventMeta = ['15 mei, 14:00–17:00', 'Amsterdam, Keizersgracht 123', 'Nog 12 plekken beschikbaar'],
  heading = 'Registreer je deelname',
  newsletterLabel = 'Houd mij op de hoogte van toekomstige evenementen',
  button = 'Ik doe mee',
  note = 'Gratis deelname. Annuleren tot 48 uur voor aanvang.',
  action = '#',
} = Astro.props;
---

<section class="bl-section fer">
  <div class="bl-inner bl-inner--narrow fer-inner">
    <div class="fer-wrap">
      <div class="fer-event-card">
        {badge && <div class="fer-event-badge">{badge}</div>}
        <h2 class="fer-event-title">{eventTitle}</h2>
        <div class="fer-event-meta">
          {eventMeta.map((m, i) => (
            <div class:list={['fer-meta-item', i === eventMeta.length - 1 && 'fer-meta-item--spots']}>{m}</div>
          ))}
        </div>
      </div>
      <div class="fer-form-area">
        <h3 class="fer-heading">{heading}</h3>
        <form class="fer-form" action={action} novalidate>
          <div class="fer-row">
            <div class="fer-field"><label class="fer-label" for="fer-first">Voornaam *</label><input class="fer-input" type="text" id="fer-first" name="first_name" placeholder="Jan" required autocomplete="given-name" /></div>
            <div class="fer-field"><label class="fer-label" for="fer-last">Achternaam *</label><input class="fer-input" type="text" id="fer-last" name="last_name" placeholder="de Vries" required autocomplete="family-name" /></div>
          </div>
          <div class="fer-field"><label class="fer-label" for="fer-email">E-mailadres *</label><input class="fer-input" type="email" id="fer-email" name="email" placeholder="Je e-mailadres" required autocomplete="email" /></div>
          <div class="fer-row">
            <div class="fer-field"><label class="fer-label" for="fer-company">Bedrijf</label><input class="fer-input" type="text" id="fer-company" name="company" placeholder="Jouw bedrijf" autocomplete="organization" /></div>
            <div class="fer-field"><label class="fer-label" for="fer-role">Functie</label><input class="fer-input" type="text" id="fer-role" name="role" placeholder="Marketing Manager" autocomplete="organization-title" /></div>
          </div>
          <div class="fer-field">
            <label class="fer-label" for="fer-tickets">Aantal tickets *</label>
            <select class="fer-select" id="fer-tickets" name="tickets" required>
              <option value="1">1 ticket</option>
              <option value="2">2 tickets</option>
              <option value="3">3 tickets</option>
            </select>
          </div>
          <div class="fer-field"><label class="fer-label" for="fer-dietary">Dieetwensen</label><input class="fer-input" type="text" id="fer-dietary" name="dietary" placeholder="Bijv. vegetarisch, glutenvrij" /></div>
          {newsletterLabel && (
            <label class="fer-check-label"><input class="fer-check" type="checkbox" name="newsletter" /> {newsletterLabel}</label>
          )}
          <button class="fer-submit" type="submit">{button} →</button>
          {note && <p class="fer-note">{note}</p>}
        </form>
      </div>
    </div>
  </div>
</section>

<style>
.fer-wrap{display:flex;flex-direction:column;gap:2rem}
.fer-event-card{background:var(--color-primary, #0a0a0a);color:#fff;padding:2rem;border-radius:14px}
.fer-event-badge{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#a5b4fc;background:#6366f126;padding:.3rem .75rem;border-radius:4px;margin-bottom:1rem}
.fer-event-title{font-size:clamp(1.4rem,3vw,1.6rem);font-weight:800;margin:0 0 1.25rem}
.fer-event-meta{display:flex;flex-direction:column;gap:.5rem}
.fer-meta-item{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#e8e8e8}
.fer-meta-item--spots{color:#86efac;font-weight:600}
.fer-heading{font-size:clamp(1.3rem,3vw,1.5rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.02em;margin:0 0 1.5rem}
.fer-form{display:flex;flex-direction:column;gap:1.1rem}
.fer-row{display:grid;grid-template-columns:1fr;gap:1.1rem}
.fer-field{display:flex;flex-direction:column;gap:.35rem}
.fer-label{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fer-input,.fer-select{padding:.7rem .9rem;border:1.5px solid #d1d5db;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fer-input:focus,.fer-select:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fer-check-label{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:#374151;cursor:pointer}
.fer-check{accent-color:var(--color-accent, #6366f1)}
.fer-submit{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;align-self:flex-start}
.fer-submit:hover{opacity:.88}
.fer-note{font-size:.875rem;color:#6b7280;margin:.25rem 0 0}
@media(min-width:600px){.fer-row{grid-template-columns:1fr 1fr}}
</style>