TextSummary text

---
interface Props {
  label?: string;
  title?: string;
  points: string[];
}
const { label = "Samenvatting", title, points = ["BLURR verhoogde de ROAS van 1,4× naar 4,2× in 90 dagen.", "Kosten per lead daalden met 58% door betere doelgroep targeting.", "Omzetgroei van 180% na volledige campagneherschrijving.", "Klant verlengde contract voor tweede jaar."] } = Astro.props;
---

<div class="tx-sum">
  <p class="tx-sum__label">{label}</p>
  {title && <p class="tx-sum__title">{title}</p>}
  <ul class="tx-sum__list">
    {points.map(p => (
      <li class="tx-sum__point">
        <span class="tx-sum__icon" aria-hidden="true">▸</span>
        <span>{p}</span>
      </li>
    ))}
  </ul>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-sum {
    padding: 1.5rem;
    background: #f8f8f8;
    border-radius: 0.75rem;
    border: 1px solid #ebebeb;
  }
  .tx-sum__label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
  }
  .tx-sum__title {
    margin: 0 0 0.85rem;
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .tx-sum__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .tx-sum__point {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.55;
  }
  .tx-sum__icon {
    color: var(--color-accent);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
  }
</style>