CtaCard CTA

---
/**
 * CtaCard
 * CTA als afgeronde kaart binnen de pagina-rail. Eyebrow, kop met optioneel
 * cursief accent-woord, sub en twee knoppen. Variant bepaalt het kleurvlak.
 *
 * Props:
 * - eyebrow?: string
 * - headline: string
 * - accent?: string            cursief accent in de kop (komt na {headline})
 * - sub?: string
 * - primary?: { label: string; href: string }
 * - secondary?: { label: string; href: string }
 * - variant?: 'dark' | 'light' | 'accent'   default 'dark'
 */
interface Props {
  eyebrow?: string;
  headline: string;
  accent?: string;
  sub?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  variant?: 'dark' | 'light' | 'accent';
}
const { eyebrow, headline, accent, sub, primary, secondary, variant = 'dark' } = Astro.props;
---

<section class="bl-section ctc">
  <div class="bl-inner ctc__outer">
    <div class:list={['ctc__card', `ctc__card--${variant}`]}>
      <div class="ctc__body">
        {eyebrow && <p class="ctc__eyebrow">{eyebrow}</p>}
        <h2 class="ctc__headline">{headline}{accent && <em> {accent}</em>}</h2>
        {sub && <p class="ctc__sub">{sub}</p>}
        {(primary || secondary) && (
          <div class="ctc__ctas">
            {primary && <a href={primary.href} class="ctc__cta ctc__cta--primary">{primary.label}</a>}
            {secondary && <a href={secondary.href} class="ctc__cta ctc__cta--ghost">{secondary.label}</a>}
          </div>
        )}
      </div>
    </div>
  </div>
</section>

<style>
.ctc__card{border-radius:calc(var(--radius, .5rem) * 3);padding:5rem 3rem;text-align:center;position:relative;overflow:hidden}
.ctc__card--light{background:#f5f5f7;color:var(--color-primary, #0a0a0a)}
.ctc__card--dark{background:var(--color-primary, #0a0a0a);color:#fff}
.ctc__card--accent{background:var(--color-accent, #6366f1);color:#fff}
.ctc__body{position:relative;z-index:1}
.ctc__eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:1rem}
.ctc__headline{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.25rem}
.ctc__card--light .ctc__headline{color:var(--color-primary, #0a0a0a)}
.ctc__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.ctc__card--accent .ctc__headline em{color:#ffffffcc}
.ctc__sub{font-size:1.125rem;line-height:1.6;opacity:.85;margin-bottom:2.5rem;max-width:52ch;margin-left:auto;margin-right:auto}
.ctc__ctas{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}
.ctc__cta{display:inline-block;padding:.9375rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:1rem;text-decoration:none;transition:transform .2s,box-shadow .2s,opacity .2s}
.ctc__card--light .ctc__cta--primary{background:var(--color-accent, #6366f1);color:#fff}
.ctc__card--dark .ctc__cta--primary{background:#fff;color:var(--color-primary, #0a0a0a)}
.ctc__card--accent .ctc__cta--primary{background:#fff;color:var(--color-accent, #6366f1)}
.ctc__cta--primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}
.ctc__cta--ghost{border:1.5px solid rgba(255,255,255,.45);color:inherit;opacity:.85}
.ctc__card--light .ctc__cta--ghost{border-color:#00000033;color:var(--color-primary, #0a0a0a)}
.ctc__cta--ghost:hover{opacity:1}
@media (max-width:640px){
  .ctc__card{padding:3rem 1.5rem}
  .ctc__cta{width:100%;text-align:center}
  .ctc__ctas{flex-direction:column;align-items:center}
}
</style>