CTAFreeTrial CTA

---
/**
 * CTAFreeTrial
 * CTA gericht op gratis proefperiode met feature-highlights.
 */
interface Props {
  headline: string;
  sub?: string;
  trialLabel?: string;
  trialHref: string;
  trialNote?: string;
  features?: string[];
}
const { headline, sub, trialLabel = 'Start gratis proefperiode', trialHref, trialNote = '14 dagen gratis · Geen creditcard nodig', features = [] } = Astro.props;
---
<section class="ctaft">
  <div class="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">✓</span>{f}</span>
        ))}
      </div>
    )}
    <div class="ctaft-action">
      <a href={trialHref} class="ctaft-btn">{trialLabel} →</a>
      <p class="ctaft-note">{trialNote}</p>
    </div>
  </div>
</section>
<style>
  .ctaft { background: linear-gradient(160deg, #f8fafc 0%, #eff6ff 100%); padding: 6rem 2rem; border-top: 1px solid #e5e7eb; }
  .ctaft-inner { max-width: 700px; margin: 0 auto; text-align: center; }
  .ctaft-headline { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 900; color: #0a0a0a; letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 1rem; }
  .ctaft-sub { font-size: 1.125rem; color: #6b7280; line-height: 1.65; margin: 0 0 2rem; }
  .ctaft-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-bottom: 2.5rem; }
  .ctaft-feature { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: #374151; }
  .ctaft-check { color: #10b981; font-weight: 700; }
  .ctaft-action { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .ctaft-btn { padding: 1rem 2.75rem; background: var(--color-accent,#6366f1); color: #fff; font-weight: 700; font-size: 1.0625rem; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s, transform 0.2s; display: inline-flex; }
  .ctaft-btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .ctaft-note { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
</style>