FormCallback Forms

---
/**
 * FormCallback — terugbelverzoek-kaart: naam + telefoon + gewenst tijdstip.
 *
 * Props:
 * - headline?: string
 * - sub?: string
 * - nameLabel?: string
 * - namePlaceholder?: string
 * - phoneLabel?: string
 * - phonePlaceholder?: string
 * - dateLabel?: string
 * - timeLabel?: string
 * - timeSlots?: string[]
 * - topicLabel?: string
 * - topicPlaceholder?: string
 * - button?: string
 * - action?: string
 */
interface Props {
  headline?: string;
  sub?: string;
  nameLabel?: string;
  namePlaceholder?: string;
  phoneLabel?: string;
  phonePlaceholder?: string;
  dateLabel?: string;
  timeLabel?: string;
  timeSlots?: string[];
  topicLabel?: string;
  topicPlaceholder?: string;
  button?: string;
  action?: string;
}
const {
  headline = 'Terugbelverzoek',
  sub = 'Laat je nummer achter en wij bellen je terug op het door jou gewenste tijdstip.',
  nameLabel = 'Naam *',
  namePlaceholder = 'Jan de Vries',
  phoneLabel = 'Telefoonnummer *',
  phonePlaceholder = 'Je telefoonnummer',
  dateLabel = 'Gewenste datum',
  timeLabel = 'Voorkeurstijdstip',
  timeSlots = ['09:00 – 10:00', '10:00 – 11:00', '11:00 – 12:00', '13:00 – 14:00', '14:00 – 15:00', '15:00 – 16:00', '16:00 – 17:00'],
  topicLabel = 'Onderwerp gesprek',
  topicPlaceholder = 'Bijv. vrijblijvende kennismaking, offerte bespreken...',
  button = 'Terugbelverzoek versturen',
  action = '#',
} = Astro.props;
---

<section class="bl-section fcb">
  <div class="bl-inner bl-inner--narrow fcb-inner">
    <div class="fcb-wrap">
      <div class="fcb-header">
        {headline && <h2 class="fcb-heading">{headline}</h2>}
        {sub && <p class="fcb-subtext">{sub}</p>}
      </div>
      <form class="fcb-form" action={action} novalidate>
        <div class="fcb-row">
          <div class="fcb-field">
            <label class="fcb-label" for="fcb-name">{nameLabel}</label>
            <input class="fcb-input" type="text" id="fcb-name" name="name" placeholder={namePlaceholder} required autocomplete="name" />
          </div>
          <div class="fcb-field">
            <label class="fcb-label" for="fcb-phone">{phoneLabel}</label>
            <input class="fcb-input" type="tel" id="fcb-phone" name="phone" placeholder={phonePlaceholder} required autocomplete="tel" />
          </div>
        </div>
        <div class="fcb-row">
          <div class="fcb-field">
            <label class="fcb-label" for="fcb-date">{dateLabel}</label>
            <input class="fcb-input" type="date" id="fcb-date" name="callback_date" />
          </div>
          <div class="fcb-field">
            <label class="fcb-label" for="fcb-time">{timeLabel}</label>
            <select class="fcb-select" id="fcb-time" name="callback_time">
              <option value="">Geen voorkeur</option>
              {timeSlots.map((t) => <option>{t}</option>)}
            </select>
          </div>
        </div>
        <div class="fcb-field">
          <label class="fcb-label" for="fcb-topic">{topicLabel}</label>
          <input class="fcb-input" type="text" id="fcb-topic" name="topic" placeholder={topicPlaceholder} />
        </div>
        <button class="fcb-submit" type="submit">{button}</button>
      </form>
    </div>
  </div>
</section>

<style>
.fcb-wrap{padding:2rem;background:#fff;border:1px solid #e5e5e5;border-radius:14px}
.fcb-header{margin-bottom:1.75rem}
.fcb-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.03em;margin:0 0 .4rem}
.fcb-subtext{font-size:1rem;color:#6b7280;margin:0}
.fcb-form{display:flex;flex-direction:column;gap:1.1rem}
.fcb-row{display:grid;grid-template-columns:1fr;gap:1rem}
.fcb-field{display:flex;flex-direction:column;gap:.35rem}
.fcb-label{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fcb-input,.fcb-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%}
.fcb-input:focus,.fcb-select:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fcb-submit{padding:.875rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;margin-top:.25rem}
.fcb-submit:hover{opacity:.88}
@media(min-width:600px){.fcb-row{grid-template-columns:1fr 1fr}}
</style>