FormBooking Forms

---
/**
 * FormBooking — afspraak inplannen: contact, type afspraak, datum + tijdslot, formaat.
 *
 * Props:
 * - headline?: string
 * - sub?: string
 * - meetingTypes?: string[]
 * - timeSlots?: string[]
 * - formats?: string[]
 * - button?: string
 * - action?: string
 */
interface Props {
  headline?: string;
  sub?: string;
  meetingTypes?: string[];
  timeSlots?: string[];
  formats?: string[];
  button?: string;
  action?: string;
}
const {
  headline = 'Plan een afspraak',
  sub = 'Kies een datum en tijdstip dat jou uitkomt. We bevestigen je afspraak binnen 1 uur via e-mail.',
  meetingTypes = ['Kennismakingsgesprek (30 min)', 'Strategiesessie (60 min)', 'Campagne evaluatie (45 min)', 'Onboarding gesprek (90 min)'],
  timeSlots = ['09:00', '09:30', '10:00', '10:30', '11:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30'],
  formats = ['Videocall (Teams/Zoom)', 'Telefonisch', 'Op locatie'],
  button = 'Afspraak bevestigen',
  action = '#',
} = Astro.props;
---

<section class="bl-section fbk">
  <div class="bl-inner bl-inner--narrow fbk-inner">
    <div class="fbk-wrap">
      <div class="fbk-header">
        {headline && <h2 class="fbk-heading">{headline}</h2>}
        {sub && <p class="fbk-subtext">{sub}</p>}
      </div>
      <form class="fbk-form" action={action} novalidate>
        <div class="fbk-row">
          <div class="fbk-field">
            <label class="fbk-label" for="fbk-name">Naam *</label>
            <input class="fbk-input" type="text" id="fbk-name" name="name" placeholder="Jouw naam" required autocomplete="name" />
          </div>
          <div class="fbk-field">
            <label class="fbk-label" for="fbk-email">E-mailadres *</label>
            <input class="fbk-input" type="email" id="fbk-email" name="email" placeholder="Je e-mailadres" required autocomplete="email" />
          </div>
        </div>
        <div class="fbk-row">
          <div class="fbk-field">
            <label class="fbk-label" for="fbk-phone">Telefoonnummer</label>
            <input class="fbk-input" type="tel" id="fbk-phone" name="phone" placeholder="Je telefoonnummer" autocomplete="tel" />
          </div>
          <div class="fbk-field">
            <label class="fbk-label" for="fbk-type">Type afspraak *</label>
            <select class="fbk-select" id="fbk-type" name="meeting_type" required>
              <option value="">Selecteer type</option>
              {meetingTypes.map((t) => <option>{t}</option>)}
            </select>
          </div>
        </div>
        <div class="fbk-field">
          <label class="fbk-label" for="fbk-date">Gewenste datum *</label>
          <input class="fbk-input" type="date" id="fbk-date" name="date" required />
        </div>
        <div class="fbk-field">
          <span class="fbk-label">Voorkeurstijdstip *</span>
          <div class="fbk-slots">
            {timeSlots.map((slot, i) => (
              <label class="fbk-slot">
                <input class="fbk-slot-input" type="radio" name="time_slot" value={slot} required={i === 0} />
                <span class="fbk-slot-label">{slot}</span>
              </label>
            ))}
          </div>
        </div>
        <div class="fbk-field">
          <span class="fbk-label">Vergaderformaat</span>
          <div class="fbk-format-group">
            {formats.map((f) => (
              <label class="fbk-format-item">
                <input class="fbk-format-radio" type="radio" name="format" value={f} /> {f}
              </label>
            ))}
          </div>
        </div>
        <div class="fbk-field">
          <label class="fbk-label" for="fbk-notes">Wat wil je bespreken? (optioneel)</label>
          <textarea class="fbk-textarea" id="fbk-notes" name="notes" rows="3" placeholder="Bijv. we overwegen te starten met advertenties voor ons platform..."></textarea>
        </div>
        <button class="fbk-submit" type="submit">{button}</button>
      </form>
    </div>
  </div>
</section>

<style>
.fbk-header{margin-bottom:2rem}
.fbk-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.03em;margin:0 0 .5rem}
.fbk-subtext{font-size:1rem;color:#6b7280;margin:0}
.fbk-form{display:flex;flex-direction:column;gap:1.25rem}
.fbk-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.fbk-field{display:flex;flex-direction:column;gap:.4rem}
.fbk-label{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fbk-input,.fbk-select,.fbk-textarea{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%}
.fbk-input:focus,.fbk-select:focus,.fbk-textarea:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fbk-textarea{resize:vertical;min-height:90px}
.fbk-slots{display:flex;flex-wrap:wrap;gap:.4rem}
.fbk-slot{cursor:pointer}
.fbk-slot-input{position:absolute;opacity:0;pointer-events:none}
.fbk-slot-label{display:block;padding:.45rem .9rem;background:#f3f4f6;border-radius:6px;font-size:.9375rem;font-weight:500;color:#374151;border:1.5px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.fbk-slot-input:checked+.fbk-slot-label{background:#eef2ff;color:var(--color-accent, #6366f1);border-color:var(--color-accent, #6366f1);font-weight:600}
.fbk-slot-input:focus-visible+.fbk-slot-label{outline:2px solid var(--color-accent, #6366f1);outline-offset:2px}
.fbk-format-group{display:flex;flex-direction:column;gap:.5rem}
.fbk-format-item{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:#374151;cursor:pointer;padding:.55rem 1rem;background:#f9f9f9;border-radius:8px;border:1.5px solid transparent}
.fbk-format-item:has(input:checked){border-color:var(--color-accent, #6366f1);background:#eef2ff;color:var(--color-accent, #6366f1)}
.fbk-format-radio{accent-color:var(--color-accent, #6366f1)}
.fbk-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}
.fbk-submit:hover{opacity:.88}
@media(min-width:600px){.fbk-row{grid-template-columns:1fr 1fr}}
</style>