VideoMuted video

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

const {
  src = '',
  poster = '',
  title = 'Altijd in beweging',
  subtitle = 'BLURR werkt continu aan de groei van jouw merk — ook terwijl jij slaapt.',
  badge = 'Autoplay · Geluidloos',
} = Astro.props;
---

<section class="vmut">
  <div class="vmut__player">
    {src ? (
      <video class="vmut__video" src={src} poster={poster || undefined} autoplay muted loop playsinline></video>
    ) : (
      <div class="vmut__placeholder" aria-label="Muted autoplay video">
        <div class="vmut__motion-hint" aria-hidden="true">
          <div class="vmut__bar"></div>
          <div class="vmut__bar"></div>
          <div class="vmut__bar"></div>
          <div class="vmut__bar"></div>
          <div class="vmut__bar"></div>
        </div>
      </div>
    )}
    {badge && <span class="vmut__badge">{badge}</span>}
  </div>
  <div class="vmut__content">
    <h2 class="vmut__title">{title}</h2>
    <p class="vmut__subtitle">{subtitle}</p>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vmut {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 3rem 0;
  }
  .vmut__player {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 16px;
    overflow: hidden;
    max-width: 300px;
    justify-self: center;
  }
  .vmut__video { width: 100%; height: 100%; object-fit: cover; }
  .vmut__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a20 0%, #1a1a40 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vmut__motion-hint {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
  }
  .vmut__bar {
    width: 8px;
    background: rgba(99,102,241,0.6);
    border-radius: 4px;
    animation: vmut-pulse 1.2s ease-in-out infinite;
  }
  .vmut__bar:nth-child(1) { height: 30%; animation-delay: 0s; }
  .vmut__bar:nth-child(2) { height: 70%; animation-delay: 0.15s; }
  .vmut__bar:nth-child(3) { height: 100%; animation-delay: 0.3s; }
  .vmut__bar:nth-child(4) { height: 60%; animation-delay: 0.45s; }
  .vmut__bar:nth-child(5) { height: 40%; animation-delay: 0.6s; }
  @keyframes vmut-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  .vmut__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.8);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
  }
  .vmut__content {}
  .vmut__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1rem;
    line-height: 1.2;
  }
  .vmut__subtitle {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
  }
  @media (max-width: 768px) {
    .vmut { grid-template-columns: 1fr; }
    .vmut__player { max-width: 220px; }
  }
</style>