VideoSplitScreen video

---
interface SplitItem {
  poster?: string;
  alt: string;
  label: string;
  description?: string;
}

interface Props {
  left?: SplitItem;
  right?: SplitItem;
  title?: string;
  dividerLabel?: string;
}

const {
  left = { alt: 'Optie A', label: 'Zonder BLURR', description: 'Gefragmenteerd, duur en zonder duidelijke richting.' },
  right = { alt: 'Optie B', label: 'Met BLURR', description: 'Geïntegreerd, meetbaar en resultaatgericht.' },
  title = 'Het verschil in één oogopslag',
  dividerLabel = 'VS',
} = Astro.props;
---

<section class="vss">
  {title && <h2 class="vss__title">{title}</h2>}
  <div class="vss__wrapper">
    <div class="vss__panel vss__panel--left">
      <div class="vss__media">
        {left.poster ? (
          <img class="vss__img" src={left.poster} alt={left.alt} />
        ) : (
          <div class="vss__placeholder vss__placeholder--left" aria-label={left.alt}></div>
        )}
      </div>
      <div class="vss__meta">
        <p class="vss__label">{left.label}</p>
        {left.description && <p class="vss__desc">{left.description}</p>}
      </div>
    </div>
    <div class="vss__divider" aria-label={dividerLabel}>
      <span class="vss__divider-text">{dividerLabel}</span>
    </div>
    <div class="vss__panel vss__panel--right">
      <div class="vss__media">
        {right.poster ? (
          <img class="vss__img" src={right.poster} alt={right.alt} />
        ) : (
          <div class="vss__placeholder vss__placeholder--right" aria-label={right.alt}></div>
        )}
      </div>
      <div class="vss__meta vss__meta--right">
        <p class="vss__label vss__label--accent">{right.label}</p>
        {right.description && <p class="vss__desc">{right.description}</p>}
      </div>
    </div>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vss { padding: 3rem 0; }
  .vss__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 2.5rem;
  }
  .vss__wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0;
  }
  .vss__panel {}
  .vss__media {
    aspect-ratio: 9/16;
    overflow: hidden;
  }
  .vss__img { width: 100%; height: 100%; object-fit: cover; }
  .vss__placeholder {
    width: 100%;
    height: 100%;
  }
  .vss__placeholder--left {
    background: linear-gradient(180deg, #2a2a2a 0%, #444 100%);
  }
  .vss__placeholder--right {
    background: linear-gradient(180deg, #1a1a3a 0%, #3a3a7a 100%);
  }
  .vss__meta {
    padding: 1rem 1.25rem;
    background: #f9f9f9;
  }
  .vss__meta--right { background: #f5f5ff; }
  .vss__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.3rem;
  }
  .vss__label--accent { color: var(--color-accent, #6366f1); }
  .vss__desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
  }
  .vss__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    align-self: stretch;
    background: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }
  .vss__divider-text {
    writing-mode: vertical-rl;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ccc;
    text-transform: uppercase;
  }
  @media (max-width: 640px) {
    .vss__wrapper { grid-template-columns: 1fr; }
    .vss__divider { width: 100%; height: 3rem; writing-mode: horizontal-tb; }
    .vss__divider-text { writing-mode: horizontal-tb; }
    .vss__media { aspect-ratio: 16/9; }
  }
</style>