FeaturesIconBar Sections

---
/**
 * FeaturesIconBar
 * 4-koloms compact icon + feature grid. Ideaal voor SaaS feature overzichten.
 */
interface Feature {
  icon: string;
  headline: string;
  body: string;
}

interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  features: Feature[];
  columns?: 2 | 3 | 4;
  bg?: 'white' | 'light' | 'dark';
}

const {
  eyebrow,
  headline,
  sub,
  features = [],
  columns = 4,
  bg = 'white',
} = Astro.props;
---

<section class:list={['fib', `fib--bg-${bg}`]} data-component="features-icon-bar">
  <div class="fib__inner">
    {(eyebrow || headline || sub) && (
      <div class="fib__header">
        {eyebrow && <p class="fib__eyebrow">{eyebrow}</p>}
        {headline && <h2 class="fib__title" set:html={headline} />}
        {sub && <p class="fib__sub">{sub}</p>}
      </div>
    )}

    <div class="fib__grid" style={`--cols: ${columns}`}>
      {features.map(f => (
        <div class="fib__item">
          <div class="fib__icon-wrap">
            <span class="fib__icon" set:html={f.icon} />
          </div>
          <h3 class="fib__item-headline">{f.headline}</h3>
          <p class="fib__item-body">{f.body}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .fib {
    padding: 5rem 1.5rem;
  }

  .fib--bg-white { background: var(--color-bg, #fff); }
  .fib--bg-light { background: #f5f5f7; }
  .fib--bg-dark { background: var(--color-primary, #0a0a0a); }

  .fib__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .fib__header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .fib__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    margin-bottom: 0.75rem;
  }

  .fib__title {
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-primary, #0a0a0a);
    margin-bottom: 0.875rem;
  }

  .fib--bg-dark .fib__title { color: #fff; }

  .fib__title :global(em) {
    font-style: normal;
    color: var(--color-accent, #6366f1);
  }

  .fib__sub {
    font-size: 1.0625rem;
    color: var(--color-muted, #6b7280);
    line-height: 1.65;
  }

  .fib--bg-dark .fib__sub { color: rgba(255,255,255,0.55); }

  /* Grid */
  .fib__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 2.5rem;
  }

  .fib__item {
    display: flex;
    flex-direction: column;
  }

  .fib__icon-wrap {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--color-accent, #6366f1) 12%, transparent);
    border-radius: calc(var(--radius, 0.5rem) * 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent, #6366f1);
    margin-bottom: 1.25rem;
    font-size: 1.375rem;
    flex-shrink: 0;
  }

  .fib__icon-wrap :global(svg) {
    width: 22px;
    height: 22px;
  }

  .fib__item-headline {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin-bottom: 0.5rem;
  }

  .fib--bg-dark .fib__item-headline { color: #fff; }

  .fib__item-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-muted, #6b7280);
  }

  .fib--bg-dark .fib__item-body { color: rgba(255,255,255,0.5); }

  @media (max-width: 900px) {
    .fib__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 540px) {
    .fib__grid { grid-template-columns: 1fr; }
  }
</style>