ListComparison list

---
/**
 * ListComparison
 * Vergelijkingstabel: twee kolommen (zonder/met) met feature-rijen.
 *
 * Props:
 * - colLeft?: string          label linkerkolom (default 'Zonder ons')
 * - colRight?: string         label rechterkolom (default 'Met ons')
 * - rows?: Array<{ label: string; left?: boolean; right?: boolean }>
 */
interface Props {
  colLeft?: string;
  colRight?: string;
  rows?: { label: string; left?: boolean; right?: boolean }[];
}

const {
  colLeft = 'Zonder ons',
  colRight = 'Met ons',
  rows = [
    { label: 'Meetbare ROI', left: false, right: true },
    { label: 'Dedicated strategie', left: false, right: true },
    { label: 'Wekelijkse rapportage', left: false, right: true },
    { label: 'Transparante kosten', left: false, right: true },
  ],
} = Astro.props;
---

<section class="bl-section lst-cmp-section">
  <div class="bl-inner">
    <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">{colLeft}</span>
          <span class="lst-cmp__col-head lst-cmp__col-head--right">{colRight}</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 ? ' lst-cmp__cell--yes' : ''}`}>{row.left ? '✓' : ''}</span>
            <span class={`lst-cmp__cell${row.right ? ' lst-cmp__cell--yes' : ''}`}>{row.right ? '✓' : ''}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
.lst-cmp{overflow-x:auto}
.lst-cmp__table{min-width:360px;border:1px solid #e5e5e5;border-radius:.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:.6rem 1.25rem;border-bottom:1px solid #e5e5e5}
.lst-cmp__col-head{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-align:center}
.lst-cmp__col-head--left{color:#999}
.lst-cmp__col-head--right{color:var(--color-accent, #6366f1)}
.lst-cmp__row{padding:.75rem 1.25rem;border-bottom:1px solid #f0f0f0}
.lst-cmp__row:last-child{border-bottom:none}
.lst-cmp__label{font-size:.95rem;color:var(--color-primary, #0a0a0a)}
.lst-cmp__cell{text-align:center;font-size:1rem;color:#ccc;font-weight:700}
.lst-cmp__cell--yes{color:var(--color-accent, #6366f1)}
</style>