TextStats text

---
interface Props {
  before?: string;
  stat: string;
  statLabel: string;
  after?: string;
}
const { before = "Onze klanten behalen gemiddeld een", stat = "3,8×", statLabel = "ROAS", after = "op hun advertentiebudget binnen de eerste 90 dagen van de samenwerking." } = Astro.props;
---

<p class="tx-stats">
  {before && <span class="tx-stats__before">{before} </span>}
  <strong class="tx-stats__stat">{stat}</strong>
  <span class="tx-stats__label"> {statLabel} </span>
  {after && <span class="tx-stats__after">{after}</span>}
</p>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-stats {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #444;
    line-height: 1.65;
    max-width: 640px;
  }
  .tx-stats__stat {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: -0.04em;
    vertical-align: baseline;
  }
  .tx-stats__label {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
</style>