CTABigQuote CTA

---
/**
 * CTABigQuote
 * CTA met groot inspirerend citaat als visueel anker.
 */
interface Props {
  quote: string;
  quoteAuthor?: string;
  headline: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
}
const { quote, quoteAuthor, headline, primary, secondary } = Astro.props;
---
<section class="ctabq">
  <div class="ctabq-inner">
    <div class="ctabq-quote-wrap">
      <span class="ctabq-mark">"</span>
      <blockquote class="ctabq-quote">{quote}</blockquote>
      {quoteAuthor && <cite class="ctabq-author">— {quoteAuthor}</cite>}
    </div>
    <div class="ctabq-divider"></div>
    <div class="ctabq-bottom">
      <h2 class="ctabq-headline">{headline}</h2>
      <div class="ctabq-btns">
        <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; padding: 6rem 2rem; }
  .ctabq-inner { max-width: 860px; margin: 0 auto; text-align: center; }
  .ctabq-quote-wrap { position: relative; padding: 2rem 0; }
  .ctabq-mark { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); font-size: 8rem; color: var(--color-accent,#6366f1); opacity: 0.15; line-height: 1; font-family: Georgia, serif; pointer-events: none; }
  .ctabq-quote { font-size: clamp(1.375rem, 3vw, 2rem); font-style: italic; color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0 0 1rem; position: relative; z-index: 1; }
  .ctabq-author { font-size: 0.9375rem; color: rgba(255,255,255,0.35); 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: -0.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: 0.875rem 2.25rem; background: var(--color-accent,#6366f1); color: #fff; font-weight: 700; font-size: 0.9375rem; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
  .ctabq-btn-primary:hover { opacity: 0.88; }
  .ctabq-btn-secondary { padding: 0.875rem 2.25rem; border: 1.5px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); font-weight: 600; font-size: 0.9375rem; border-radius: 0.5rem; text-decoration: none; transition: all 0.2s; }
  .ctabq-btn-secondary:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
</style>