ListComparison list

---
interface Props {
  leftLabel?: string;
  rightLabel?: string;
  rows: Array<{ label: string; left: boolean; right: boolean }>;
}
const { leftLabel = "Zonder BLURR", rightLabel = "Met BLURR", rows = [
  { label: "Meetbare ROI", left: false, right: true },
  { label: "Dedicated strategie", left: false, right: true },
  { label: "Wekelijkse rapportage", left: false, right: true },
  { label: "A/B testen", left: false, right: true },
  { label: "Transparante kosten", left: false, right: true },
  { label: "Flexibel contract", left: false, right: true },
] } = Astro.props;
---

<div class="lst-cmp">
  <div class="lst-cmp__table">
    <div class="lst-cmp__head">
      <span class="lst-cmp__feature-head"></span>
      <span class="lst-cmp__col-head lst-cmp__col-head--left">{leftLabel}</span>
      <span class="lst-cmp__col-head lst-cmp__col-head--right">{rightLabel}</span>
    </div>
    {rows.map(row => (
      <div class="lst-cmp__row">
        <span class="lst-cmp__label">{row.label}</span>
        <span class="lst-cmp__cell">{row.left ? "✓" : "✗"}</span>
        <span class="lst-cmp__cell lst-cmp__cell--yes">{row.right ? "✓" : "✗"}</span>
      </div>
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-cmp { overflow-x: auto; }
  .lst-cmp__table {
    min-width: 360px;
    border: 1px solid #e5e5e5;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .lst-cmp__head, .lst-cmp__row {
    display: grid;
    grid-template-columns: 1fr 120px 120px;
    align-items: center;
  }
  .lst-cmp__head {
    background: #f7f7f7;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .lst-cmp__col-head {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .lst-cmp__col-head--left { color: #999; }
  .lst-cmp__col-head--right { color: var(--color-accent); }
  .lst-cmp__row {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
  }
  .lst-cmp__row:last-child { border-bottom: none; }
  .lst-cmp__label { font-size: 0.95rem; color: var(--color-primary); }
  .lst-cmp__cell {
    text-align: center;
    font-size: 1rem;
    color: #ccc;
    font-weight: 700;
  }
  .lst-cmp__cell--yes { color: var(--color-accent); }
</style>