FormRegister Forms

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

const {
  heading = "Account aanmaken",
  subtext = "Maak gratis een account aan en krijg toegang tot het BLURR klantenportaal.",
  submitLabel = "Account aanmaken",
  loginHref = "/inloggen",
} = Astro.props;
---

<div class="frg-wrap">
  <div class="frg-header">
    <div class="frg-logo" aria-hidden="true">B</div>
    {heading && <h1 class="frg-heading">{heading}</h1>}
    {subtext && <p class="frg-subtext">{subtext}</p>}
  </div>
  <form class="frg-form" onsubmit="return false;" novalidate>
    <div class="frg-row">
      <div class="frg-field">
        <label class="frg-label" for="frg-first">Voornaam *</label>
        <input class="frg-input" type="text" id="frg-first" name="first_name" placeholder="Jan" required autocomplete="given-name" />
      </div>
      <div class="frg-field">
        <label class="frg-label" for="frg-last">Achternaam *</label>
        <input class="frg-input" type="text" id="frg-last" name="last_name" placeholder="de Vries" required autocomplete="family-name" />
      </div>
    </div>
    <div class="frg-field">
      <label class="frg-label" for="frg-email">E-mailadres *</label>
      <input class="frg-input" type="email" id="frg-email" name="email" placeholder="jan@bedrijf.nl" required autocomplete="email" />
    </div>
    <div class="frg-field">
      <label class="frg-label" for="frg-company">Bedrijfsnaam</label>
      <input class="frg-input" type="text" id="frg-company" name="company" placeholder="Jouw bedrijf BV" autocomplete="organization" />
    </div>
    <div class="frg-field">
      <label class="frg-label" for="frg-pw">Wachtwoord *</label>
      <input class="frg-input" type="password" id="frg-pw" name="password" placeholder="Minimaal 8 tekens" required autocomplete="new-password" />
      <span class="frg-hint">Gebruik minimaal 8 tekens, inclusief een cijfer en een hoofdletter.</span>
    </div>
    <div class="frg-field">
      <label class="frg-label" for="frg-pw2">Herhaal wachtwoord *</label>
      <input class="frg-input" type="password" id="frg-pw2" name="password_confirm" placeholder="••••••••" required autocomplete="new-password" />
    </div>
    <label class="frg-check-label">
      <input class="frg-check" type="checkbox" name="terms" required />
      Ik ga akkoord met de <a href="/voorwaarden" class="frg-link">algemene voorwaarden</a> en <a href="/privacy" class="frg-link">privacyverklaring</a>
    </label>
    <button class="frg-submit" type="submit">{submitLabel}</button>
    <p class="frg-login">Al een account? <a class="frg-link" href={loginHref}>Log hier in</a></p>
  </form>
</div>

<style>
  .frg-wrap {
    max-width: 460px; margin: 0 auto; padding: 2.5rem;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
  }
  .frg-header { text-align: center; margin-bottom: 2rem; }
  .frg-logo {
    width: 48px; height: 48px; background: var(--color-accent, #6366f1);
    color: #fff; border-radius: 12px; font-size: 1.5rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  }
  .frg-heading { font-size: 1.5rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.4rem; }
  .frg-subtext { font-size: 0.875rem; color: #666; margin: 0; }
  .frg-form { display: flex; flex-direction: column; gap: 1rem; }
  .frg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 480px) { .frg-row { grid-template-columns: 1fr; } }
  .frg-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .frg-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .frg-input {
    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;
  }
  .frg-input:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .frg-hint { font-size: 0.75rem; color: #999; }
  .frg-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: #555; cursor: pointer; line-height: 1.4; }
  .frg-check { accent-color: var(--color-accent, #6366f1); flex-shrink: 0; margin-top: 2px; }
  .frg-link { color: var(--color-accent, #6366f1); text-decoration: none; font-weight: 500; }
  .frg-submit {
    padding: 0.9rem; background: var(--color-accent, #6366f1); color: #fff;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s; margin-top: 0.25rem;
  }
  .frg-submit:hover { opacity: 0.88; }
  .frg-login { font-size: 0.85rem; color: #666; text-align: center; margin: 0.25rem 0 0; }
</style>