IconFeatures icon

---
interface Feature {
  icon: string;
  title: string;
  body: string;
}

interface Props {
  features?: Feature[];
  title?: string;
  subtitle?: string;
  columns?: number;
}

const {
  features = [
    { icon: '📊', title: 'Data-gedreven aanpak', body: 'Elk besluit is onderbouwd met analytics en marktdata.' },
    { icon: '🎯', title: 'Resultaatgarantie', body: 'Wij werken naar afgesproken KPIs — niet naar uurtje-factuurtje.' },
    { icon: '⚡', title: 'Snel schalen', body: 'Van idee naar live campagne in 5 werkdagen.' },
    { icon: '🔄', title: 'Continue optimalisatie', body: 'Wekelijkse A/B-tests en aanpassingen voor maximaal rendement.' },
    { icon: '📱', title: 'Multichannel', body: 'Google, Meta, LinkedIn, TikTok — één strategie voor alle kanalen.' },
    { icon: '🔒', title: 'Transparantie', body: 'Realtime dashboard met alle cijfers die ertoe doen.' },
  ],
  title = 'Waarom kiezen voor BLURR',
  subtitle = 'Wij bieden meer dan een bureau — we zijn jouw groeipartner.',
  columns = 3,
} = Astro.props;
---

<section class="ife">
  <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}`}>
    {features.map((f) => (
      <div class="ife__item">
        <span class="ife__icon" aria-hidden="true">{f.icon}</span>
        <h3 class="ife__name">{f.title}</h3>
        <p class="ife__body">{f.body}</p>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ife { padding: 3rem 0; }
  .ife__header { text-align: center; margin-bottom: 3rem; }
  .ife__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.75rem;
  }
  .ife__subtitle {
    font-size: 1.05rem;
    color: #666;
    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: 0.6rem;
  }
  .ife__icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  .ife__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
  }
  .ife__body {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  @media (max-width: 768px) { .ife__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .ife__grid { grid-template-columns: 1fr; } }
</style>