FormContact Forms

---
/**
 * FormContact — contactformulier met naam, e-mail, onderwerp en bericht.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - sub?: string
 * - bg?: 'white' | 'light'
 */
interface Props {
  headline?: string;
  sub?: string;
  bg?: 'white' | 'light';
}
const {
  headline = 'Neem contact op',
  sub = 'We reageren binnen één werkdag.',
  bg = 'white',
} = Astro.props;
---

<section class={`bl-section fct fct--${bg}`}>
  <div class="bl-inner bl-inner--narrow fct-inner">
    {(headline || sub) && (
      <div class="fct-header">
        {headline && <h2 class="fct-headline">{headline}</h2>}
        {sub && <p class="fct-sub">{sub}</p>}
      </div>
    )}
    <form class="fct-form">
      <div class="fct-row">
        <div class="fct-field">
          <label class="fct-label" for="fct-name">Naam *</label>
          <input id="fct-name" type="text" name="name" class="fct-input" placeholder="Je naam" autocomplete="name" required />
        </div>
        <div class="fct-field">
          <label class="fct-label" for="fct-email">E-mail *</label>
          <input id="fct-email" type="email" name="email" class="fct-input" placeholder="Je e-mailadres" autocomplete="email" required />
        </div>
      </div>
      <div class="fct-field">
        <label class="fct-label" for="fct-subject">Onderwerp</label>
        <input id="fct-subject" type="text" name="subject" class="fct-input" placeholder="Waar kunnen we je mee helpen?" />
      </div>
      <div class="fct-field">
        <label class="fct-label" for="fct-message">Bericht *</label>
        <textarea id="fct-message" name="message" class="fct-textarea" rows="5" placeholder="Vertel ons meer..." required></textarea>
      </div>
      <button type="submit" class="fct-submit">Verstuur bericht</button>
    </form>
  </div>
</section>

<style>
.fct--white{background:#fff}
.fct--light{background:#f8fafc}
.fct-header{margin-bottom:2rem}
.fct-headline{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#0a0a0a;letter-spacing:-.03em;margin:0 0 .5rem}
.fct-sub{font-size:1rem;color:#6b7280;margin:0}
.fct-form{display:flex;flex-direction:column;gap:1.25rem}
.fct-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.fct-field{display:flex;flex-direction:column;gap:.375rem}
.fct-label{font-size:1rem;font-weight:600;color:#374151}
.fct-input,.fct-textarea{padding:.75rem 1rem;border:1.5px solid #d1d5db;border-radius:.5rem;font-size:1rem;color:#0a0a0a;background:#fff;outline:none;transition:border-color .15s;resize:vertical;font-family:inherit}
.fct-input:focus,.fct-textarea:focus{border-color:var(--color-accent,#6366f1)}
.fct-submit{padding:.875rem 2rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:1rem;border:none;border-radius:.5rem;cursor:pointer;transition:opacity .2s;align-self:flex-start}
.fct-submit:hover{opacity:.88}
@media(min-width:600px){.fct-row{grid-template-columns:1fr 1fr}}
</style>