IconHorizontal icon

---
/**
 * IconHorizontal
 * Verticale lijst van horizontale items: icoon-blokje links, titel + beschrijving rechts.
 * Geschikt als value-prop of feature-lijst.
 *
 * Props:
 * - headline?: string        optionele sectiekop
 * - items: { icon?: string; title: string; description: string }[]
 * - accentColor?: string     default '#6366f1'
 * - theme?: 'light' | 'dark'  default 'light'
 */
interface Props {
  headline?: string;
  items: { icon?: string; title: string; description: string }[];
  accentColor?: string;
  theme?: 'light' | 'dark';
}

const { headline, items, accentColor = '#6366f1', theme = 'light' } = Astro.props;
---

<section class:list={['bl-section', 'ihor', `ihor--${theme}`]}>
  <div class="bl-inner ihor-inner" style={`--color-accent: ${accentColor}`}>
    {headline && <h2 class="ihor-headline">{headline}</h2>}
    <div class="ihor-list">
      {items.map(item => (
        <div class="ihor-item">
          {item.icon && (
            <div class="ihor-icon-wrap" aria-hidden="true">
              <span class="ihor-icon">{item.icon}</span>
            </div>
          )}
          <div class="ihor-content">
            <h3 class="ihor-title">{item.title}</h3>
            <p class="ihor-desc">{item.description}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .ihor--light { background: var(--color-bg, #fff); }
  .ihor--dark { background: #0a0a0a; }

  .ihor-headline {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 2rem;
    letter-spacing: -.02em;
  }
  .ihor--dark .ihor-headline { color: #e8e8e8; }

  .ihor-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ihor-item {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
  }
  .ihor--dark .ihor-item { border-bottom-color: #222; }
  .ihor-item:last-child { border-bottom: none; }

  .ihor-icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-accent) 10%, #fff);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ihor--dark .ihor-icon-wrap { background: color-mix(in srgb, var(--color-accent) 12%, #111); }

  .ihor-icon { font-size: 1.4rem; }

  .ihor-content { flex: 1; }

  .ihor-title {
    margin: 0 0 .375rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
  }
  .ihor--dark .ihor-title { color: #e8e8e8; }

  .ihor-desc {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: #6b7280;
  }
  .ihor--dark .ihor-desc { color: #aaa; }
</style>