IconHorizontal icon

---
/**
 * IconHorizontal
 * Horizontale icoon + tekst rijen
 */
interface HorizontalItem {
  icon: string;
  title: string;
  desc: string;
}
interface Props {
  items?: HorizontalItem[];
}
const { items = [
  { icon: '🎯', title: 'Klantgerichte strategie', desc: 'We starten met jouw klant — wie zijn ze, wat zoeken ze, hoe beslissen ze. Van daaruit bouwen we je marketingaanpak.' },
  { icon: '📊', title: 'Data als fundament', desc: 'Beslissingen op basis van feiten, niet gevoel. We meten wat werkt en schalen dat op — continu.' },
  { icon: '🤝', title: 'Transparante samenwerking', desc: 'Geen verborgen kosten, geen vage resultaten. Je weet altijd wat we doen en waarom.' },
  { icon: '🔄', title: 'Agile werkwijze', desc: 'Korte sprints, snelle feedback en doorlopende verbetering zodat we flexibel reageren op marktveranderingen.' },
] } = Astro.props;
---

<div class="ihor-list">
  {items.map(item => (
    <div class="ihor-item">
      <div class="ihor-icon-wrap">
        <span class="ihor-icon">{item.icon}</span>
      </div>
      <div class="ihor-content">
        <h3 class="ihor-title">{item.title}</h3>
        <p class="ihor-desc">{item.desc}</p>
      </div>
    </div>
  ))}
</div>

<style>
  .ihor-list {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: system-ui, sans-serif;
    max-width: 680px;
  }
  .ihor-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
  }
  .ihor-item:last-child { border-bottom: none; }
  .ihor-icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #f5f3ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ihor-icon { font-size: 1.4rem; }
  .ihor-content { flex: 1; }
  .ihor-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .ihor-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.65;
    color: #6b7280;
  }
</style>