VideoPip video

---
interface Props {
  mainPoster?: string;
  pipPoster?: string;
  mainAlt?: string;
  pipAlt?: string;
  pipPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  title?: string;
}

const {
  mainPoster = '',
  pipPoster = '',
  mainAlt = 'Hoofdvideo',
  pipAlt = 'Picture in picture',
  pipPosition = 'bottom-right',
  title = 'Live demo & presentatie',
} = Astro.props;
---

<section class="vpip">
  {title && <h2 class="vpip__title">{title}</h2>}
  <div class:list={['vpip__wrapper', `vpip__wrapper--${pipPosition}`]}>
    <div class="vpip__main">
      {mainPoster ? (
        <img class="vpip__main-img" src={mainPoster} alt={mainAlt} />
      ) : (
        <div class="vpip__main-placeholder" aria-label={mainAlt}>
          <span class="vpip__hint" aria-hidden="true">Hoofdvideo</span>
        </div>
      )}
    </div>
    <div class="vpip__pip">
      {pipPoster ? (
        <img class="vpip__pip-img" src={pipPoster} alt={pipAlt} />
      ) : (
        <div class="vpip__pip-placeholder" aria-label={pipAlt}>
          <span class="vpip__pip-hint" aria-hidden="true">PiP</span>
        </div>
      )}
    </div>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vpip { padding: 2rem 0; }
  .vpip__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.5rem;
  }
  .vpip__wrapper {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
  }
  .vpip__main {
    width: 100%;
    height: 100%;
  }
  .vpip__main-img { width: 100%; height: 100%; object-fit: cover; }
  .vpip__main-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 0.9rem;
  }
  .vpip__pip {
    position: absolute;
    width: 28%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .vpip__wrapper--bottom-right .vpip__pip { bottom: 1.25rem; right: 1.25rem; }
  .vpip__wrapper--bottom-left .vpip__pip { bottom: 1.25rem; left: 1.25rem; }
  .vpip__wrapper--top-right .vpip__pip { top: 1.25rem; right: 1.25rem; }
  .vpip__wrapper--top-left .vpip__pip { top: 1.25rem; left: 1.25rem; }
  .vpip__pip-img { width: 100%; height: 100%; object-fit: cover; }
  .vpip__pip-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a4a 0%, #3a3a6a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 600;
  }
</style>