VideoGrid2 video

---
/**
 * VideoGrid2
 * Alternatief video-grid met gemixte groottes
 */
interface Props {
  headline?: string;
  videos?: { title: string; duration?: string; category?: string }[];
}
const {
  headline = 'Kijk achter de schermen',
  videos = [
    { title: 'Van strategie naar resultaat', duration: '4:32', category: 'Case study' },
    { title: 'Google Ads in 2025 — wat werkt', duration: '8:17', category: 'Tutorial' },
    { title: 'SEO audit live voor klant', duration: '12:05', category: 'Live sessie' },
    { title: 'Conversie-optimalisatie basics', duration: '6:48', category: 'Educatief' },
    { title: 'Hoe wij campagnes bouwen', duration: '3:55', category: 'Intern' },
  ],
} = Astro.props;
---

<section class="vg2">
  <div class="vg2__inner">
    {headline && <h2 class="vg2__headline">{headline}</h2>}
    <div class="vg2__grid">
      {videos.map((v, i) => (
        <div class={`vg2__card${i === 0 ? ' vg2__card--featured' : ''}`}>
          <div class="vg2__thumb">
            <span class="vg2__play" aria-hidden="true">▶</span>
            {v.duration && <span class="vg2__duration">{v.duration}</span>}
          </div>
          <div class="vg2__meta">
            {v.category && <span class="vg2__cat">{v.category}</span>}
            <h3 class="vg2__title">{v.title}</h3>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .vg2 {
    background: #fff;
    padding: 4rem 1.5rem;
  }
  .vg2__inner {
    max-width: 1060px;
    margin: 0 auto;
  }
  .vg2__headline {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 2rem;
  }
  .vg2__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
  }
  .vg2__card--featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .vg2__card {
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f6;
    transition: transform 0.2s;
    cursor: pointer;
  }
  .vg2__card:hover { transform: translateY(-3px); }
  .vg2__thumb {
    aspect-ratio: 16/9;
    background: var(--color-primary, #0a0a0a);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .vg2__card--featured .vg2__thumb {
    background: linear-gradient(135deg, #1e1b4b 0%, var(--color-accent, #6366f1) 100%);
  }
  .vg2__play {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.15);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding-left: 4px;
  }
  .vg2__card:hover .vg2__play { background: rgba(255,255,255,0.3); }
  .vg2__card--featured .vg2__play { width: 64px; height: 64px; font-size: 1.8rem; }
  .vg2__duration {
    position: absolute;
    bottom: 0.6rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
  }
  .vg2__meta {
    padding: 0.85rem 1rem;
  }
  .vg2__card--featured .vg2__meta {
    padding: 1rem 1.25rem;
  }
  .vg2__cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    display: block;
    margin-bottom: 0.3rem;
  }
  .vg2__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1.35;
  }
  .vg2__card--featured .vg2__title {
    font-size: 1.1rem;
  }
  @media (max-width: 640px) {
    .vg2__grid { grid-template-columns: 1fr; }
    .vg2__card--featured { grid-column: 1; grid-row: auto; }
  }
</style>