VideoRecap video

---
interface Chapter {
  time: string;
  title: string;
  href?: string;
}

interface Props {
  poster?: string;
  videoTitle?: string;
  chapters?: Chapter[];
}

const {
  poster = '',
  videoTitle = 'Complete gids: merkstrategie voor snelle groei',
  chapters = [
    { time: '0:00', title: 'Inleiding: wat is merkstrategie?' },
    { time: '4:20', title: 'Stap 1: Doelgroep definiëren' },
    { time: '9:45', title: 'Stap 2: Positionering bepalen' },
    { time: '16:10', title: 'Stap 3: Visuele identiteit bouwen' },
    { time: '23:30', title: 'Stap 4: Campagnes lanceren' },
    { time: '30:05', title: 'Conclusie & actieplan' },
  ],
} = Astro.props;
---

<section class="vrc">
  <div class="vrc__player">
    {poster ? (
      <img class="vrc__poster" src={poster} alt={videoTitle} />
    ) : (
      <div class="vrc__placeholder" aria-label={videoTitle}>
        <svg width="52" height="52" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="26" fill="rgba(99,102,241,0.85)"/>
          <polygon points="21,13 43,26 21,39" fill="#fff"/>
        </svg>
      </div>
    )}
  </div>
  <div class="vrc__sidebar">
    <h3 class="vrc__title">{videoTitle}</h3>
    <p class="vrc__label">Hoofdstukken</p>
    <ol class="vrc__chapters">
      {chapters.map((ch) => (
        <li class="vrc__chapter">
          <a class="vrc__chapter-link" href={ch.href ?? '#'}>
            <span class="vrc__ch-time">{ch.time}</span>
            <span class="vrc__ch-title">{ch.title}</span>
          </a>
        </li>
      ))}
    </ol>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .vrc {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem 0;
  }
  .vrc__player {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
  }
  .vrc__poster { width: 100%; height: 100%; object-fit: cover; }
  .vrc__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vrc__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1rem;
    line-height: 1.4;
  }
  .vrc__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 0.5rem;
  }
  .vrc__chapters {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
  }
  .vrc__chapter {
    border-bottom: 1px solid #eee;
  }
  .vrc__chapter:last-child { border-bottom: none; }
  .vrc__chapter-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
  }
  .vrc__chapter-link:hover { background: #f8f8ff; }
  .vrc__ch-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent, #6366f1);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .vrc__ch-title {
    font-size: 0.82rem;
    color: var(--color-primary, #0a0a0a);
    font-weight: 500;
    line-height: 1.3;
  }
  @media (max-width: 768px) {
    .vrc { grid-template-columns: 1fr; }
  }
</style>