FormSurvey Forms

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

const {
  heading = "Klantfeedback formulier",
  subtext = "Je feedback helpt ons om onze dienstverlening continu te verbeteren. Invullen duurt minder dan 2 minuten.",
  submitLabel = "Feedback versturen",
} = Astro.props;
---

<div class="fsv-wrap">
  <div class="fsv-header">
    {heading && <h2 class="fsv-heading">{heading}</h2>}
    {subtext && <p class="fsv-subtext">{subtext}</p>}
  </div>
  <form class="fsv-form" onsubmit="return false;" novalidate>
    <fieldset class="fsv-fieldset">
      <legend class="fsv-legend">Hoe tevreden ben je over onze samenwerking?</legend>
      <div class="fsv-scale">
        {[1,2,3,4,5,6,7,8,9,10].map(n => (
          <label class="fsv-scale-item">
            <input class="fsv-scale-input" type="radio" name="overall_score" value={n} required />
            <span class="fsv-scale-num">{n}</span>
          </label>
        ))}
      </div>
      <div class="fsv-scale-labels">
        <span>Heel ontevreden</span>
        <span>Heel tevreden</span>
      </div>
    </fieldset>

    <fieldset class="fsv-fieldset">
      <legend class="fsv-legend">Hoe beoordeel je de communicatie?</legend>
      <div class="fsv-radios">
        {["Uitstekend", "Goed", "Voldoende", "Matig", "Slecht"].map(opt => (
          <label class="fsv-radio-item">
            <input class="fsv-radio" type="radio" name="communication" value={opt} required />
            {opt}
          </label>
        ))}
      </div>
    </fieldset>

    <div class="fsv-field">
      <label class="fsv-label" for="fsv-best">Wat gaat er goed?</label>
      <textarea class="fsv-textarea" id="fsv-best" name="positive" rows="3" placeholder="Bijv. snelle responstijden, goede rapportages..."></textarea>
    </div>

    <div class="fsv-field">
      <label class="fsv-label" for="fsv-improve">Wat kan er beter?</label>
      <textarea class="fsv-textarea" id="fsv-improve" name="improvement" rows="3" placeholder="Wees gerust eerlijk — we leren graag van je feedback."></textarea>
    </div>

    <fieldset class="fsv-fieldset">
      <legend class="fsv-legend">Zou je BLURR aanbevelen aan anderen?</legend>
      <div class="fsv-radios fsv-radios--inline">
        {["Zeker wel", "Waarschijnlijk wel", "Misschien", "Waarschijnlijk niet"].map(opt => (
          <label class="fsv-radio-item">
            <input class="fsv-radio" type="radio" name="recommend" value={opt} required />
            {opt}
          </label>
        ))}
      </div>
    </fieldset>

    <div class="fsv-field">
      <label class="fsv-label" for="fsv-name">Naam (optioneel)</label>
      <input class="fsv-input" type="text" id="fsv-name" name="name" placeholder="Jouw naam" autocomplete="name" />
    </div>

    <button class="fsv-submit" type="submit">{submitLabel}</button>
  </form>
</div>

<style>
  .fsv-wrap { max-width: 600px; padding: 2rem 0; }
  .fsv-header { margin-bottom: 2rem; }
  .fsv-heading { font-size: 1.75rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.5rem; }
  .fsv-subtext { font-size: 0.95rem; color: #666; margin: 0; }
  .fsv-form { display: flex; flex-direction: column; gap: 1.75rem; }
  .fsv-fieldset { border: none; padding: 0; margin: 0; }
  .fsv-legend { font-size: 0.95rem; font-weight: 700; color: var(--color-primary, #0a0a0a); margin-bottom: 1rem; }
  .fsv-scale { display: flex; gap: 0.4rem; flex-wrap: wrap; }
  .fsv-scale-item { cursor: pointer; }
  .fsv-scale-input { display: none; }
  .fsv-scale-num {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px; background: #f5f5f5;
    font-size: 0.85rem; font-weight: 600; color: #555;
    border: 1.5px solid transparent; transition: all 0.15s;
  }
  .fsv-scale-input:checked + .fsv-scale-num { background: var(--color-accent, #6366f1); color: #fff; border-color: var(--color-accent, #6366f1); }
  .fsv-scale-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.4rem; }
  .fsv-radios { display: flex; flex-direction: column; gap: 0.5rem; }
  .fsv-radios--inline { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  .fsv-radio-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #333; cursor: pointer; padding: 0.55rem 1rem; background: #f9f9f9; border-radius: 8px; border: 1.5px solid transparent; }
  .fsv-radio-item:has(input:checked) { border-color: var(--color-accent, #6366f1); background: #eef2ff; color: var(--color-accent, #6366f1); }
  .fsv-radio { accent-color: var(--color-accent, #6366f1); }
  .fsv-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .fsv-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fsv-input, .fsv-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%;
  }
  .fsv-input:focus, .fsv-textarea:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fsv-textarea { resize: vertical; min-height: 90px; }
  .fsv-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;
  }
  .fsv-submit:hover { opacity: 0.88; }
</style>