IconDark icon

---
/**
 * IconDark
 * Donkere achtergrond icoon-showcase
 */
interface DarkItem {
  icon: string;
  title: string;
  desc: string;
}
interface Props {
  headline?: string;
  items?: DarkItem[];
}
const { headline = 'Onze expertises', items = [
  { icon: '🔍', title: 'SEO & Zoekmachine', desc: 'Technische SEO, contentstrategie en linkbuilding voor duurzame groei.' },
  { icon: '💰', title: 'Paid Media', desc: 'Google Ads, Meta en LinkedIn campagnes met maximale ROAS.' },
  { icon: '🎨', title: 'Creative & Design', desc: 'Visuele identiteit en content die jouw merk onmiskenbaar maakt.' },
  { icon: '📊', title: 'Data & Rapportage', desc: 'Dashboards en inzichten die je helpen betere beslissingen te nemen.' },
  { icon: '🤝', title: 'Conversie-optimalisatie', desc: 'Van bezoeker naar klant — elke stap in de funnel geoptimaliseerd.' },
  { icon: '📧', title: 'Marketing Automation', desc: 'Geautomatiseerde flows die leads kwalificeren en nurturen.' },
] } = Astro.props;
---

<section class="idark-section">
  {headline && <h2 class="idark-headline">{headline}</h2>}
  <div class="idark-grid">
    {items.map(item => (
      <div class="idark-card">
        <span class="idark-icon">{item.icon}</span>
        <h3 class="idark-title">{item.title}</h3>
        <p class="idark-desc">{item.desc}</p>
      </div>
    ))}
  </div>
</section>

<style>
  .idark-section {
    --color-accent: #6366f1;
    background: #0a0a0a;
    padding: 64px 24px;
    font-family: system-ui, sans-serif;
  }
  .idark-headline {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 48px;
    letter-spacing: -0.02em;
  }
  .idark-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 720px) {
    .idark-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .idark-grid { grid-template-columns: 1fr; }
  }
  .idark-card {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, transform 0.2s;
  }
  .idark-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
  }
  .idark-icon { font-size: 1.8rem; }
  .idark-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f9fafb;
  }
  .idark-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #9ca3af;
  }
</style>