FormFeedback Forms

---
/**
 * FormFeedback
 * Feedbackformulier met sterren-beoordeling en tekstveld
 */
interface Props {
  headline?: string;
  sub?: string;
}
const {
  headline = 'Deel jouw ervaring',
  sub = 'Jouw feedback helpt ons om onze dienstverlening te blijven verbeteren.',
} = Astro.props;
---

<section class="ffb">
  <div class="ffb__inner">
    <h2 class="ffb__headline">{headline}</h2>
    <p class="ffb__sub">{sub}</p>
    <form class="ffb__form" novalidate>
      <div class="ffb__stars-field">
        <span class="ffb__label">Jouw beoordeling</span>
        <div class="ffb__stars" role="group" aria-label="Beoordeling in sterren">
          {[5,4,3,2,1].map(n => (
            <>
              <input class="ffb__star-input" type="radio" name="rating" id={`ffb-star-${n}`} value={n} />
              <label class="ffb__star-label" for={`ffb-star-${n}`} title={`${n} sterren`}>★</label>
            </>
          ))}
        </div>
      </div>
      <div class="ffb__field">
        <label class="ffb__label" for="ffb-naam">Naam</label>
        <input class="ffb__input" id="ffb-naam" type="text" placeholder="Jouw naam" />
      </div>
      <div class="ffb__field">
        <label class="ffb__label" for="ffb-bericht">Jouw feedback</label>
        <textarea class="ffb__textarea" id="ffb-bericht" rows="4" placeholder="Vertel ons hoe je de samenwerking hebt ervaren…" required></textarea>
      </div>
      <button class="ffb__btn" type="submit">Feedback versturen</button>
    </form>
  </div>
</section>

<style>
  .ffb {
    background: #fff;
    padding: 4rem 1.5rem;
  }
  .ffb__inner {
    max-width: 580px;
    margin: 0 auto;
  }
  .ffb__headline {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .ffb__sub {
    color: #666;
    font-size: 0.95rem;
    margin: 0 0 2rem;
    line-height: 1.6;
  }
  .ffb__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .ffb__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
    display: block;
    margin-bottom: 0.4rem;
  }
  .ffb__stars-field { display: flex; flex-direction: column; }
  .ffb__stars {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.2rem;
    width: fit-content;
  }
  .ffb__star-input {
    display: none;
  }
  .ffb__star-label {
    font-size: 2rem;
    color: #d4d4d4;
    cursor: pointer;
    transition: color 0.15s;
    line-height: 1;
  }
  .ffb__stars:hover .ffb__star-label,
  .ffb__star-label:hover ~ .ffb__star-label,
  .ffb__star-input:checked ~ .ffb__star-label {
    color: #f59e0b;
  }
  .ffb__star-input:checked + .ffb__star-label {
    color: #f59e0b;
  }
  .ffb__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .ffb__input,
  .ffb__textarea {
    padding: 0.7rem 1rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--color-primary, #0a0a0a);
    background: #fafafa;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
  }
  .ffb__input:focus,
  .ffb__textarea:focus {
    border-color: var(--color-accent, #6366f1);
    background: #fff;
  }
  .ffb__textarea { resize: vertical; }
  .ffb__btn {
    padding: 0.85rem 2rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    align-self: flex-start;
  }
  .ffb__btn:hover { opacity: 0.88; }
</style>