CtaBooking CTA

---
/**
 * CtaBooking — CTA met tekst links en een boekings-/afspraakkaart rechts.
 *
 * Props:
 * - eyebrow?: string
 * - headline: string            (HTML toegestaan, set:html)
 * - sub?: string
 * - trust?: string[]            (checklist-items)
 * - avatars?: { initials: string; color?: string }[]
 * - cardText?: string
 * - availability?: string
 * - cta?: { label: string; href: string }
 * - disclaimer?: string
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  trust?: string[];
  avatars?: { initials: string; color?: string }[];
  cardText?: string;
  availability?: string;
  cta?: { label: string; href: string };
  disclaimer?: string;
}

const {
  eyebrow = 'Gratis adviesgesprek',
  headline = 'Laten we eens kijken wat we voor jou kunnen doen',
  sub = 'Geen verkooppraatje. Gewoon een eerlijk gesprek over jouw marketing en hoe wij kunnen helpen.',
  trust = ['Geen verplichtingen', 'Resultaatgericht advies', '20 jaar gecombineerde ervaring'],
  avatars = [
    { initials: 'MB' },
    { initials: 'JK', color: '#10b981' },
    { initials: 'AS', color: '#f59e0b' },
  ],
  cardText = 'Onze strategen staan voor je klaar',
  availability = 'Volgende beschikbare slot: morgen 10:00',
  cta = { label: 'Plan gratis gesprek →', href: '#' },
  disclaimer = 'Geen verkoopgesprek. Altijd gratis.',
} = Astro.props;
---

<section class="bl-section ctabk">
  <div class="bl-inner ctabk-inner">
    <div class="ctabk-content">
      {eyebrow && <span class="ctabk-eyebrow">{eyebrow}</span>}
      <h2 class="ctabk-headline" set:html={headline}></h2>
      {sub && <p class="ctabk-sub">{sub}</p>}
      {trust.length > 0 && (
        <ul class="ctabk-trust">
          {trust.map(t => (
            <li class="ctabk-trust-item"><span class="ctabk-check">&#10003;</span>{t}</li>
          ))}
        </ul>
      )}
    </div>
    <div class="ctabk-card">
      <div class="ctabk-card-inner">
        {avatars.length > 0 && (
          <div class="ctabk-avatar-row">
            {avatars.map(a => (
              <div class="ctabk-avatar" style={a.color ? `background:${a.color}` : undefined}>{a.initials}</div>
            ))}
          </div>
        )}
        {cardText && <p class="ctabk-card-text">{cardText}</p>}
        {availability && <p class="ctabk-available">{availability}</p>}
        {cta && <a href={cta.href} class="ctabk-btn">{cta.label}</a>}
        {disclaimer && <p class="ctabk-disclaimer">{disclaimer}</p>}
      </div>
    </div>
  </div>
</section>

<style>
.ctabk{background:#0a0a0a}
.ctabk-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.ctabk-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.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:-.04em;line-height:1.15;margin:0 0 1rem}
.ctabk-sub{font-size:1.0625rem;color:#aaa;line-height:1.65;margin:0 0 1.5rem}
.ctabk-trust{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.625rem}
.ctabk-trust-item{display:flex;align-items:center;gap:.625rem;font-size:.9375rem;color:#e8e8e8}
.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:-.5rem;margin-bottom:1.25rem}
.ctabk-avatar{width:44px;height:44px;border-radius:50%;background:var(--color-accent,#6366f1);color:#fff;font-size:.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 .5rem}
.ctabk-available{font-size:.8125rem;color:#22c55e;margin:0 0 1.5rem;font-weight:500}
.ctabk-btn{display:block;text-align:center;padding:.875rem 1.5rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s;margin-bottom:.875rem}
.ctabk-btn:hover{opacity:.88}
.ctabk-disclaimer{font-size:.75rem;color:#9ca3af;text-align:center;margin:0}
@media (max-width:768px){.ctabk-inner{grid-template-columns:1fr;gap:2.5rem}}
</style>