CtaNewsletter CTA

---
/**
 * CtaNewsletter
 * Nieuwsbrief-CTA: eyebrow, kop, sub, inline aanmeldformulier en disclaimer.
 * Achtergrond via variant (light/white/dark).
 *
 * Props:
 * - eyebrow?: string
 * - headline: string
 * - sub?: string
 * - placeholder?: string
 * - button?: string
 * - disclaimer?: string
 * - action?: string
 * - variant?: 'light' | 'white' | 'dark'   default 'light'
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  placeholder?: string;
  button?: string;
  disclaimer?: string;
  action?: string;
  variant?: 'light' | 'white' | 'dark';
}
const {
  eyebrow,
  headline,
  sub,
  placeholder = 'Je e-mailadres',
  button = 'Aanmelden',
  disclaimer,
  action = '#',
  variant = 'light',
} = Astro.props;
---

<section class:list={['bl-section', 'ctanl', `ctanl--${variant}`]}>
  <div class="bl-inner bl-inner--narrow ctanl-inner">
    {eyebrow && <span class="ctanl-eyebrow">{eyebrow}</span>}
    <h2 class="ctanl-headline">{headline}</h2>
    {sub && <p class="ctanl-sub">{sub}</p>}
    <form class="ctanl-form" action={action} method="post">
      <label class="ctanl-sr" for="ctanl-email">E-mailadres</label>
      <input id="ctanl-email" type="email" name="email" class="ctanl-input" placeholder={placeholder} autocomplete="email" required />
      <button type="submit" class="ctanl-btn">{button}</button>
    </form>
    {disclaimer && <p class="ctanl-disclaimer">{disclaimer}</p>}
  </div>
</section>

<style>
.ctanl--white{background:#fff;border-top:1px solid #e5e7eb}
.ctanl--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.ctanl--dark{background:#0a0a0a}
.ctanl-inner{text-align:center}
.ctanl-eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.ctanl-headline{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin:0 0 .875rem}
.ctanl--white .ctanl-headline,.ctanl--light .ctanl-headline{color:#0a0a0a}
.ctanl--dark .ctanl-headline{color:#fff}
.ctanl-sub{font-size:1.0625rem;line-height:1.65;margin:0 0 2rem}
.ctanl--white .ctanl-sub,.ctanl--light .ctanl-sub{color:#4b5563}
.ctanl--dark .ctanl-sub{color:#aaa}
.ctanl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ctanl-form{display:flex;gap:.625rem;width:min(460px,100%);margin-inline:auto}
.ctanl-input{flex:1;padding:.8125rem 1rem;border-radius:.5rem;font-size:1rem;outline:none;transition:border-color .2s;min-width:0}
.ctanl--white .ctanl-input,.ctanl--light .ctanl-input{border:1.5px solid #d1d5db;background:#fff;color:#0a0a0a}
.ctanl--dark .ctanl-input{border:1.5px solid rgba(255,255,255,.18);background:#ffffff0d;color:#fff}
.ctanl--dark .ctanl-input::placeholder{color:#999}
.ctanl-input:focus{border-color:var(--color-accent,#6366f1)}
.ctanl-btn{padding:.8125rem 1.5rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:1rem;border:none;border-radius:.5rem;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.ctanl-btn:hover{opacity:.88}
.ctanl-disclaimer{font-size:.8125rem;margin:1rem 0 0}
.ctanl--white .ctanl-disclaimer,.ctanl--light .ctanl-disclaimer{color:#6b7280}
.ctanl--dark .ctanl-disclaimer{color:#999}
@media (max-width:520px){
  .ctanl-form{flex-direction:column}
  .ctanl-btn{width:100%}
}
</style>