VideoShort video

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

const {
  src = '',
  poster = '',
  alt = 'Short video',
  title = '60 seconden over waarom BLURR anders is',
  caption = '#marketing #groei #resultaat',
  duration = '0:58',
} = Astro.props;
---

<div class="vsr">
  <div class="vsr__player">
    {src ? (
      <video class="vsr__video" src={src} poster={poster || undefined} controls playsinline></video>
    ) : (
      <div class="vsr__placeholder" aria-label={alt}>
        <span class="vsr__play" aria-hidden="true">
          <svg width="44" height="44" viewBox="0 0 44 44">
            <circle cx="22" cy="22" r="22" fill="rgba(99,102,241,0.9)"/>
            <polygon points="17,11 37,22 17,33" fill="#fff"/>
          </svg>
        </span>
      </div>
    )}
    {duration && <span class="vsr__duration">{duration}</span>}
  </div>
  <div class="vsr__meta">
    <p class="vsr__title">{title}</p>
    {caption && <p class="vsr__caption">{caption}</p>}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vsr {
    display: inline-flex;
    flex-direction: column;
    max-width: 320px;
    gap: 0.75rem;
  }
  .vsr__player {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
  }
  .vsr__video { width: 100%; height: 100%; object-fit: cover; }
  .vsr__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a20 0%, #1a1a40 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vsr__duration {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
  }
  .vsr__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.2rem;
    line-height: 1.4;
  }
  .vsr__caption {
    font-size: 0.8rem;
    color: var(--color-accent, #6366f1);
    margin: 0;
    font-weight: 500;
  }
</style>