CtaWithTestimonial CTA

---
/**
 * CtaWithTestimonial — CTA links, klant-quote rechts.
 *
 * Props:
 * - headline?: string           (HTML toegestaan, set:html)
 * - sub?: string
 * - cta?: { label: string; href: string }
 * - quote?: string
 * - author?: string
 * - role?: string
 * - avatar?: string
 */
interface Props {
  headline?: string;
  sub?: string;
  cta?: { label: string; href: string };
  quote?: string;
  author?: string;
  role?: string;
  avatar?: string;
}

const {
  headline = 'Klaar om te starten met marketing die werkt?',
  sub = 'Meer dan 120 bedrijven gingen je al voor. Jij bent de volgende.',
  cta = { label: 'Plan gratis gesprek →', href: '#' },
  quote = 'Binnen 3 maanden hadden we 40% meer aanvragen via Google. Het team heeft echt het verschil gemaakt.',
  author = 'Thomas van den Berg',
  role = 'Directeur, VDB Installatie',
  avatar = '/img/ext/pravatar-44-8-1b351b.jpg',
} = Astro.props;
---

<section class="bl-section ctawt">
  <div class="bl-inner ctawt-inner">
    <div class="ctawt-left">
      <h2 class="ctawt-headline" set:html={headline}></h2>
      {sub && <p class="ctawt-sub">{sub}</p>}
      {cta && <a href={cta.href} class="ctawt-btn">{cta.label}</a>}
    </div>
    <div class="ctawt-right">
      <blockquote class="ctawt-quote">
        <p class="ctawt-quote-text">&ldquo;{quote}&rdquo;</p>
        <footer class="ctawt-quote-footer">
          <img data-allow-img src={avatar} alt={author} class="ctawt-avatar" loading="lazy" decoding="async" />
          <div>
            <cite class="ctawt-name">{author}</cite>
            <span class="ctawt-role">{role}</span>
          </div>
        </footer>
      </blockquote>
    </div>
  </div>
</section>

<style>
.ctawt{background:#f8fafc;border-top:1px solid #e5e7eb}
.ctawt-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.ctawt-headline{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 1rem}
.ctawt-sub{font-size:1.0625rem;color:#6b7280;line-height:1.65;margin:0 0 2rem}
.ctawt-btn{display:inline-flex;align-items:center;padding:.875rem 2rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ctawt-btn:hover{opacity:.88}
.ctawt-quote{background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:2.5rem;margin:0}
.ctawt-quote-text{font-size:1.125rem;color:#0a0a0a;line-height:1.65;font-style:italic;margin:0 0 1.5rem}
.ctawt-quote-footer{display:flex;align-items:center;gap:.875rem}
.ctawt-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ctawt-name{display:block;font-size:.9375rem;font-weight:700;color:#0a0a0a;font-style:normal}
.ctawt-role{display:block;font-size:.8125rem;color:#6b7280}
@media (max-width:768px){.ctawt-inner{grid-template-columns:1fr;gap:2.5rem}}
</style>