VideoFeature video

---
interface Feature {
  icon: string;
  title: string;
  body: string;
}

interface Props {
  src?: string;
  poster?: string;
  videoTitle?: string;
  features?: Feature[];
  heading?: string;
}

const {
  src = '',
  poster = '',
  videoTitle = 'Onze aanpak in beeld',
  features = [
    { icon: '📊', title: 'Data-gedreven', body: 'Elke beslissing onderbouwd met cijfers en analyses.' },
    { icon: '⚡', title: 'Snel en agile', body: 'Wekelijkse sprints, geen maandenlange trajecten.' },
    { icon: '🎯', title: 'Resultaatgericht', body: 'KPIs bepalen we samen vóór de lancering.' },
    { icon: '🔄', title: 'Continue optimalisatie', body: 'We leren, testen en verbeteren elke week.' },
  ],
  heading = 'Waarom BLURR',
} = Astro.props;
---

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

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vft { padding: 3rem 0; }
  .vft__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 3rem;
    text-align: center;
  }
  .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 0%, #1a1a3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vft__video-title {
    font-size: 0.9rem;
    color: #888;
    margin: 0.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: 0.1em;
  }
  .vft__feat-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.3rem;
  }
  .vft__feat-body {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  @media (max-width: 768px) {
    .vft__layout { grid-template-columns: 1fr; }
  }
</style>