HeadingWithStats heading

---
/**
 * HeadingWithStats — links uitgelijnde sectiekop met eyebrow + H2, gevolgd door
 * een rij kerncijfers. Bewijs-opener boven een sectie.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - stats?: { value: string; label: string }[]
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  stats?: { value: string; label: string }[];
}

const {
  eyebrow = 'Resultaten',
  headline = 'Cijfers die bewijzen dat het werkt',
  stats = [
    { value: '3.8×', label: 'Gemiddeld ROAS' },
    { value: '80+', label: 'Tevreden klanten' },
    { value: '€12M+', label: 'Omzet gegenereerd' },
  ],
} = Astro.props;
---

<section class:list={['bl-section', 'hd-stats']}>
  <div class="bl-inner hd-stats__inner">
    <div class="hd-stats__header">
      {eyebrow && <span class="hd-stats__eyebrow">{eyebrow}</span>}
      <h2 class="hd-stats__title">{headline}</h2>
    </div>
    {stats && stats.length > 0 && (
      <div class="hd-stats__row">
        {stats.map((s) => (
          <div class="hd-stats__item">
            <span class="hd-stats__value">{s.value}</span>
            <span class="hd-stats__label">{s.label}</span>
          </div>
        ))}
      </div>
    )}
  </div>
</section>

<style>
.hd-stats__header{margin-bottom:2rem}
.hd-stats__eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem}
.hd-stats__title{margin:0;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:var(--color-primary);line-height:1.15;letter-spacing:-.02em;max-width:600px}
.hd-stats__row{display:flex;gap:2.5rem;flex-wrap:wrap;padding-top:2rem;border-top:1px solid color-mix(in srgb, var(--color-muted) 35%, transparent)}
.hd-stats__item{display:flex;flex-direction:column;gap:.35rem}
.hd-stats__value{font-size:clamp(2rem,4vw,2.75rem);font-weight:900;color:var(--color-accent);line-height:1;letter-spacing:-.03em}
.hd-stats__label{font-size:.95rem;color:var(--color-muted);font-weight:600}
</style>