CtaBigQuote CTA

---
/**
 * CtaBigQuote
 * Donkere CTA opgebouwd rond een groot citaat met bron, gevolgd door een kop
 * en twee knoppen. Gecentreerd.
 *
 * Props:
 * - quote: string
 * - author?: string
 * - headline: string
 * - primary?: { label: string; href: string }
 * - secondary?: { label: string; href: string }
 */
interface Props {
  quote: string;
  author?: string;
  headline: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
}
const { quote, author, headline, primary, secondary } = Astro.props;
---

<section class="bl-section ctabq">
  <div class="bl-inner ctabq-inner">
    <div class="ctabq-quote-wrap">
      <span class="ctabq-mark" aria-hidden="true">&ldquo;</span>
      <blockquote class="ctabq-quote">{quote}</blockquote>
      {author && <cite class="ctabq-author">{author}</cite>}
    </div>
    <div class="ctabq-divider" aria-hidden="true"></div>
    <div class="ctabq-bottom">
      <h2 class="ctabq-headline">{headline}</h2>
      {(primary || secondary) && (
        <div class="ctabq-btns">
          {primary && <a href={primary.href} class="ctabq-btn-primary">{primary.label}</a>}
          {secondary && <a href={secondary.href} class="ctabq-btn-secondary">{secondary.label}</a>}
        </div>
      )}
    </div>
  </div>
</section>

<style>
.ctabq{background:#0a0a0a}
.ctabq-inner{max-width:860px;text-align:center}
.ctabq-quote-wrap{position:relative;padding:2rem 0}
.ctabq-mark{position:absolute;top:-1rem;left:50%;transform:translate(-50%);font-size:8rem;color:var(--color-accent,#6366f1);opacity:.18;line-height:1;font-family:Georgia,serif;pointer-events:none}
.ctabq-quote{font-size:clamp(1.375rem,3vw,2rem);font-style:italic;color:#e8e8e8;line-height:1.55;margin:0 0 1rem;position:relative;z-index:1}
.ctabq-author{font-size:1rem;color:#aaa;font-style:normal}
.ctabq-divider{width:48px;height:2px;background:var(--color-accent,#6366f1);margin:2.5rem auto}
.ctabq-headline{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1.2;margin:0 0 2rem}
.ctabq-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.ctabq-btn-primary{padding:.875rem 2.25rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:1rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ctabq-btn-primary:hover{opacity:.88}
.ctabq-btn-secondary{padding:.875rem 2.25rem;border:1.5px solid rgba(255,255,255,.28);color:#e8e8e8;font-weight:600;font-size:1rem;border-radius:.5rem;text-decoration:none;transition:border-color .2s,color .2s}
.ctabq-btn-secondary:hover{border-color:#fff;color:#fff}
</style>