FormDownload Forms

---
/**
 * FormDownload — resource-download (whitepaper): cover + benefits links, formulier rechts.
 *
 * Props:
 * - badge?: string
 * - resourceTitle?: string
 * - benefits?: string[]
 * - image?: string
 * - imageAlt?: string
 * - heading?: string
 * - newsletterLabel?: string
 * - button?: string
 * - disclaimer?: string
 * - privacyHref?: string
 * - action?: string
 */
interface Props {
  badge?: string;
  resourceTitle?: string;
  benefits?: string[];
  image?: string;
  imageAlt?: string;
  heading?: string;
  newsletterLabel?: string;
  button?: string;
  disclaimer?: string;
  privacyHref?: string;
  action?: string;
}
const {
  badge = 'Gratis whitepaper',
  resourceTitle = 'De ultieme Google Ads gids voor Nederlandse bedrijven',
  benefits = ['42 pagina’s vol praktische tips', 'Exclusieve benchmark data', 'Campagnestructuren die werken'],
  image = '/img/ext/photo-1581291518633-83b4ebd1d83e-w400-ea3a91.jpg',
  imageAlt = 'Cover van de whitepaper',
  heading = 'Download de whitepaper gratis',
  newsletterLabel = 'Ja, stuur mij ook de marketing nieuwsbrief',
  button = 'Download nu gratis',
  disclaimer = 'We delen je gegevens nooit met derden.',
  privacyHref = '/privacy',
  action = '#',
} = Astro.props;
---

<section class="bl-section fdl">
  <div class="bl-inner fdl-inner">
    <div class="fdl-wrap">
      <div class="fdl-resource">
        <div class="fdl-cover">
          <img data-allow-img class="fdl-cover-img" src={image} alt={imageAlt} loading="lazy" decoding="async" />
          {badge && <div class="fdl-cover-badge">{badge}</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">&#10003;</span> {b}</li>
            ))}
          </ul>
        </div>
      </div>
      <div class="fdl-form-area">
        <h2 class="fdl-heading">{heading}</h2>
        <form class="fdl-form" action={action} 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="Je e-mailadres" 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>
          {newsletterLabel && (
            <label class="fdl-check-label"><input class="fdl-check" type="checkbox" name="newsletter" /> {newsletterLabel}</label>
          )}
          <button class="fdl-submit" type="submit">{button} &rarr;</button>
          {disclaimer && (
            <p class="fdl-disclaimer">{disclaimer} <a href={privacyHref} class="fdl-link">Privacyverklaring</a></p>
          )}
        </form>
      </div>
    </div>
  </div>
</section>

<style>
.fdl-wrap{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start}
.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:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .7rem;border-radius:4px}
.fdl-resource-title{font-size:1.25rem;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:.5rem}
.fdl-benefit{font-size:1rem;color:#374151;display:flex;gap:.5rem;align-items:flex-start}
.fdl-benefit span{color:#16a34a;font-weight:700;flex-shrink:0}
.fdl-heading{font-size:clamp(1.4rem,3vw,1.75rem);font-weight:800;color:var(--color-primary, #0a0a0a);letter-spacing:-.02em;margin:0 0 1.5rem}
.fdl-form{display:flex;flex-direction:column;gap:1rem}
.fdl-field{display:flex;flex-direction:column;gap:.35rem}
.fdl-label{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fdl-input{padding:.7rem .9rem;border:1.5px solid #d1d5db;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .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 #6366f11f}
.fdl-check-label{display:flex;align-items:flex-start;gap:.5rem;font-size:.9375rem;color:#374151;cursor:pointer}
.fdl-check{accent-color:var(--color-accent, #6366f1);flex-shrink:0;margin-top:2px}
.fdl-submit{padding:.9rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.fdl-submit:hover{opacity:.88}
.fdl-disclaimer{font-size:.875rem;color:#6b7280;margin:.25rem 0 0}
.fdl-link{color:var(--color-accent, #6366f1)}
@media(min-width:760px){.fdl-wrap{grid-template-columns:1fr 1fr}}
</style>