TextNumbers text

---
/**
 * TextNumbers
 * Genummerde tekstparagrafen
 */
interface NumberItem {
  number: string;
  heading: string;
  text: string;
}
interface Props {
  items?: NumberItem[];
}
const { items = [
  { number: '01', heading: 'Wij zijn geen freelancers', text: 'BLURR is een volledig team van specialisten — strategen, contentmakers, designers en data-analisten. Je krijgt niet één persoon maar een gecoördineerde eenheid die samenwerkt aan jouw groei.' },
  { number: '02', heading: 'We meten alles', text: 'Elk kanaal, elke campagne en elk stuk content heeft meetbare doelen. We rapporteren transparant en trekken concrete conclusies — ook als iets niet werkt.' },
  { number: '03', heading: 'Geen jargon, wel resultaten', text: 'We communiceren in gewoon Nederlands. Geen rapporten vol met buzzwords maar concrete aantallen: hoeveel leads, hoeveel omzet, welk rendement op elke geïnvesteerde euro.' },
] } = Astro.props;
---

<div class="tnum-wrap">
  {items.map(item => (
    <div class="tnum-item">
      <span class="tnum-number">{item.number}</span>
      <div class="tnum-content">
        <h3 class="tnum-heading">{item.heading}</h3>
        <p class="tnum-text">{item.text}</p>
      </div>
    </div>
  ))}
</div>

<style>
  .tnum-wrap {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    max-width: 680px;
    padding: 32px;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .tnum-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .tnum-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #e5e7eb;
    line-height: 1;
    flex-shrink: 0;
    min-width: 52px;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
  }
  .tnum-content { flex: 1; }
  .tnum-heading {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .tnum-text {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #4b5563;
  }
</style>