FormOnboarding Forms

---
/**
 * FormOnboarding — onboarding-intake: bedrijf, branche, doel en budget.
 *
 * Props:
 * - stepBadge?: string
 * - headline?: string
 * - sub?: string
 * - sectors?: string[]
 * - companySizes?: string[]
 * - goals?: string[]
 * - budgets?: string[]
 * - button?: string
 * - action?: string
 */
interface Props {
  stepBadge?: string;
  headline?: string;
  sub?: string;
  sectors?: string[];
  companySizes?: string[];
  goals?: string[];
  budgets?: string[];
  button?: string;
  action?: string;
}
const {
  stepBadge = 'Stap 1 van 1',
  headline = 'Vertel ons over jouw bedrijf',
  sub = 'We gebruiken deze informatie om jouw strategie op maat te maken.',
  sectors = ['E-commerce', 'B2B Software & SaaS', 'Professionele dienstverlening', 'Horeca & Retail', 'Zorg & Welzijn', 'Overig'],
  companySizes = ['1–5 medewerkers', '6–20 medewerkers', '21–100 medewerkers', '100+ medewerkers'],
  goals = ['Meer websitebezoekers via SEO', 'Hogere ROAS op betaalde advertenties', 'Meer leads genereren', 'Merkbekendheid vergroten', 'Complete digitale transformatie'],
  budgets = ['Minder dan € 500', '€ 500 – € 1.500', '€ 1.500 – € 5.000', 'Meer dan € 5.000'],
  button = 'Onboarding afronden',
  action = '#',
} = Astro.props;
---

<section class="bl-section fon">
  <div class="bl-inner bl-inner--narrow fon__inner">
    <div class="fon__header">
      {stepBadge && <div class="fon__step-badge">{stepBadge}</div>}
      <h2 class="fon__headline">{headline}</h2>
      {sub && <p class="fon__sub">{sub}</p>}
    </div>
    <form class="fon__form" action={action} novalidate>
      <div class="fon__row">
        <div class="fon__field"><label class="fon__label" for="fon-bedrijf">Bedrijfsnaam</label><input class="fon__input" id="fon-bedrijf" type="text" placeholder="Mijn Bedrijf BV" required /></div>
        <div class="fon__field"><label class="fon__label" for="fon-website">Website</label><input class="fon__input" id="fon-website" type="url" placeholder="https://mijnbedrijf.nl" /></div>
      </div>
      <div class="fon__row">
        <div class="fon__field">
          <label class="fon__label" for="fon-sector">Branche</label>
          <select class="fon__select" id="fon-sector">
            <option value="" disabled selected>Kies je branche</option>
            {sectors.map((s) => <option>{s}</option>)}
          </select>
        </div>
        <div class="fon__field">
          <label class="fon__label" for="fon-grootte">Bedrijfsgrootte</label>
          <select class="fon__select" id="fon-grootte">
            {companySizes.map((s) => <option>{s}</option>)}
          </select>
        </div>
      </div>
      <div class="fon__field">
        <label class="fon__label" for="fon-doel">Wat is jouw belangrijkste marketingdoel?</label>
        <select class="fon__select" id="fon-doel">
          <option value="" disabled selected>Kies je doel</option>
          {goals.map((g) => <option>{g}</option>)}
        </select>
      </div>
      <div class="fon__field">
        <label class="fon__label" for="fon-budget">Maandelijks marketingbudget</label>
        <select class="fon__select" id="fon-budget">
          <option value="" disabled selected>Kies je budget</option>
          {budgets.map((b) => <option>{b}</option>)}
        </select>
      </div>
      <div class="fon__field"><label class="fon__label" for="fon-extra">Extra context (optioneel)</label><textarea class="fon__textarea" id="fon-extra" rows="3" placeholder="Vertel ons over je huidige uitdagingen, concurrenten of specifieke wensen…"></textarea></div>
      <button class="fon__btn" type="submit">{button}</button>
    </form>
  </div>
</section>

<style>
.fon{background:#fff}
.fon__header{margin-bottom:2rem}
.fon__step-badge{display:inline-block;background:#ede9fe;color:var(--color-accent, #6366f1);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;margin-bottom:.75rem}
.fon__headline{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.03em;margin:0 0 .5rem}
.fon__sub{color:#6b7280;font-size:1rem;margin:0;line-height:1.6}
.fon__form{display:flex;flex-direction:column;gap:1.25rem}
.fon__row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.fon__field{display:flex;flex-direction:column;gap:.4rem}
.fon__label{font-size:1rem;font-weight:600;color:#374151}
.fon__input,.fon__select,.fon__textarea{padding:.7rem 1rem;border:1.5px solid #d1d5db;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fon__input:focus,.fon__select:focus,.fon__textarea:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fon__textarea{resize:vertical}
.fon__btn{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;align-self:flex-start;font-family:inherit}
.fon__btn:hover{opacity:.88}
@media(min-width:600px){.fon__row{grid-template-columns:1fr 1fr}}
</style>