IconCard icon

---
interface Props {
  icon?: string;
  title?: string;
  description?: string;
  href?: string;
  cta?: string;
}

const {
  icon = '🎯',
  title = 'Performance Advertising',
  description = 'Data-gedreven campagnes op Google en Meta die echt converteren. Geen verspilde budgetten — alleen aantoonbaar resultaat.',
  href = '#',
  cta = 'Meer weten',
} = Astro.props;
---

<div class="icd">
  <div class="icd__icon-wrap" aria-hidden="true">
    <span class="icd__icon">{icon}</span>
  </div>
  <h3 class="icd__title">{title}</h3>
  <p class="icd__desc">{description}</p>
  {cta && href && (
    <a class="icd__link" href={href}>{cta} →</a>
  )}
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .icd {
    padding: 2rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .icd:hover {
    box-shadow: 0 8px 24px rgba(99,102,241,0.12);
    transform: translateY(-3px);
  }
  .icd__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f0f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
  }
  .icd__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
  }
  .icd__desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    flex: 1;
  }
  .icd__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent, #6366f1);
    text-decoration: none;
    margin-top: auto;
  }
  .icd__link:hover { text-decoration: underline; }
</style>