FormNewsletter Forms

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

const {
  heading = "Blijf op de hoogte",
  subtext = "Ontvang maandelijks onze beste marketing insights, case studies en groeistrategie tips. Geen spam. Altijd afmeldbaar.",
  submitLabel = "Aanmelden",
  compact = false,
} = Astro.props;
---

<div class={`fnl-wrap${compact ? " fnl-wrap--compact" : ""}`}>
  {!compact && (
    <div class="fnl-header">
      {heading && <h2 class="fnl-heading">{heading}</h2>}
      {subtext && <p class="fnl-subtext">{subtext}</p>}
    </div>
  )}
  <form class="fnl-form" onsubmit="return false;" novalidate>
    {!compact && (
      <div class="fnl-row">
        <div class="fnl-field">
          <label class="fnl-label" for="fnl-name">Voornaam</label>
          <input class="fnl-input" type="text" id="fnl-name" name="first_name" placeholder="Jouw voornaam" autocomplete="given-name" />
        </div>
        <div class="fnl-field">
          <label class="fnl-label" for="fnl-email">E-mailadres *</label>
          <input class="fnl-input" type="email" id="fnl-email" name="email" placeholder="jij@bedrijf.nl" required autocomplete="email" />
        </div>
      </div>
    )}
    {compact && (
      <input class="fnl-input" type="email" name="email" placeholder="Jouw e-mailadres" required autocomplete="email" aria-label="E-mailadres" />
    )}
    {!compact && (
      <div class="fnl-checkgroup">
        <p class="fnl-check-label-head">Interesses (optioneel):</p>
        <div class="fnl-checks">
          {["Performance marketing", "SEO & content", "Social media", "Design & branding"].map(t => (
            <label class="fnl-check-item">
              <input class="fnl-check" type="checkbox" name="interests" value={t} />
              {t}
            </label>
          ))}
        </div>
      </div>
    )}
    <button class="fnl-submit" type="submit">{submitLabel}</button>
    {!compact && <p class="fnl-disclaimer">Door je aan te melden ga je akkoord met onze <a href="/privacy" class="fnl-link">privacyverklaring</a>.</p>}
  </form>
</div>

<style>
  .fnl-wrap { max-width: 560px; padding: 2rem 0; }
  .fnl-wrap--compact { max-width: 100%; padding: 0; }
  .fnl-header { margin-bottom: 1.75rem; }
  .fnl-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .fnl-subtext { font-size: 0.95rem; color: #666; margin: 0; }
  .fnl-form { display: flex; flex-direction: column; gap: 1.25rem; }
  .fnl-wrap--compact .fnl-form { flex-direction: row; align-items: flex-end; gap: 0.75rem; }
  .fnl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  @media (max-width: 480px) { .fnl-row { grid-template-columns: 1fr; } }
  .fnl-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .fnl-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fnl-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;
    flex: 1;
  }
  .fnl-input:focus {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  }
  .fnl-checkgroup { background: #f9f9f9; border-radius: 8px; padding: 1rem 1.25rem; }
  .fnl-check-label-head { font-size: 0.85rem; font-weight: 600; color: #555; margin: 0 0 0.75rem; }
  .fnl-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .fnl-check-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #444; cursor: pointer; }
  .fnl-check { accent-color: var(--color-accent, #6366f1); }
  .fnl-submit {
    padding: 0.85rem 1.75rem;
    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;
    white-space: nowrap;
    align-self: flex-start;
  }
  .fnl-wrap--compact .fnl-submit { align-self: auto; }
  .fnl-submit:hover { opacity: 0.88; }
  .fnl-disclaimer { font-size: 0.8rem; color: #999; margin: 0; }
  .fnl-link { color: var(--color-accent, #6366f1); }
</style>