VideoWide video

---
interface Props {
  src?: string;
  poster?: string;
  alt?: string;
  title?: string;
  subtitle?: string;
}

const {
  src = '',
  poster = '',
  alt = 'Cinematic video',
  title = 'Showreel 2024',
  subtitle = 'Een jaar vol groei, creativiteit en resultaat.',
} = Astro.props;
---

<section class="vwd">
  <div class="vwd__player">
    {src ? (
      <video class="vwd__video" src={src} poster={poster || undefined} controls></video>
    ) : (
      <div class="vwd__placeholder" aria-label={alt}>
        <span class="vwd__play" aria-hidden="true">
          <svg width="64" height="64" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="32" fill="rgba(99,102,241,0.85)"/>
            <polygon points="26,18 52,32 26,46" fill="#fff"/>
          </svg>
        </span>
      </div>
    )}
  </div>
  {(title || subtitle) && (
    <div class="vwd__meta">
      {title && <h2 class="vwd__title">{title}</h2>}
      {subtitle && <p class="vwd__subtitle">{subtitle}</p>}
    </div>
  )}
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vwd { padding: 2rem 0; }
  .vwd__player {
    position: relative;
    aspect-ratio: 21/9;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0a;
  }
  .vwd__video { width: 100%; height: 100%; object-fit: cover; }
  .vwd__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vwd__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
  }
  .vwd__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
  }
  .vwd__subtitle {
    font-size: 0.9rem;
    color: #888;
    margin: 0;
  }
</style>