FormEventReg Forms

---
interface Props {
  eventTitle?: string;
  eventDate?: string;
  eventLocation?: string;
  eventSpots?: number;
  heading?: string;
  submitLabel?: string;
}

const {
  eventTitle = "BLURR Marketing Masterclass 2025",
  eventDate = "15 mei 2025, 14:00–17:00",
  eventLocation = "Amsterdam, Keizersgracht 123",
  eventSpots = 12,
  heading = "Registreer je deelname",
  submitLabel = "Ik doe mee →",
} = Astro.props;
---

<div class="fer-wrap">
  <div class="fer-event-card">
    <div class="fer-event-badge">Evenement</div>
    <h2 class="fer-event-title">{eventTitle}</h2>
    <div class="fer-event-meta">
      <div class="fer-meta-item">
        <span class="fer-meta-icon" aria-hidden="true">📅</span>
        {eventDate}
      </div>
      <div class="fer-meta-item">
        <span class="fer-meta-icon" aria-hidden="true">📍</span>
        {eventLocation}
      </div>
      {eventSpots && (
        <div class="fer-meta-item fer-meta-item--spots">
          <span class="fer-meta-icon" aria-hidden="true">🎟️</span>
          Nog {eventSpots} plekken beschikbaar
        </div>
      )}
    </div>
  </div>
  <div class="fer-form-area">
    <h3 class="fer-heading">{heading}</h3>
    <form class="fer-form" onsubmit="return false;" 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="jij@bedrijf.nl" 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>
      <label class="fer-check-label">
        <input class="fer-check" type="checkbox" name="newsletter" />
        Houd mij op de hoogte van toekomstige BLURR evenementen
      </label>
      <button class="fer-submit" type="submit">{submitLabel}</button>
      <p class="fer-note">Gratis deelname. Annuleren tot 48 uur voor aanvang.</p>
    </form>
  </div>
</div>

<style>
  .fer-wrap { max-width: 620px; padding: 2rem 0; 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: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent, #6366f1);
    background: rgba(99,102,241,0.15); padding: 0.3rem 0.75rem; border-radius: 4px; margin-bottom: 1rem;
  }
  .fer-event-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.25rem; }
  .fer-event-meta { display: flex; flex-direction: column; gap: 0.5rem; }
  .fer-meta-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; opacity: 0.85; }
  .fer-meta-item--spots { color: #86efac; font-weight: 600; opacity: 1; }
  .fer-meta-icon { font-size: 1rem; }
  .fer-heading { font-size: 1.3rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 1.5rem; }
  .fer-form { display: flex; flex-direction: column; gap: 1.1rem; }
  .fer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 480px) { .fer-row { grid-template-columns: 1fr; } }
  .fer-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .fer-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fer-input, .fer-select {
    padding: 0.7rem 0.9rem; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 0.925rem; color: var(--color-primary, #0a0a0a); background: #fff;
    transition: border-color 0.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 rgba(99,102,241,0.12); }
  .fer-check-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: #555; cursor: pointer; }
  .fer-check { accent-color: var(--color-accent, #6366f1); }
  .fer-submit {
    padding: 0.9rem 2rem; background: var(--color-accent, #6366f1); color: #fff;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s; align-self: flex-start;
  }
  .fer-submit:hover { opacity: 0.88; }
  .fer-note { font-size: 0.78rem; color: #999; margin: 0.25rem 0 0; }
</style>