IconLarge icon

---
/**
 * IconLarge
 * Grote losse iconen met koptekst
 */
interface LargeItem {
  icon: string;
  title: string;
  sub?: string;
}
interface Props {
  headline?: string;
  items?: LargeItem[];
}
const { headline = 'Bewezen resultaten', items = [
  { icon: '📈', title: '+340%', sub: 'gemiddelde omzetgroei' },
  { icon: '🎯', title: '94%', sub: 'klanttevredenheidsscore' },
  { icon: '⚡', title: '2 weken', sub: 'van briefing tot live' },
  { icon: '🏆', title: '120+', sub: 'succesvolle projecten' },
] } = Astro.props;
---

<section class="ilg-section">
  {headline && <h2 class="ilg-headline">{headline}</h2>}
  <div class="ilg-grid">
    {items.map(item => (
      <div class="ilg-item">
        <span class="ilg-icon">{item.icon}</span>
        <strong class="ilg-title">{item.title}</strong>
        {item.sub && <span class="ilg-sub">{item.sub}</span>}
      </div>
    ))}
  </div>
</section>

<style>
  .ilg-section {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    padding: 56px 24px;
    font-family: system-ui, sans-serif;
    text-align: center;
  }
  .ilg-headline {
    margin: 0 0 48px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
  }
  .ilg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
  }
  .ilg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 160px;
  }
  .ilg-icon {
    font-size: 3rem;
    line-height: 1;
    animation: ilg-pulse 3s ease-in-out infinite;
  }
  @keyframes ilg-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
  }
  .ilg-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: -0.02em;
  }
  .ilg-sub {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
  }
</style>