CTAFullWidth CTA

---
/**
 * CTAFullWidth
 * Brede banner CTA met gradient rand en subtiele achtergrond.
 */
interface Props {
  headline: string;
  sub?: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  badge?: string;
}
const { headline, sub, primary, secondary, badge } = Astro.props;
---
<section class="ctafw">
  <div class="ctafw-inner">
    {badge && <span class="ctafw-badge">{badge}</span>}
    <h2 class="ctafw-headline">{headline}</h2>
    {sub && <p class="ctafw-sub">{sub}</p>}
    <div class="ctafw-actions">
      <a href={primary.href} class="ctafw-btn-primary">{primary.label}</a>
      {secondary && <a href={secondary.href} class="ctafw-btn-secondary">{secondary.label}</a>}
    </div>
  </div>
</section>
<style>
  .ctafw { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 5rem 2rem; position: relative; overflow: hidden; }
  .ctafw::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-accent,#6366f1), #8b5cf6, #ec4899); }
  .ctafw-inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .ctafw-badge { display: inline-block; padding: 0.25rem 0.875rem; background: rgba(99,102,241,0.1); color: var(--color-accent,#6366f1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2rem; margin-bottom: 1.25rem; border: 1px solid rgba(99,102,241,0.2); }
  .ctafw-headline { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 900; color: #0a0a0a; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 1rem; }
  .ctafw-sub { font-size: 1.125rem; color: #6b7280; line-height: 1.65; margin: 0 0 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
  .ctafw-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .ctafw-btn-primary { padding: 0.9375rem 2.5rem; background: var(--color-accent,#6366f1); color: #fff; font-weight: 700; font-size: 1rem; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
  .ctafw-btn-primary:hover { opacity: 0.88; }
  .ctafw-btn-secondary { padding: 0.9375rem 2.5rem; border: 1.5px solid #d1d5db; color: #374151; font-weight: 600; font-size: 1rem; border-radius: 0.5rem; text-decoration: none; transition: border-color 0.2s; }
  .ctafw-btn-secondary:hover { border-color: #9ca3af; }
</style>