FormDownload Forms

---
interface Props {
  resourceTitle?: string;
  resourceType?: string;
  coverSrc?: string;
  heading?: string;
  benefits?: string[];
  submitLabel?: string;
}

const {
  resourceTitle = "De ultieme Google Ads gids voor Nederlandse bedrijven",
  resourceType = "Gratis whitepaper",
  coverSrc = "https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=400&q=80",
  heading = "Download de whitepaper gratis",
  benefits = [
    "42 pagina's vol praktische tips",
    "Exclusieve benchmark data 2024",
    "Campagnestructuren die werken",
  ],
  submitLabel = "Download nu gratis →",
} = Astro.props;
---

<div class="fdl-wrap">
  <div class="fdl-resource">
    {coverSrc && (
      <div class="fdl-cover">
        <img class="fdl-cover-img" src={coverSrc} alt={resourceTitle} loading="lazy" />
        <div class="fdl-cover-badge">{resourceType}</div>
      </div>
    )}
    <div class="fdl-resource-info">
      <h3 class="fdl-resource-title">{resourceTitle}</h3>
      <ul class="fdl-benefits">
        {benefits.map(b => (
          <li class="fdl-benefit"><span aria-hidden="true">✓</span> {b}</li>
        ))}
      </ul>
    </div>
  </div>
  <div class="fdl-form-area">
    <h2 class="fdl-heading">{heading}</h2>
    <form class="fdl-form" onsubmit="return false;" novalidate>
      <div class="fdl-field">
        <label class="fdl-label" for="fdl-name">Voornaam *</label>
        <input class="fdl-input" type="text" id="fdl-name" name="name" placeholder="Jouw naam" required autocomplete="given-name" />
      </div>
      <div class="fdl-field">
        <label class="fdl-label" for="fdl-email">Zakelijk e-mailadres *</label>
        <input class="fdl-input" type="email" id="fdl-email" name="email" placeholder="jij@bedrijf.nl" required autocomplete="email" />
      </div>
      <div class="fdl-field">
        <label class="fdl-label" for="fdl-company">Bedrijfsnaam</label>
        <input class="fdl-input" type="text" id="fdl-company" name="company" placeholder="Jouw bedrijf" autocomplete="organization" />
      </div>
      <label class="fdl-check-label">
        <input class="fdl-check" type="checkbox" name="newsletter" />
        Ja, stuur mij ook de BLURR marketing nieuwsbrief
      </label>
      <button class="fdl-submit" type="submit">{submitLabel}</button>
      <p class="fdl-disclaimer">We delen je gegevens nooit met derden. <a href="/privacy" class="fdl-link">Privacyverklaring</a></p>
    </form>
  </div>
</div>

<style>
  .fdl-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    align-items: start; padding: 2rem 0;
  }
  @media (max-width: 640px) { .fdl-wrap { grid-template-columns: 1fr; } }
  .fdl-resource { display: flex; flex-direction: column; gap: 1.5rem; }
  .fdl-cover { position: relative; }
  .fdl-cover-img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; display: block; }
  .fdl-cover-badge {
    position: absolute; top: 1rem; left: 1rem;
    background: var(--color-accent, #6366f1); color: #fff;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem; border-radius: 4px;
  }
  .fdl-resource-title { font-size: 1.2rem; font-weight: 700; color: var(--color-primary, #0a0a0a); margin: 0 0 1rem; }
  .fdl-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .fdl-benefit { font-size: 0.9rem; color: #333; display: flex; gap: 0.5rem; align-items: flex-start; }
  .fdl-benefit span { color: #22c55e; font-weight: 700; flex-shrink: 0; }
  .fdl-heading { font-size: 1.4rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 1.5rem; }
  .fdl-form { display: flex; flex-direction: column; gap: 1rem; }
  .fdl-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .fdl-label { font-size: 0.83rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fdl-input {
    padding: 0.7rem 0.9rem; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 0.925rem; color: var(--color-primary, #0a0a0a); background: #fff;
    transition: border-color 0.2s; font-family: inherit; box-sizing: border-box;
  }
  .fdl-input:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fdl-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: #555; cursor: pointer; }
  .fdl-check { accent-color: var(--color-accent, #6366f1); flex-shrink: 0; margin-top: 2px; }
  .fdl-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;
  }
  .fdl-submit:hover { opacity: 0.88; }
  .fdl-disclaimer { font-size: 0.78rem; color: #999; margin: 0.25rem 0 0; }
  .fdl-link { color: var(--color-accent, #6366f1); }
</style>