VideoSplit video

---
/**
 * VideoSplit — tekst links (op de rail), video rechts.
 *
 * Props:
 * - sub?: string
 * - headline?: string             (HTML toegestaan)
 * - body?: string                 (HTML toegestaan)
 * - points?: string[]
 * - videoSrc?: string
 * - poster?: string
 */
interface Props {
  sub?: string;
  headline?: string;
  body?: string;
  points?: string[];
  videoSrc?: string;
  poster?: string;
}
const {
  sub = 'Onze aanpak in 3 minuten',
  headline = 'Zie hoe wij werken',
  body = 'Van strategie tot executie, wij nemen het volledig over.',
  points = [
    'Dagelijkse optimalisaties zonder extra kosten',
    'Transparant rapportage-dashboard',
    'Aantoonbare groei in 90 dagen of geld terug',
  ],
  videoSrc = 'https://www.w3schools.com/html/mov_bbb.mp4',
  poster,
} = Astro.props;
---

<section class="bl-section vsp">
  <div class="bl-inner vsp__inner">
    <div class="vsp__text-col">
      {sub && <p class="vsp__sub">{sub}</p>}
      {headline && <h2 class="vsp__headline" set:html={headline}></h2>}
      {body && <p class="vsp__body" set:html={body}></p>}
      {points.length > 0 && (
        <ul class="vsp__points">
          {points.map((p) => <li>{p}</li>)}
        </ul>
      )}
    </div>
    <div class="vsp__video-col">
      <div class="vsp__video-wrap">
        <video class="vsp__video" src={videoSrc} poster={poster} controls preload="metadata"></video>
      </div>
    </div>
  </div>
</section>

<style>
.vsp{background:#fff}
.vsp__inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.vsp__video-wrap{border-radius:14px;overflow:hidden;box-shadow:0 8px 40px #0000001a;aspect-ratio:16/9;background:#0a0a0a}
.vsp__video{width:100%;height:100%;display:block;object-fit:cover}
.vsp__sub{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:0 0 .75rem}
.vsp__headline{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1rem;line-height:1.2;letter-spacing:-.02em}
.vsp__body{color:#555;font-size:.97rem;line-height:1.7;margin:0 0 1.5rem}
.vsp__points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.vsp__points li{font-size:.9rem;color:#333;padding-left:1.4rem;position:relative}
.vsp__points li:before{content:"✓";position:absolute;left:0;color:var(--color-accent, #6366f1);font-weight:700}
@media (max-width:768px){.vsp__inner{grid-template-columns:1fr;gap:2rem}.vsp__video-col{order:-1}}
</style>