FormJobApplication Forms

---
/**
 * FormJobApplication
 * Sollicitatieformulier met CV-upload-gebied
 */
interface Props {
  position?: string;
  headline?: string;
}
const {
  position = 'Online Marketeer',
  headline = 'Solliciteer direct',
} = Astro.props;
---

<section class="fja">
  <div class="fja__inner">
    <div class="fja__header">
      <span class="fja__position-badge">Vacature: {position}</span>
      <h2 class="fja__headline">{headline}</h2>
      <p class="fja__sub">Overtuig ons met jouw motivatie en ervaring. We lezen elke sollicitatie persoonlijk.</p>
    </div>
    <form class="fja__form" 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="sofie@mail.nl" 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="+31 6 12 34 56 78" />
        </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">
        <label class="fja__label">CV uploaden</label>
        <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"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
          </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">Sollicitatie versturen</button>
    </form>
  </div>
</section>

<style>
  .fja {
    background: #fff;
    padding: 4rem 1.5rem;
  }
  .fja__inner {
    max-width: 680px;
    margin: 0 auto;
  }
  .fja__header {
    margin-bottom: 2rem;
  }
  .fja__position-badge {
    display: inline-block;
    background: #ede9fe;
    color: var(--color-accent, #6366f1);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    margin-bottom: 0.75rem;
  }
  .fja__headline {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .fja__sub {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
  }
  .fja__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .fja__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .fja__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .fja__label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }
  .fja__input,
  .fja__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;
  }
  .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: 0.5rem;
    padding: 2rem;
    border: 2px dashed #d4d4d8;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    color: #888;
    transition: border-color 0.2s, background 0.2s;
    background: #fafafa;
  }
  .fja__upload:hover {
    border-color: var(--color-accent, #6366f1);
    background: #f3f4ff;
    color: var(--color-accent, #6366f1);
  }
  .fja__upload svg { opacity: 0.6; }
  .fja__upload-text { font-size: 0.9rem; }
  .fja__upload-hint { font-size: 0.78rem; color: #aaa; }
  .fja__file-hidden {
    display: none;
  }
  .fja__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;
  }
  .fja__btn:hover { opacity: 0.88; }
  @media (max-width: 560px) {
    .fja__row { grid-template-columns: 1fr; }
  }
</style>