IconStats icon

---
/**
 * IconStats
 * Resultaten-in-cijfers blok: een titel boven een grid van stat-tegels,
 * elk met icoon, waarde, label en optionele trend-regel.
 *
 * Props:
 * - title?: string
 * - stats: { icon?: string; value: string; label: string; trend?: string; trendUp?: boolean }[]
 */
interface Stat {
  icon?: string;
  value: string;
  label: string;
  trend?: string;
  trendUp?: boolean;
}
interface Props {
  title?: string;
  stats?: Stat[];
}
const { title, stats = [] } = Astro.props;
---

<section class="bl-section ista">
  <div class="bl-inner ista-inner">
    {title && <h2 class="ista__title">{title}</h2>}
    <div class="ista__grid">
      {stats.map((s) => (
        <div class="ista__item">
          {s.icon && <span class="ista__icon" aria-hidden="true">{s.icon}</span>}
          <div class="ista__data">
            <p class="ista__value">{s.value}</p>
            <p class="ista__label">{s.label}</p>
            {s.trend && (
              <p class:list={['ista__trend', s.trendUp && 'ista__trend--up']}>{s.trend}</p>
            )}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.ista__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);text-align:center;margin:0 0 2.5rem}
.ista__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.ista__item{background:#fff;border:1px solid #eee;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;transition:box-shadow .2s}
.ista__item:hover{box-shadow:0 6px 20px #00000014}
.ista__icon{font-size:1.75rem}
.ista__value{font-size:2rem;font-weight:900;color:var(--color-primary, #0a0a0a);margin:0;line-height:1}
.ista__label{font-size:.95rem;color:#52525b;margin:.25rem 0 0;font-weight:600}
.ista__trend{font-size:.85rem;color:#71717a;margin:.4rem 0 0;font-weight:500}
.ista__trend--up{color:#15803d}
@media (max-width:900px){.ista__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ista__grid{grid-template-columns:1fr}}
</style>