VideoFeature video

---
/**
 * VideoFeature — heading + feature-lijst links (op de rail), video-player rechts.
 *
 * Props:
 * - heading?: string
 * - videoTitle?: string
 * - poster?: string               (optionele poster-afbeelding i.p.v. placeholder)
 * - videoSrc?: string             (optionele video-bron; toont play-overlay)
 * - features?: { title: string; body?: string }[]
 */
interface Feature {
  title: string;
  body?: string;
}
interface Props {
  heading?: string;
  videoTitle?: string;
  poster?: string;
  videoSrc?: string;
  features?: Feature[];
}
const {
  heading = 'Waarom voor ons kiezen',
  videoTitle = 'Onze aanpak in beeld',
  poster,
  videoSrc,
  features = [
    { title: 'Data-gedreven', body: 'Elke beslissing onderbouwd met cijfers.' },
    { title: 'Snel en agile', body: 'Wekelijkse sprints.' },
    { title: 'Resultaatgericht', body: 'KPIs bepalen we samen vóór de lancering.' },
  ],
} = Astro.props;
---

<section class="bl-section vft">
  <div class="bl-inner vft__inner">
    {heading && <h2 class="vft__heading">{heading}</h2>}
    <div class="vft__layout">
      <div class="vft__features">
        {features.map((f) => (
          <div class="vft__feature">
            <span class="vft__icon" aria-hidden="true">→</span>
            <div>
              <p class="vft__feat-title">{f.title}</p>
              {f.body && <p class="vft__feat-body">{f.body}</p>}
            </div>
          </div>
        ))}
      </div>
      <div class="vft__media">
        <div class="vft__player">
          {videoSrc ? (
            <video class="vft__video" src={videoSrc} poster={poster} controls preload="metadata"></video>
          ) : (
            <div class="vft__placeholder" aria-label={videoTitle} style={poster ? `background-image:url(${poster})` : undefined}>
              <svg width="52" height="52" viewBox="0 0 52 52">
                <circle cx="26" cy="26" r="26" fill="rgba(99,102,241,0.85)"></circle>
                <polygon points="21,13 43,26 21,39" fill="#fff"></polygon>
              </svg>
            </div>
          )}
        </div>
        {videoTitle && <p class="vft__video-title">{videoTitle}</p>}
      </div>
    </div>
  </div>
</section>

<style>
.vft__heading{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 3rem;line-height:1.2}
.vft__layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.vft__player{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.vft__video{width:100%;height:100%;object-fit:cover}
.vft__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vft__video-title{font-size:.9rem;color:#888;margin:.6rem 0 0;font-style:italic}
.vft__features{display:flex;flex-direction:column;gap:1.5rem}
.vft__feature{display:flex;gap:1rem;align-items:flex-start}
.vft__icon{font-size:1.5rem;flex-shrink:0;margin-top:.1em}
.vft__feat-title{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .3rem}
.vft__feat-body{font-size:.9rem;color:#666;line-height:1.6;margin:0}
@media (max-width:768px){.vft__layout{grid-template-columns:1fr}.vft__media{order:-1}}
</style>