CtaFreeTrial CTA

---
/**
 * CtaFreeTrial
 * Proefperiode-CTA: kop, sub, een rij voordelen met vinkjes, één knop en een
 * geruststellende notitie. Gecentreerd op een zacht verloop.
 *
 * Props:
 * - headline: string
 * - sub?: string
 * - features?: string[]
 * - cta?: { label: string; href: string }
 * - note?: string
 */
interface Props {
  headline: string;
  sub?: string;
  features?: string[];
  cta?: { label: string; href: string };
  note?: string;
}
const { headline, sub, features = [], cta, note } = Astro.props;
---

<section class="bl-section ctaft">
  <div class="bl-inner bl-inner--narrow ctaft-inner">
    <h2 class="ctaft-headline">{headline}</h2>
    {sub && <p class="ctaft-sub">{sub}</p>}
    {features.length > 0 && (
      <div class="ctaft-features">
        {features.map((f) => (
          <span class="ctaft-feature"><span class="ctaft-check" aria-hidden="true">&#10003;</span>{f}</span>
        ))}
      </div>
    )}
    {cta && (
      <div class="ctaft-action">
        <a href={cta.href} class="ctaft-btn">{cta.label}</a>
        {note && <p class="ctaft-note">{note}</p>}
      </div>
    )}
  </div>
</section>

<style>
.ctaft{background:linear-gradient(160deg,#f8fafc,#eff6ff);border-top:1px solid #e5e7eb}
.ctaft-inner{text-align:center}
.ctaft-headline{font-size:clamp(1.875rem,4vw,3rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 1rem}
.ctaft-sub{font-size:1.125rem;color:#4b5563;line-height:1.65;margin:0 0 2rem}
.ctaft-features{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-bottom:2.5rem}
.ctaft-feature{display:flex;align-items:center;gap:.375rem;font-size:.9375rem;color:#374151}
.ctaft-check{color:#10b981;font-weight:700}
.ctaft-action{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ctaft-btn{padding:1rem 2.75rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:1.0625rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-flex}
.ctaft-btn:hover{opacity:.88;transform:translateY(-1px)}
.ctaft-note{font-size:.875rem;color:#6b7280;margin:0}
</style>