VideoEmbed video

---
interface Props {
  videoId: string;
  platform?: 'youtube' | 'vimeo';
  eyebrow?: string;
  headline?: string;
  sub?: string;
  width?: 'full' | 'contained';
}

const {
  videoId,
  platform = 'youtube',
  eyebrow,
  headline,
  sub,
  width = 'contained',
} = Astro.props;

const embedUrl =
  platform === 'vimeo'
    ? `https://player.vimeo.com/video/${videoId}`
    : `https://www.youtube.com/embed/${videoId}?rel=0`;
---

<section class={`ve__section ve__section--${width}`}>
  {(eyebrow || headline || sub) && (
    <div class="ve__header">
      {eyebrow && <p class="ve__eyebrow">{eyebrow}</p>}
      {headline && <h2 class="ve__headline">{headline}</h2>}
      {sub && <p class="ve__sub">{sub}</p>}
    </div>
  )}

  <div class="ve__embed-wrap">
    <iframe
      class="ve__iframe"
      src={embedUrl}
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      loading="lazy"
      title={headline ?? 'Video embed'}
      frameborder="0"
    />
  </div>
</section>

<style>
  :root {
    --color-primary: #0a0a0a;
    --color-accent: #6366f1;
    --color-bg: #fff;
    --color-muted: #6b7280;
    --radius: 0.5rem;
  }

  .ve__section {
    padding: 4rem 1.5rem;
    background: var(--color-bg);
  }

  .ve__section--contained .ve__embed-wrap {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .ve__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem;
  }

  .ve__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
  }

  .ve__headline {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
    line-height: 1.2;
  }

  .ve__sub {
    font-size: 1rem;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.6;
  }

  .ve__embed-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  .ve__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>