CtaSplit CTA

---
/**
 * CtaSplit — CTA met tekst links en beeld rechts. Optionele bullet-lijst.
 *
 * Props:
 * - eyebrow?: string
 * - headline: string            (HTML toegestaan, <em> voor accent)
 * - sub?: string
 * - bullets?: string[]
 * - cta?: { label: string; href: string }
 * - image: string
 * - imageAlt?: string
 * - bg?: 'white' | 'light' | 'dark'
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  bullets?: string[];
  cta?: { label: string; href: string };
  image: string;
  imageAlt?: string;
  bg?: 'white' | 'light' | 'dark';
}
const {
  eyebrow,
  headline,
  sub,
  bullets = [],
  cta,
  image,
  imageAlt = '',
  bg = 'light',
} = Astro.props;
---

<section class={`bl-section cts cts--bg-${bg}`} data-component="cta-split">
  <div class="bl-inner cts__inner">
    <div class="cts__left">
      {eyebrow && <p class="cts__eyebrow">{eyebrow}</p>}
      <h2 class="cts__headline" set:html={headline}></h2>
      {sub && <p class="cts__sub">{sub}</p>}
      {bullets.length > 0 && (
        <ul class="cts__bullets">
          {bullets.map(b => (
            <li class="cts__bullet">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"></circle>
                <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              {b}
            </li>
          ))}
        </ul>
      )}
      {cta && <a href={cta.href} class="cts__cta">{cta.label}</a>}
    </div>
    <div class="cts__right">
      <img data-allow-img src={image} alt={imageAlt} class="cts__img" loading="lazy" decoding="async" />
    </div>
  </div>
</section>

<style>
  .cts--bg-white { background: #fff; }
  .cts--bg-light { background: #f5f5f7; }
  .cts--bg-dark { background: var(--color-primary, #0a0a0a); color: #fff; }
  .cts__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .cts__eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent, #6366f1); margin-bottom: .875rem; }
  .cts__headline { font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; margin-bottom: 1rem; color: var(--color-primary, #0a0a0a); }
  .cts--bg-dark .cts__headline { color: #fff; }
  .cts__headline :global(em) { font-style: normal; color: var(--color-accent, #6366f1); }
  .cts__sub { font-size: 1rem; line-height: 1.65; color: var(--color-muted, #6b7280); margin-bottom: 1.5rem; }
  .cts--bg-dark .cts__sub { color: #e8e8e8; }
  .cts__bullets { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .625rem; }
  .cts__bullet { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--color-primary, #0a0a0a); font-weight: 500; }
  .cts--bg-dark .cts__bullet { color: #e8e8e8; }
  .cts__bullet svg { color: var(--color-accent, #6366f1); flex-shrink: 0; }
  .cts__cta { display: inline-block; background: var(--color-accent, #6366f1); color: #fff; padding: .875rem 1.875rem; border-radius: var(--radius, .5rem); font-weight: 700; font-size: .9375rem; text-decoration: none; transition: transform .2s, filter .2s; }
  .cts__cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .cts__img { width: 100%; height: 420px; object-fit: cover; border-radius: calc(var(--radius, .5rem) * 2); }
  @media (max-width: 768px) {
    .cts__inner { grid-template-columns: 1fr; gap: 2rem; }
    .cts__img { height: 240px; }
  }
</style>