FormJobApplication Forms

---
/**
 * FormJobApplication — sollicitatieformulier met vacature-badge, NAW-velden,
 * motivatiebrief en CV-upload.
 *
 * Props:
 * - badge?: string
 * - headline?: string
 * - sub?: string
 * - button?: string
 * - action?: string
 */
interface Props {
  badge?: string;
  headline?: string;
  sub?: string;
  button?: string;
  action?: string;
}
const {
  badge = 'Vacature: Google Ads Specialist',
  headline = 'Solliciteer bij ons',
  sub = 'Overtuig ons met jouw motivatie en ervaring. We lezen elke sollicitatie persoonlijk.',
  button = 'Sollicitatie versturen',
  action = '#',
} = Astro.props;
---

<section class="bl-section fja">
  <div class="bl-inner bl-inner--narrow fja__inner">
    <div class="fja__header">
      {badge && <span class="fja__position-badge">{badge}</span>}
      <h2 class="fja__headline">{headline}</h2>
      {sub && <p class="fja__sub">{sub}</p>}
    </div>
    <form class="fja__form" action={action} novalidate>
      <div class="fja__row">
        <div class="fja__field"><label class="fja__label" for="fja-voornaam">Voornaam</label><input class="fja__input" id="fja-voornaam" type="text" placeholder="Sofie" required /></div>
        <div class="fja__field"><label class="fja__label" for="fja-achternaam">Achternaam</label><input class="fja__input" id="fja-achternaam" type="text" placeholder="Vermeer" required /></div>
      </div>
      <div class="fja__row">
        <div class="fja__field"><label class="fja__label" for="fja-email">E-mail</label><input class="fja__input" id="fja-email" type="email" placeholder="Je e-mailadres" required /></div>
        <div class="fja__field"><label class="fja__label" for="fja-tel">Telefoon</label><input class="fja__input" id="fja-tel" type="tel" placeholder="Je telefoonnummer" /></div>
      </div>
      <div class="fja__field"><label class="fja__label" for="fja-linkedin">LinkedIn-profiel (optioneel)</label><input class="fja__input" id="fja-linkedin" type="url" placeholder="https://linkedin.com/in/sofie-vermeer" /></div>
      <div class="fja__field"><label class="fja__label" for="fja-motivatie">Motivatiebrief</label><textarea class="fja__textarea" id="fja-motivatie" rows="5" placeholder="Vertel ons waarom jij de ideale kandidaat bent voor deze functie…" required></textarea></div>
      <div class="fja__field">
        <span class="fja__label">CV uploaden</span>
        <label class="fja__upload" for="fja-cv">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
          <span class="fja__upload-text">Sleep je CV hierheen of <strong>klik om te uploaden</strong></span>
          <span class="fja__upload-hint">PDF of Word, max. 5 MB</span>
          <input id="fja-cv" type="file" accept=".pdf,.doc,.docx" class="fja__file-hidden" />
        </label>
      </div>
      <button class="fja__btn" type="submit">{button}</button>
    </form>
  </div>
</section>

<style>
.fja{background:#fff}
.fja__header{margin-bottom:2rem}
.fja__position-badge{display:inline-block;background:#ede9fe;color:var(--color-accent, #6366f1);font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;margin-bottom:.75rem}
.fja__headline{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.03em;margin:0 0 .5rem}
.fja__sub{color:#6b7280;font-size:1rem;margin:0;line-height:1.6}
.fja__form{display:flex;flex-direction:column;gap:1.25rem}
.fja__row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.fja__field{display:flex;flex-direction:column;gap:.4rem}
.fja__label{font-size:1rem;font-weight:600;color:#374151}
.fja__input,.fja__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}
.fja__input:focus,.fja__textarea:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fja__textarea{resize:vertical}
.fja__upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;border:2px dashed #d4d4d8;border-radius:10px;cursor:pointer;text-align:center;color:#6b7280;transition:border-color .2s,background .2s;background:#fafafa}
.fja__upload:hover{border-color:var(--color-accent, #6366f1);background:#f3f4ff;color:var(--color-accent, #6366f1)}
.fja__upload svg{opacity:.6}
.fja__upload-text{font-size:1rem}
.fja__upload-hint{font-size:.875rem;color:#6b7280}
.fja__file-hidden{display:none}
.fja__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}
.fja__btn:hover{opacity:.88}
@media(min-width:600px){.fja__row{grid-template-columns:1fr 1fr}}
</style>