CTASplit CTA

---
/**
 * CTASplit
 * Split CTA — tekst links + afbeelding/visual rechts. Horizontaal verdeeld.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  ctaLabel?: string;
  ctaHref?: string;
  bullets?: string[];
  imageSrc?: string;
  imageAlt?: string;
  bg?: 'white' | 'light' | 'dark';
}

const {
  eyebrow,
  headline,
  sub,
  ctaLabel = 'Meer weten',
  ctaHref = '#',
  bullets = [],
  imageSrc,
  imageAlt = '',
  bg = 'light',
} = Astro.props;
---

<section class:list={['cts', `cts--bg-${bg}`]} data-component="cta-split">
  <div class="cts__inner">
    <div class="cts__left">
      {eyebrow && <p class="cts__eyebrow">{eyebrow}</p>}
      <h2 class="cts__headline" set:html={headline} />
      {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">
                <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.1"/>
                <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {b}
            </li>
          ))}
        </ul>
      )}
      <a href={ctaHref} class="cts__cta">{ctaLabel}</a>
    </div>

    {imageSrc && (
      <div class="cts__right">
        <img src={imageSrc} alt={imageAlt} class="cts__img" />
      </div>
    )}
  </div>
</section>

<style>
  .cts { padding: 5rem 1.5rem; }
  .cts--bg-white { background: #fff; }
  .cts--bg-light { background: #f5f5f7; }
  .cts--bg-dark { background: var(--color-primary, #0a0a0a); color: #fff; }

  .cts__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .cts__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    margin-bottom: 0.875rem;
  }

  .cts--bg-dark .cts__eyebrow { color: var(--color-accent, #6366f1); }

  .cts__headline {
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.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: rgba(255,255,255,0.6); }

  .cts__bullets {
    list-style: none;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .cts__bullet {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--color-primary, #0a0a0a);
    font-weight: 500;
  }

  .cts--bg-dark .cts__bullet { color: rgba(255,255,255,0.8); }

  .cts__bullet svg { color: var(--color-accent, #6366f1); flex-shrink: 0; }

  .cts__cta {
    display: inline-block;
    background: var(--color-accent, #6366f1);
    color: #fff;
    padding: 0.875rem 1.875rem;
    border-radius: var(--radius, 0.5rem);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.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, 0.5rem) * 2);
  }

  @media (max-width: 768px) {
    .cts__inner { grid-template-columns: 1fr; gap: 2rem; }
    .cts__img { height: 240px; }
  }
</style>