src/components/video/VideoChapters.astro
---
// VideoChapters, recovered from blurr-components.pages.dev
---
<section class="vch"> <div class="vch__inner"> <div class="vch__player-wrap"> <video class="vch__video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls preload="metadata"></video> </div> <aside class="vch__chapters"> <h3 class="vch__chapters-title">Hoofdstukken</h3> <ol class="vch__list"> <li class="vch__item"> <span class="vch__num">1</span> <div class="vch__info"> <span class="vch__ch-title">Introductie</span> <span class="vch__time">0:00</span> </div> </li><li class="vch__item"> <span class="vch__num">2</span> <div class="vch__info"> <span class="vch__ch-title">Onze aanpak</span> <span class="vch__time">1:30</span> </div> </li><li class="vch__item"> <span class="vch__num">3</span> <div class="vch__info"> <span class="vch__ch-title">Case studies</span> <span class="vch__time">3:45</span> </div> </li><li class="vch__item"> <span class="vch__num">4</span> <div class="vch__info"> <span class="vch__ch-title">Resultaten</span> <span class="vch__time">6:00</span> </div> </li> </ol> </aside> </div> </section>
<style>
.vch{background:var(--color-primary, #0a0a0a);padding:4rem 1.5rem}
.vch__inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 280px;gap:2rem;align-items:start}
.vch__player-wrap{border-radius:12px;overflow:hidden;background: #0a0a0a;aspect-ratio:16/9}
.vch__video{width:100%;height:100%;display:block;object-fit:cover}
.vch__chapters{background:#161616;border-radius:12px;padding:1.25rem;border:1px solid #2a2a2a}
.vch__chapters-title{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#888;margin:0 0 1rem}
.vch__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}
.vch__item{display:flex;align-items:center;gap:.75rem;padding:.6rem .5rem;border-radius:7px;cursor:pointer;transition:background .15s}
.vch__item:hover{background:#222}
.vch__num{width:24px;height:24px;border-radius:50%;background:#2a2a2a;color:var(--color-accent, #6366f1);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vch__info{display:flex;flex-direction:column;gap:.1rem}
.vch__ch-title{font-size:.85rem;color:#ddd;font-weight:500;line-height:1.3}
.vch__time{font-size:.72rem;color:#666;font-variant-numeric:tabular-nums}
.vch__inner{grid-template-columns:1fr}
</style>