ComparisonSection Sections

---
/**
 * ComparisonSection
 * Vergelijking tussen twee opties (bijv. BLURR vs traditioneel bureau)
 */
interface Side {
  label: string;
  items: string[];
}
interface Props {
  headline?: string;
  left?: Side;
  right?: Side;
}
const { headline = 'BLURR vs traditioneel bureau', left = {
  label: 'BLURR',
  items: [
    'Directe communicatie met het uitvoerende team',
    'Strategie én uitvoering onder één dak',
    'Maandelijks opzegbaar na drie maanden',
    'Transparante rapportages met harde cijfers',
    'Proactief advies — wij denken mee',
    'Gespecialiseerd in groeimarketing',
    'Snelle onboarding: live in twee weken',
  ],
}, right = {
  label: 'Traditioneel bureau',
  items: [
    'Account manager als tussenpersoon',
    'Strategie apart gefactureerd',
    'Lange contracten met hoge exitkosten',
    'Glossy rapporten zonder concrete conclusies',
    'Reactief — wacht op jouw instructies',
    'Breed en generalistisch',
    'Maanden aan opstarttijd',
  ],
} } = Astro.props;
---

<section class="cmp-section">
  {headline && <h2 class="cmp-headline">{headline}</h2>}
  <div class="cmp-grid">
    <div class="cmp-col cmp-col--left">
      <div class="cmp-col-header">
        <span class="cmp-badge cmp-badge--accent">✓ {left.label}</span>
      </div>
      <ul class="cmp-list">
        {left.items.map(item => (
          <li class="cmp-item cmp-item--good">
            <span class="cmp-check">✓</span>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
    <div class="cmp-col cmp-col--right">
      <div class="cmp-col-header">
        <span class="cmp-badge cmp-badge--muted">✗ {right.label}</span>
      </div>
      <ul class="cmp-list">
        {right.items.map(item => (
          <li class="cmp-item cmp-item--bad">
            <span class="cmp-cross">✗</span>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
  </div>
</section>

<style>
  .cmp-section {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    padding: 64px 24px;
    font-family: system-ui, sans-serif;
    max-width: 880px;
    margin: 0 auto;
  }
  .cmp-headline {
    text-align: center;
    margin: 0 0 40px;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.025em;
  }
  .cmp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 600px) {
    .cmp-grid { grid-template-columns: 1fr; }
  }
  .cmp-col {
    border-radius: 16px;
    overflow: hidden;
  }
  .cmp-col--left {
    border: 2px solid var(--color-accent);
    background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%);
  }
  .cmp-col--right {
    border: 2px solid #e5e7eb;
    background: #fafafa;
  }
  .cmp-col-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
  }
  .cmp-col--left .cmp-col-header { border-bottom-color: #ede9fe; }
  .cmp-badge {
    font-size: 0.875rem;
    font-weight: 700;
  }
  .cmp-badge--accent { color: var(--color-accent); }
  .cmp-badge--muted { color: #9ca3af; }
  .cmp-list {
    list-style: none;
    margin: 0;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cmp-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .cmp-item--good { color: #1f2937; }
  .cmp-item--bad { color: #9ca3af; }
  .cmp-check {
    color: #10b981;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .cmp-cross {
    color: #d1d5db;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }
</style>