FormOnboarding Forms

---
/**
 * FormOnboarding
 * Onboarding-formulier met bedrijfsinformatie
 */
interface Props {
  headline?: string;
  sub?: string;
}
const {
  headline = 'Vertel ons over jouw bedrijf',
  sub = 'We gebruiken deze informatie om jouw strategie op maat te maken.',
} = Astro.props;
---

<section class="fon">
  <div class="fon__inner">
    <div class="fon__header">
      <div class="fon__step-badge">Stap 1 van 1</div>
      <h2 class="fon__headline">{headline}</h2>
      <p class="fon__sub">{sub}</p>
    </div>
    <form class="fon__form" 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>
            <option>E-commerce</option>
            <option>B2B Software &amp; SaaS</option>
            <option>Professionele dienstverlening</option>
            <option>Horeca &amp; Retail</option>
            <option>Zorg &amp; Welzijn</option>
            <option>Overig</option>
          </select>
        </div>
        <div class="fon__field">
          <label class="fon__label" for="fon-grootte">Bedrijfsgrootte</label>
          <select class="fon__select" id="fon-grootte">
            <option>1–5 medewerkers</option>
            <option>6–20 medewerkers</option>
            <option>21–100 medewerkers</option>
            <option>100+ medewerkers</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>
          <option>Meer websitebezoekers via SEO</option>
          <option>Hogere ROAS op betaalde advertenties</option>
          <option>Meer leads genereren</option>
          <option>Merkbekendheid vergroten</option>
          <option>Complete digitale transformatie</option>
        </select>
      </div>
      <div class="fon__field">
        <label class="fon__label" for="fon-budget">Maandelijks marketing­budget</label>
        <select class="fon__select" id="fon-budget">
          <option value="" disabled selected>Kies je budget</option>
          <option>Minder dan € 500</option>
          <option>€ 500 – € 1.500</option>
          <option>€ 1.500 – € 5.000</option>
          <option>Meer dan € 5.000</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">Onboarding afronden</button>
    </form>
  </div>
</section>

<style>
  .fon {
    background: #fff;
    padding: 4rem 1.5rem;
  }
  .fon__inner {
    max-width: 680px;
    margin: 0 auto;
  }
  .fon__header {
    margin-bottom: 2rem;
  }
  .fon__step-badge {
    display: inline-block;
    background: #ede9fe;
    color: var(--color-accent, #6366f1);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    margin-bottom: 0.75rem;
  }
  .fon__headline {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .fon__sub {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
  }
  .fon__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .fon__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .fon__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .fon__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }
  .fon__input,
  .fon__select,
  .fon__textarea {
    padding: 0.7rem 1rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.93rem;
    color: var(--color-primary, #0a0a0a);
    background: #fafafa;
    outline: none;
    font-family: inherit;
    transition: border-color 0.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: 0.9rem 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;
    font-family: inherit;
  }
  .fon__btn:hover { opacity: 0.88; }
  @media (max-width: 560px) {
    .fon__row { grid-template-columns: 1fr; }
  }
</style>