ContentCTA content

---
interface Props {
  eyebrow?: string;
  heading?: string;
  text?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  style?: "default" | "dark" | "accent";
}

const {
  eyebrow = "Klaar om te groeien?",
  heading = "Start vandaag nog met marketing die werkt",
  text = "Plan een gratis strategiegesprek van 30 minuten. We kijken naar jouw situatie en geven direct concrete adviezen — volledig vrijblijvend.",
  primaryCta = { label: "Plan een gesprek", href: "/contact" },
  secondaryCta = { label: "Bekijk onze cases", href: "/cases" },
  style = "accent",
} = Astro.props;
---

<div class={`cca-wrap cca-wrap--${style}`}>
  {eyebrow && <span class="cca-eyebrow">{eyebrow}</span>}
  <h2 class="cca-heading">{heading}</h2>
  {text && <p class="cca-text">{text}</p>}
  <div class="cca-actions">
    {primaryCta && (
      <a class="cca-btn cca-btn--primary" href={primaryCta.href}>{primaryCta.label}</a>
    )}
    {secondaryCta && (
      <a class="cca-btn cca-btn--secondary" href={secondaryCta.href}>{secondaryCta.label}</a>
    )}
  </div>
</div>

<style>
  .cca-wrap {
    padding: 3.5rem;
    border-radius: 16px;
    text-align: center;
    margin: 2rem 0;
  }
  .cca-wrap--default {
    background: #f5f5f5;
    color: var(--color-primary, #0a0a0a);
  }
  .cca-wrap--dark {
    background: var(--color-primary, #0a0a0a);
    color: #fff;
  }
  .cca-wrap--accent {
    background: var(--color-accent, #6366f1);
    color: #fff;
  }
  .cca-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.75;
    margin-bottom: 0.75rem;
  }
  .cca-heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 1rem;
    line-height: 1.2;
  }
  .cca-text {
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
    max-width: 560px;
    margin: 0 auto 2rem;
  }
  .cca-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cca-btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .cca-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
  }
  .cca-wrap--accent .cca-btn--primary,
  .cca-wrap--dark .cca-btn--primary {
    background: #fff;
    color: var(--color-primary, #0a0a0a);
  }
  .cca-wrap--default .cca-btn--primary {
    background: var(--color-accent, #6366f1);
    color: #fff;
  }
  .cca-btn--secondary {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
    opacity: 0.85;
  }
</style>