FormLeadMagnet Forms

---
/**
 * FormLeadMagnet — donker lead-magnet blok: pitch links, beknopt opt-in formulier rechts.
 *
 * Props:
 * - tag?: string
 * - headline?: string
 * - sub?: string
 * - benefit?: string
 * - namePlaceholder?: string
 * - emailPlaceholder?: string
 * - button?: string
 * - privacy?: string
 * - action?: string
 */
interface Props {
  tag?: string;
  headline?: string;
  sub?: string;
  benefit?: string;
  namePlaceholder?: string;
  emailPlaceholder?: string;
  button?: string;
  privacy?: string;
  action?: string;
}
const {
  tag = 'Gratis resource',
  headline = 'Download de gratis Google Ads gids',
  sub = 'Voor ambitieuze MKB-ondernemers',
  benefit = '100% gratis, direct in je inbox',
  namePlaceholder = 'Voornaam',
  emailPlaceholder = 'E-mailadres',
  button = 'Stuur mij de gids',
  privacy = 'We respecteren jouw privacy. Afmelden kan altijd.',
  action = '#',
} = Astro.props;
---

<section class="bl-section flm">
  <div class="bl-inner flm__inner">
    <div class="flm__box">
      <div class="flm__content">
        {tag && <p class="flm__tag">{tag}</p>}
        <h2 class="flm__headline">{headline}</h2>
        {sub && <p class="flm__sub">{sub}</p>}
        {benefit && <p class="flm__benefit">{benefit}</p>}
      </div>
      <form class="flm__form" action={action} novalidate>
        <input class="flm__input" type="text" name="name" placeholder={namePlaceholder} aria-label={namePlaceholder} required />
        <input class="flm__input" type="email" name="email" placeholder={emailPlaceholder} aria-label={emailPlaceholder} required />
        <button class="flm__btn" type="submit">{button}</button>
        {privacy && <p class="flm__privacy">{privacy}</p>}
      </form>
    </div>
  </div>
</section>

<style>
.flm{background:var(--color-primary, #0a0a0a)}
.flm__box{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.flm__tag{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a5b4fc;margin:0 0 .75rem}
.flm__headline{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 .75rem;line-height:1.2}
.flm__sub{color:#e8e8e8;font-size:1.125rem;line-height:1.6;margin:0 0 1rem}
.flm__benefit{color:#aaa;font-size:1rem;letter-spacing:.02em;margin:0}
.flm__form{display:flex;flex-direction:column;gap:.75rem}
.flm__input{padding:.8rem 1rem;border:1.5px solid #444;border-radius:8px;font-size:1rem;color:#fff;background:#1a1a1a;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.flm__input::placeholder{color:#999}
.flm__input:focus{border-color:var(--color-accent, #6366f1)}
.flm__btn{padding:.9rem 1.5rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s;width:100%}
.flm__btn:hover{opacity:.88}
.flm__privacy{font-size:.8125rem;color:#999;text-align:center;margin:0}
@media(min-width:760px){.flm__box{grid-template-columns:1fr 1fr;gap:3rem}}
</style>