IconCards icon

---
/**
 * IconCards
 * Icoon-kaarten in een grid met hover-effect
 */
interface CardItem {
  icon: string;
  title: string;
  desc: string;
}
interface Props {
  items?: CardItem[];
  columns?: number;
}
const { items = [
  { icon: '📈', title: 'SEO & Content', desc: 'Organisch gevonden worden door de juiste mensen op het juiste moment.' },
  { icon: '💡', title: 'Betaalde Advertenties', desc: 'Google Ads en Meta campagnes die direct resultaat leveren.' },
  { icon: '🎨', title: 'Webdesign', desc: 'Websites die converteren — mooi én functioneel gebouwd.' },
  { icon: '📬', title: 'E-mail Marketing', desc: 'Geautomatiseerde flows die leads omzetten in klanten.' },
  { icon: '📱', title: 'Social Media', desc: 'Consistente aanwezigheid die vertrouwen en engagement opbouwt.' },
  { icon: '🔍', title: 'Analytics', desc: 'Inzicht in wat werkt, zodat je budget nooit verspild wordt.' },
], columns = 3 } = Astro.props;
---

<div class="ic-grid" style={`--cols: ${columns}`}>
  {items.map(item => (
    <div class="ic-card">
      <div class="ic-icon-wrap">
        <span class="ic-icon">{item.icon}</span>
      </div>
      <h3 class="ic-title">{item.title}</h3>
      <p class="ic-desc">{item.desc}</p>
    </div>
  ))}
</div>

<style>
  .ic-grid {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    --cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 20px;
    font-family: system-ui, sans-serif;
    padding: 24px;
  }
  @media (max-width: 768px) {
    .ic-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .ic-grid { grid-template-columns: 1fr; }
  }
  .ic-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
  }
  .ic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99,102,241,0.12);
  }
  .ic-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #f0f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ic-icon { font-size: 1.6rem; }
  .ic-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .ic-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6b7280;
  }
</style>