CtaMinimal CTA

---
/**
 * CtaMinimal — compacte één-regel CTA: een zin gevolgd door een tekstlink.
 *
 * Props:
 * - phrase?: string
 * - cta?: { label: string; href: string }
 * - align?: 'left' | 'center' | 'right'
 * - size?: 'sm' | 'md' | 'lg'
 */
interface Props {
  phrase?: string;
  cta?: { label: string; href: string };
  align?: 'left' | 'center' | 'right';
  size?: 'sm' | 'md' | 'lg';
}

const {
  phrase = 'Klaar om te groeien?',
  cta = { label: 'Plan een gratis gesprek →', href: '#' },
  align = 'center',
  size = 'lg',
} = Astro.props;
---

<section class="bl-section ctm">
  <div class={`bl-inner ctm__wrap ctm__align-${align} ctm__size-${size}`}>
    <p class="ctm__text">
      <span class="ctm__phrase">{phrase}</span>
      <a class="ctm__link" href={cta.href}>{cta.label}</a>
    </p>
  </div>
</section>

<style>
.ctm{padding-block:0}
.ctm__wrap{padding-block:2rem}
.ctm__align-left{text-align:left}
.ctm__align-center{text-align:center}
.ctm__align-right{text-align:right}
.ctm__text{margin:0;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.375em;justify-content:inherit}
.ctm__align-center .ctm__text{justify-content:center}
.ctm__align-right .ctm__text{justify-content:flex-end}
.ctm__phrase{color:var(--color-muted);font-weight:400}
.ctm__link{color:var(--color-accent);font-weight:700;text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.ctm__link:hover{border-color:var(--color-accent)}
.ctm__size-sm .ctm__text{font-size:.875rem}
.ctm__size-md .ctm__text{font-size:1rem}
.ctm__size-lg .ctm__text{font-size:1.25rem}
</style>