FormQuote Forms

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

const {
  heading = "Vraag een offerte aan",
  subtext = "Vul het formulier in en ontvang binnen 2 werkdagen een op maat gemaakte offerte.",
  submitLabel = "Offerte aanvragen",
} = Astro.props;
---

<div class="fqt-wrap">
  <div class="fqt-header">
    {heading && <h2 class="fqt-heading">{heading}</h2>}
    {subtext && <p class="fqt-subtext">{subtext}</p>}
  </div>
  <form class="fqt-form" onsubmit="return false;" novalidate>
    <div class="fqt-row">
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-name">Naam *</label>
        <input class="fqt-input" type="text" id="fqt-name" name="name" placeholder="Jouw naam" required />
      </div>
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-email">E-mailadres *</label>
        <input class="fqt-input" type="email" id="fqt-email" name="email" placeholder="jij@bedrijf.nl" required />
      </div>
    </div>
    <div class="fqt-row">
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-company">Bedrijf *</label>
        <input class="fqt-input" type="text" id="fqt-company" name="company" placeholder="Bedrijfsnaam" required />
      </div>
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-phone">Telefoonnummer</label>
        <input class="fqt-input" type="tel" id="fqt-phone" name="phone" placeholder="+31 6 12 34 56 78" />
      </div>
    </div>
    <div class="fqt-field">
      <label class="fqt-label">Welke diensten heb je nodig? *</label>
      <div class="fqt-checks">
        {["Google Ads", "Meta Ads", "SEO", "Content marketing", "E-mail marketing", "Website bouwen", "Branding", "Anders"].map(s => (
          <label class="fqt-check-item">
            <input class="fqt-check" type="checkbox" name="services" value={s} />
            {s}
          </label>
        ))}
      </div>
    </div>
    <div class="fqt-row">
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-budget">Maandelijks budget</label>
        <select class="fqt-select" id="fqt-budget" name="budget">
          <option value="">Selecteer budget</option>
          <option>Minder dan €1.000</option>
          <option>€1.000 – €2.500</option>
          <option>€2.500 – €5.000</option>
          <option>€5.000 – €10.000</option>
          <option>Meer dan €10.000</option>
        </select>
      </div>
      <div class="fqt-field">
        <label class="fqt-label" for="fqt-timeline">Gewenste startdatum</label>
        <input class="fqt-input" type="date" id="fqt-timeline" name="start_date" />
      </div>
    </div>
    <div class="fqt-field">
      <label class="fqt-label" for="fqt-notes">Aanvullende informatie</label>
      <textarea class="fqt-textarea" id="fqt-notes" name="notes" rows="4" placeholder="Beschrijf je project, doelen of specifieke wensen..."></textarea>
    </div>
    <button class="fqt-submit" type="submit">{submitLabel}</button>
  </form>
</div>

<style>
  .fqt-wrap { max-width: 700px; padding: 2rem 0; }
  .fqt-header { margin-bottom: 2rem; }
  .fqt-heading { font-size: 1.75rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.5rem; }
  .fqt-subtext { font-size: 0.95rem; color: #666; margin: 0; }
  .fqt-form { display: flex; flex-direction: column; gap: 1.25rem; }
  .fqt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  @media (max-width: 540px) { .fqt-row { grid-template-columns: 1fr; } }
  .fqt-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .fqt-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fqt-input,
  .fqt-select,
  .fqt-textarea {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--color-primary, #0a0a0a);
    background: #fff;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
  }
  .fqt-input:focus,
  .fqt-select:focus,
  .fqt-textarea:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fqt-textarea { resize: vertical; min-height: 100px; }
  .fqt-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .fqt-check-item {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem; background: #f5f5f5;
    border-radius: 20px; font-size: 0.85rem; color: #333; cursor: pointer;
    border: 1.5px solid transparent; transition: border-color 0.15s;
  }
  .fqt-check-item:has(input:checked) { border-color: var(--color-accent, #6366f1); background: #eef2ff; color: var(--color-accent, #6366f1); }
  .fqt-check { display: none; }
  .fqt-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;
  }
  .fqt-submit:hover { opacity: 0.88; }
</style>