IconStats icon

---
interface IconStat {
  icon: string;
  value: string;
  label: string;
  trend?: string;
  trendUp?: boolean;
}

interface Props {
  stats?: IconStat[];
  title?: string;
}

const {
  stats = [
    { icon: '📈', value: '+340%', label: 'Gemiddelde omzetgroei', trend: '+12% vs vorig jaar', trendUp: true },
    { icon: '💰', value: '4.2x', label: 'Return on Ad Spend', trend: 'Industrie gem.: 2.1x', trendUp: true },
    { icon: '👥', value: '80+', label: 'Actieve klanten', trend: '+24 dit jaar', trendUp: true },
    { icon: '⭐', value: '4.9', label: 'Google Review score', trend: '127 reviews', trendUp: false },
  ],
  title = 'Onze resultaten in cijfers',
} = Astro.props;
---

<section class="ista">
  {title && <h2 class="ista__title">{title}</h2>}
  <div class="ista__grid">
    {stats.map((s) => (
      <div class="ista__item">
        <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.trendUp ? '↑' : '→'} {s.trend}
            </p>
          )}
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ista { padding: 2rem 0; }
  .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: 0.75rem;
    transition: box-shadow 0.2s;
  }
  .ista__item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
  .ista__icon { font-size: 1.75rem; }
  .ista__data {}
  .ista__value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1;
  }
  .ista__label {
    font-size: 0.85rem;
    color: #888;
    margin: 0.25rem 0 0;
    font-weight: 500;
  }
  .ista__trend {
    font-size: 0.75rem;
    color: #aaa;
    margin: 0.4rem 0 0;
  }
  .ista__trend--up { color: #16a34a; }
  @media (max-width: 768px) { .ista__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .ista__grid { grid-template-columns: 1fr; } }
</style>