IconFeatures icon

---
/**
 * IconFeatures
 * Sectie met icon-feature-items in een grid. Elk item: icon, titel en body.
 *
 * Props:
 * - title?: string
 * - subtitle?: string
 * - columns?: 2 | 3 | 4
 * - items?: Array<{ icon?: string; name: string; body: string }>
 */
interface Props {
  title?: string;
  subtitle?: string;
  columns?: 2 | 3 | 4;
  items?: { icon?: string; name: string; body: string }[];
}

const {
  title = 'Waarom voor ons kiezen',
  subtitle = 'Meer dan een leverancier, een partner die met je meedenkt.',
  columns = 3,
  items = [
    { icon: '→', name: 'Data-gedreven aanpak', body: 'Elk besluit is onderbouwd met analytics en marktdata.' },
    { icon: '→', name: 'Resultaatgericht', body: 'We werken naar afgesproken doelen, niet naar uurtje-factuurtje.' },
    { icon: '→', name: 'Snel schakelen', body: 'Van idee naar live in een handvol werkdagen.' },
    { icon: '→', name: 'Continue optimalisatie', body: 'Doorlopende tests en aanpassingen voor maximaal rendement.' },
    { icon: '→', name: 'Multichannel', body: 'Eén strategie die over alle kanalen heen werkt.' },
    { icon: '→', name: 'Transparantie', body: 'Realtime inzicht in alle cijfers die ertoe doen.' },
  ],
} = Astro.props;
---

<section class="bl-section ife">
  <div class="bl-inner ife__inner">
    {(title || subtitle) && (
      <div class="ife__header">
        {title && <h2 class="ife__title">{title}</h2>}
        {subtitle && <p class="ife__subtitle">{subtitle}</p>}
      </div>
    )}
    <div class="ife__grid" style={`--ife-cols: ${columns}`}>
      {items.map(item => (
        <div class="ife__item">
          {item.icon && <span class="ife__icon" aria-hidden="true">{item.icon}</span>}
          <h3 class="ife__name">{item.name}</h3>
          <p class="ife__body">{item.body}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.ife__header{margin-bottom:3rem}
.ife__title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .75rem}
.ife__subtitle{font-size:1.05rem;color:var(--color-muted, #555);margin:0}
.ife__grid{display:grid;grid-template-columns:repeat(var(--ife-cols, 3),1fr);gap:2rem}
.ife__item{display:flex;flex-direction:column;gap:.6rem}
.ife__icon{font-size:2rem;margin-bottom:.25rem}
.ife__name{font-size:1.0625rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0}
.ife__body{font-size:1rem;color:var(--color-muted, #555);line-height:1.6;margin:0}
@media (max-width: 900px){.ife__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px){.ife__grid{grid-template-columns:1fr}}
</style>