FormReview Forms

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

const {
  heading = "Laat een review achter",
  subtext = "Jouw eerlijke mening helpt andere bedrijven een weloverwogen keuze te maken.",
  submitLabel = "Review plaatsen",
  productOrService = "BLURR Marketing",
} = Astro.props;
---

<div class="frv-wrap">
  <div class="frv-header">
    {heading && <h2 class="frv-heading">{heading}</h2>}
    {subtext && <p class="frv-subtext">{subtext}</p>}
  </div>
  <form class="frv-form" onsubmit="return false;" novalidate>
    <div class="frv-stars-field">
      <span class="frv-label">Jouw beoordeling van {productOrService} *</span>
      <div class="frv-stars" role="group" aria-label="Sterren beoordeling">
        {[5,4,3,2,1].map(n => (
          <label class="frv-star" aria-label={`${n} ster${n !== 1 ? "ren" : ""}`}>
            <input class="frv-star-input" type="radio" name="rating" value={n} required />
            <span class="frv-star-icon" aria-hidden="true">★</span>
          </label>
        ))}
      </div>
    </div>
    <div class="frv-row">
      <div class="frv-field">
        <label class="frv-label" for="frv-name">Naam *</label>
        <input class="frv-input" type="text" id="frv-name" name="name" placeholder="Jouw naam" required autocomplete="name" />
      </div>
      <div class="frv-field">
        <label class="frv-label" for="frv-company">Bedrijf</label>
        <input class="frv-input" type="text" id="frv-company" name="company" placeholder="Bedrijfsnaam" autocomplete="organization" />
      </div>
    </div>
    <div class="frv-field">
      <label class="frv-label" for="frv-title">Titel van je review *</label>
      <input class="frv-input" type="text" id="frv-title" name="title" placeholder="Bijv. Uitstekende samenwerking, resultaten overtroffen onze verwachtingen" required />
    </div>
    <div class="frv-field">
      <label class="frv-label" for="frv-review">Jouw review *</label>
      <textarea class="frv-textarea" id="frv-review" name="review" rows="5" placeholder="Deel jouw ervaring met BLURR. Wat heeft je het meest geholpen? Wat zou je andere bedrijven aanraden?" required></textarea>
      <span class="frv-hint">Minimaal 50 tekens voor een goede review.</span>
    </div>
    <div class="frv-field">
      <label class="frv-label">Wat waardeer je het meest?</label>
      <div class="frv-tags">
        {["Communicatie", "Resultaten", "Snelheid", "Creativiteit", "Kennis & expertise", "Transparantie", "Prijs-kwaliteit"].map(t => (
          <label class="frv-tag-item">
            <input class="frv-tag-check" type="checkbox" name="highlights" value={t} />
            <span>{t}</span>
          </label>
        ))}
      </div>
    </div>
    <label class="frv-check-label">
      <input class="frv-check" type="checkbox" name="public_consent" required />
      Ik geef toestemming om deze review publiek te plaatsen
    </label>
    <button class="frv-submit" type="submit">{submitLabel}</button>
  </form>
</div>

<style>
  .frv-wrap { max-width: 600px; padding: 2rem 0; }
  .frv-header { margin-bottom: 1.75rem; }
  .frv-heading { font-size: 1.75rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.5rem; }
  .frv-subtext { font-size: 0.95rem; color: #666; margin: 0; }
  .frv-form { display: flex; flex-direction: column; gap: 1.25rem; }
  .frv-stars-field { display: flex; flex-direction: column; gap: 0.5rem; }
  .frv-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .frv-stars {
    display: flex; flex-direction: row-reverse; gap: 0.25rem;
    width: fit-content;
  }
  .frv-star { cursor: pointer; }
  .frv-star-input { display: none; }
  .frv-star-icon { font-size: 2rem; color: #ddd; transition: color 0.1s; display: block; }
  .frv-star:hover .frv-star-icon,
  .frv-star:hover ~ .frv-star .frv-star-icon { color: #f59e0b; }
  .frv-star-input:checked ~ .frv-star .frv-star-icon,
  .frv-star:has(.frv-star-input:checked) .frv-star-icon { color: #f59e0b; }
  .frv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  @media (max-width: 480px) { .frv-row { grid-template-columns: 1fr; } }
  .frv-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .frv-input, .frv-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%;
  }
  .frv-input:focus, .frv-textarea:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .frv-textarea { resize: vertical; min-height: 120px; }
  .frv-hint { font-size: 0.75rem; color: #999; }
  .frv-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .frv-tag-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; background: #f5f5f5; border-radius: 20px; font-size: 0.83rem; color: #444; cursor: pointer; border: 1.5px solid transparent; }
  .frv-tag-item:has(input:checked) { background: #eef2ff; color: var(--color-accent, #6366f1); border-color: var(--color-accent, #6366f1); }
  .frv-tag-check { display: none; }
  .frv-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: #555; cursor: pointer; }
  .frv-check { accent-color: var(--color-accent, #6366f1); flex-shrink: 0; margin-top: 2px; }
  .frv-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;
  }
  .frv-submit:hover { opacity: 0.88; }
</style>