ContentComparison content

---
interface Props {
  heading?: string;
  leftLabel?: string;
  rightLabel?: string;
  leftItems?: string[];
  rightItems?: string[];
}

const {
  heading = "Traditioneel bureau vs. BLURR",
  leftLabel = "Traditioneel bureau",
  rightLabel = "BLURR aanpak",
  leftItems = [
    "Lange onboarding van 4–8 weken",
    "Vaste formats, weinig flexibiliteit",
    "Rapportages eens per kwartaal",
    "Gefocust op impressies en bereik",
    "Geen directe toegang tot je team",
    "Contracten van minimaal 12 maanden",
  ],
  rightItems = [
    "Live binnen 2 weken",
    "Maatwerk campagnes per kanaal",
    "Wekelijkse data & inzichten",
    "Conversies en omzet als KPI",
    "Direct lijntje met je vaste strateeg",
    "Flexibele samenwerking, geen lock-in",
  ],
} = Astro.props;
---

<div class="ccp-wrap">
  {heading && <h2 class="ccp-heading">{heading}</h2>}
  <div class="ccp-grid">
    <div class="ccp-col ccp-col--left">
      <div class="ccp-label ccp-label--left">{leftLabel}</div>
      <ul class="ccp-list">
        {leftItems.map(item => (
          <li class="ccp-item ccp-item--left">
            <span class="ccp-icon" aria-hidden="true">✗</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
    <div class="ccp-divider" aria-hidden="true">vs</div>
    <div class="ccp-col ccp-col--right">
      <div class="ccp-label ccp-label--right">{rightLabel}</div>
      <ul class="ccp-list">
        {rightItems.map(item => (
          <li class="ccp-item ccp-item--right">
            <span class="ccp-icon" aria-hidden="true">✓</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  </div>
</div>

<style>
  .ccp-wrap {
    padding: 2.5rem 0;
  }
  .ccp-heading {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 2rem;
    text-align: center;
  }
  .ccp-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
  }
  @media (max-width: 640px) {
    .ccp-grid {
      grid-template-columns: 1fr;
    }
    .ccp-divider { display: none; }
  }
  .ccp-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-align: center;
  }
  .ccp-label--left {
    background: #fee2e2;
    color: #b91c1c;
  }
  .ccp-label--right {
    background: #dcfce7;
    color: #15803d;
  }
  .ccp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .ccp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    padding: 0.75rem;
    border-radius: 6px;
    background: #f9f9f9;
  }
  .ccp-item--left .ccp-icon { color: #ef4444; }
  .ccp-item--right .ccp-icon { color: #22c55e; }
  .ccp-icon {
    font-style: normal;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05rem;
  }
  .ccp-divider {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ccc;
    padding-top: 3.5rem;
  }
</style>