CTAMinimal CTA

---
interface Props {
  text: string;
  linkLabel: string;
  linkHref?: string;
  align?: 'left' | 'center' | 'right';
  size?: 'sm' | 'md' | 'lg';
}

const {
  text,
  linkLabel,
  linkHref = '#',
  align = 'center',
  size = 'md',
} = Astro.props;
---

<div class={`ctm__wrap ctm__align-${align} ctm__size-${size}`}>
  <p class="ctm__text">
    <span class="ctm__phrase">{text}</span>
    {' '}
    <a class="ctm__link" href={linkHref}>{linkLabel}</a>
  </p>
</div>

<style>
  :root {
    --color-primary: #0a0a0a;
    --color-accent: #6366f1;
    --color-bg: #fff;
    --color-muted: #6b7280;
    --radius: 0.5rem;
  }

  .ctm__wrap {
    padding: 2rem 1.5rem;
  }

  .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: 0.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 0.2s ease, border-color 0.2s ease;
  }

  .ctm__link:hover {
    border-color: var(--color-accent);
  }

  /* Size variants */
  .ctm__size-sm .ctm__text {
    font-size: 0.875rem;
  }

  .ctm__size-md .ctm__text {
    font-size: 1rem;
  }

  .ctm__size-lg .ctm__text {
    font-size: 1.25rem;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>