IconComparison icon

---
interface CompareRow {
  feature: string;
  aValue: string | boolean;
  bValue: string | boolean;
}

interface Props {
  columnA?: string;
  columnB?: string;
  rows?: CompareRow[];
  title?: string;
}

const {
  columnA = 'Traditioneel bureau',
  columnB = 'BLURR',
  rows = [
    { feature: 'Één aanspreekpunt', aValue: false, bValue: true },
    { feature: 'Realtime dashboard', aValue: false, bValue: true },
    { feature: 'Wekelijkse optimalisatie', aValue: false, bValue: true },
    { feature: 'Vaste maandprijs', aValue: false, bValue: true },
    { feature: 'Resultaatgarantie', aValue: false, bValue: true },
    { feature: 'Contractduur', aValue: '12 maanden', bValue: 'Maand tot maand' },
    { feature: 'Opzegtermijn', aValue: '3 maanden', bValue: '1 maand' },
  ],
  title = 'BLURR vs traditioneel bureau',
} = Astro.props;
---

<section class="icmpr">
  {title && <h2 class="icmpr__title">{title}</h2>}
  <div class="icmpr__table">
    <div class="icmpr__header">
      <div class="icmpr__h-feature"></div>
      <div class="icmpr__h-col icmpr__h-col--a">{columnA}</div>
      <div class="icmpr__h-col icmpr__h-col--b">{columnB}</div>
    </div>
    {rows.map((row) => (
      <div class="icmpr__row">
        <div class="icmpr__feature">{row.feature}</div>
        <div class="icmpr__val icmpr__val--a">
          {typeof row.aValue === 'boolean' ? (
            <span class:list={['icmpr__bool', row.aValue ? 'icmpr__bool--yes' : 'icmpr__bool--no']}>
              {row.aValue ? '✓' : '✗'}
            </span>
          ) : row.aValue}
        </div>
        <div class="icmpr__val icmpr__val--b">
          {typeof row.bValue === 'boolean' ? (
            <span class:list={['icmpr__bool', row.bValue ? 'icmpr__bool--yes' : 'icmpr__bool--no']}>
              {row.bValue ? '✓' : '✗'}
            </span>
          ) : row.bValue}
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .icmpr { padding: 2rem 0; }
  .icmpr__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 2rem;
  }
  .icmpr__table {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
  }
  .icmpr__header, .icmpr__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
  }
  .icmpr__header {
    background: #f9f9f9;
    border-bottom: 2px solid #eee;
  }
  .icmpr__h-feature, .icmpr__h-col {
    padding: 0.9rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
  }
  .icmpr__h-col--b { color: var(--color-accent, #6366f1); background: rgba(99,102,241,0.04); }
  .icmpr__row { border-bottom: 1px solid #f0f0f0; }
  .icmpr__row:last-child { border-bottom: none; }
  .icmpr__row:hover { background: #fafafa; }
  .icmpr__feature {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-primary, #0a0a0a);
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  .icmpr__val {
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    color: #666;
  }
  .icmpr__val--b { background: rgba(99,102,241,0.03); }
  .icmpr__bool {
    font-size: 1rem;
    font-weight: 700;
  }
  .icmpr__bool--yes { color: #16a34a; }
  .icmpr__bool--no { color: #dc2626; }
</style>