CTABooking CTA

---
/**
 * CTABooking
 * CTA sectie gericht op het boeken van een gesprek/afspraak.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  bookingLink: string;
  bookingLabel?: string;
  trustItems?: string[];
  availabilityText?: string;
}
const { eyebrow, headline, sub, bookingLink, bookingLabel = 'Plan gratis gesprek', trustItems = [], availabilityText } = Astro.props;
---
<section class="ctabk">
  <div class="ctabk-inner">
    <div class="ctabk-content">
      {eyebrow && <span class="ctabk-eyebrow">{eyebrow}</span>}
      <h2 class="ctabk-headline">{headline}</h2>
      {sub && <p class="ctabk-sub">{sub}</p>}
      {trustItems.length > 0 && (
        <ul class="ctabk-trust">
          {trustItems.map(t => <li class="ctabk-trust-item"><span class="ctabk-check">✓</span>{t}</li>)}
        </ul>
      )}
    </div>
    <div class="ctabk-card">
      <div class="ctabk-card-inner">
        <div class="ctabk-avatar-row">
          <div class="ctabk-avatar">MB</div>
          <div class="ctabk-avatar" style="background:#10b981">JK</div>
          <div class="ctabk-avatar" style="background:#f59e0b">AS</div>
        </div>
        <p class="ctabk-card-text">Onze strategen staan voor je klaar</p>
        {availabilityText && <p class="ctabk-available">{availabilityText}</p>}
        <a href={bookingLink} class="ctabk-btn">{bookingLabel} →</a>
        <p class="ctabk-disclaimer">Geen verkoopgesprek. Altijd gratis.</p>
      </div>
    </div>
  </div>
</section>
<style>
  .ctabk { background: #0a0a0a; padding: 5rem 2rem; }
  .ctabk-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .ctabk-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin-bottom: 1rem; }
  .ctabk-headline { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 1rem; }
  .ctabk-sub { font-size: 1.0625rem; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0 0 1.5rem; }
  .ctabk-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
  .ctabk-trust-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: rgba(255,255,255,0.65); }
  .ctabk-check { color: var(--color-accent,#6366f1); font-weight: 700; flex-shrink: 0; }
  .ctabk-card { background: #fff; border-radius: 1.25rem; padding: 2.5rem; }
  .ctabk-avatar-row { display: flex; gap: -0.5rem; margin-bottom: 1.25rem; }
  .ctabk-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent,#6366f1); color: #fff; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -8px; }
  .ctabk-avatar:first-child { margin-left: 0; }
  .ctabk-card-text { font-size: 1rem; font-weight: 600; color: #0a0a0a; margin: 0 0 0.5rem; }
  .ctabk-available { font-size: 0.8125rem; color: #22c55e; margin: 0 0 1.5rem; font-weight: 500; }
  .ctabk-btn { display: block; text-align: center; padding: 0.875rem 1.5rem; 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; margin-bottom: 0.875rem; }
  .ctabk-btn:hover { opacity: 0.88; }
  .ctabk-disclaimer { font-size: 0.75rem; color: #9ca3af; text-align: center; margin: 0; }
  @media (max-width: 768px) { .ctabk-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
</style>