FormCallback Forms

---
interface Props {
  heading?: string;
  subtext?: string;
  submitLabel?: string;
}

const {
  heading = "Terugbelverzoek",
  subtext = "Laat je nummer achter en wij bellen je terug op het door jou gewenste tijdstip.",
  submitLabel = "Terugbelverzoek versturen",
} = Astro.props;
---

<div class="fcb-wrap">
  <div class="fcb-header">
    <div class="fcb-icon" aria-hidden="true">📞</div>
    {heading && <h2 class="fcb-heading">{heading}</h2>}
    {subtext && <p class="fcb-subtext">{subtext}</p>}
  </div>
  <form class="fcb-form" onsubmit="return false;" novalidate>
    <div class="fcb-row">
      <div class="fcb-field">
        <label class="fcb-label" for="fcb-name">Naam *</label>
        <input class="fcb-input" type="text" id="fcb-name" name="name" placeholder="Jan de Vries" required autocomplete="name" />
      </div>
      <div class="fcb-field">
        <label class="fcb-label" for="fcb-phone">Telefoonnummer *</label>
        <input class="fcb-input" type="tel" id="fcb-phone" name="phone" placeholder="+31 6 12 34 56 78" required autocomplete="tel" />
      </div>
    </div>
    <div class="fcb-row">
      <div class="fcb-field">
        <label class="fcb-label" for="fcb-date">Gewenste datum</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">Voorkeurstijdstip</label>
        <select class="fcb-select" id="fcb-time" name="callback_time">
          <option value="">Geen voorkeur</option>
          <option>09:00 – 10:00</option>
          <option>10:00 – 11:00</option>
          <option>11:00 – 12:00</option>
          <option>13:00 – 14:00</option>
          <option>14:00 – 15:00</option>
          <option>15:00 – 16:00</option>
          <option>16:00 – 17:00</option>
        </select>
      </div>
    </div>
    <div class="fcb-field">
      <label class="fcb-label" for="fcb-topic">Onderwerp gesprek</label>
      <input class="fcb-input" type="text" id="fcb-topic" name="topic" placeholder="Bijv. vrijblijvende kennismaking, offerte bespreken..." />
    </div>
    <button class="fcb-submit" type="submit">{submitLabel}</button>
  </form>
</div>

<style>
  .fcb-wrap {
    max-width: 520px; padding: 2rem;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 14px;
  }
  .fcb-header { margin-bottom: 1.75rem; }
  .fcb-icon { font-size: 2rem; margin-bottom: 0.75rem; }
  .fcb-heading { font-size: 1.5rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.4rem; }
  .fcb-subtext { font-size: 0.875rem; color: #666; margin: 0; }
  .fcb-form { display: flex; flex-direction: column; gap: 1.1rem; }
  .fcb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 460px) { .fcb-row { grid-template-columns: 1fr; } }
  .fcb-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .fcb-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fcb-input, .fcb-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%;
  }
  .fcb-input:focus, .fcb-select:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fcb-submit {
    padding: 0.875rem; background: var(--color-accent, #6366f1); color: #fff;
    border: none; border-radius: 8px; font-size: 0.975rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s; margin-top: 0.25rem;
  }
  .fcb-submit:hover { opacity: 0.88; }
</style>