BeforeAfter Social Proof

---
/**
 * BeforeAfter
 * Voor/na vergelijking van resultaten of situaties.
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  beforeLabel?: string;
  afterLabel?: string;
  comparisons: { metric: string; before: string; after: string; improvement?: string }[];
  bg?: 'white' | 'light' | 'dark';
}
const { eyebrow, headline, beforeLabel = 'Voor BLURR', afterLabel = 'Na BLURR', comparisons, bg = 'light' } = Astro.props;
---
<section class={`ba ba--${bg}`}>
  <div class="ba-inner">
    {(eyebrow || headline) && (
      <div class="ba-header">
        {eyebrow && <span class="ba-eyebrow">{eyebrow}</span>}
        {headline && <h2 class="ba-headline">{headline}</h2>}
      </div>
    )}
    <div class="ba-table">
      <div class="ba-table-head">
        <div class="ba-col-metric"></div>
        <div class="ba-col-before">{beforeLabel}</div>
        <div class="ba-col-after">{afterLabel}</div>
        <div class="ba-col-change">Verschil</div>
      </div>
      {comparisons.map(c => (
        <div class="ba-row">
          <div class="ba-metric">{c.metric}</div>
          <div class="ba-before">{c.before}</div>
          <div class="ba-after">{c.after}</div>
          <div class="ba-change">{c.improvement || '↑'}</div>
        </div>
      ))}
    </div>
  </div>
</section>
<style>
  .ba { padding: 5rem 2rem; }
  .ba--white { background: #fff; border-top: 1px solid #e5e7eb; }
  .ba--light { background: #f8fafc; border-top: 1px solid #e5e7eb; }
  .ba--dark { background: #0a0a0a; }
  .ba-inner { max-width: 900px; margin: 0 auto; }
  .ba-header { text-align: center; margin-bottom: 3rem; }
  .ba-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin-bottom: 0.75rem; }
  .ba-headline { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; margin: 0; }
  .ba--white .ba-headline, .ba--light .ba-headline { color: #0a0a0a; }
  .ba--dark .ba-headline { color: #fff; }
  .ba-table { border-radius: 1rem; overflow: hidden; border: 1px solid #e5e7eb; }
  .ba--dark .ba-table { border-color: rgba(255,255,255,0.08); }
  .ba-table-head, .ba-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
  .ba-table-head { padding: 0.875rem 1.25rem; }
  .ba--white .ba-table-head, .ba--light .ba-table-head { background: #f3f4f6; }
  .ba--dark .ba-table-head { background: rgba(255,255,255,0.05); }
  .ba-col-before, .ba-col-after, .ba-col-change, .ba-col-metric { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .ba--white .ba-col-before, .ba--white .ba-col-metric, .ba--light .ba-col-before, .ba--light .ba-col-metric { color: #9ca3af; }
  .ba-col-after { color: #10b981; }
  .ba-col-change { color: var(--color-accent,#6366f1); }
  .ba-row { padding: 1rem 1.25rem; align-items: center; border-top: 1px solid #e5e7eb; }
  .ba--dark .ba-row { border-color: rgba(255,255,255,0.06); }
  .ba-row:hover { }
  .ba--white .ba-row:hover, .ba--light .ba-row:hover { background: #f9fafb; }
  .ba--dark .ba-row:hover { background: rgba(255,255,255,0.02); }
  .ba-metric { font-size: 0.9375rem; font-weight: 600; }
  .ba--white .ba-metric, .ba--light .ba-metric { color: #0a0a0a; }
  .ba--dark .ba-metric { color: #fff; }
  .ba-before { font-size: 0.9375rem; }
  .ba--white .ba-before, .ba--light .ba-before { color: #9ca3af; }
  .ba--dark .ba-before { color: rgba(255,255,255,0.3); }
  .ba-after { font-size: 0.9375rem; font-weight: 700; color: #10b981; }
  .ba-change { font-size: 0.875rem; font-weight: 700; color: var(--color-accent,#6366f1); }
</style>