HeroVideoGrid Hero

---
/**
 * HeroVideoGrid — donkere split-hero: links eyebrow, kop met accent-woord, sub,
 * CTA en een stat-rij; rechts een mozaïek-grid van vier beelden. Alleen dark.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - accent?: string            accent-woord binnen de kop (cursief gemarkeerd)
 * - headlineTail?: string      rest van de kop, na het accent-woord
 * - sub?: string
 * - cta?: { label: string; href: string }
 * - stats?: { value: string; label: string }[]
 * - images?: { src: string; alt?: string }[]   vier beelden voor het mozaïek
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  accent?: string;
  headlineTail?: string;
  sub?: string;
  cta?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  images?: { src: string; alt?: string }[];
}

const {
  eyebrow = 'Digital Marketing Agency',
  headline = 'Groei die je',
  accent = 'ziet',
  headlineTail = 'in de cijfers',
  sub = 'Van strategie tot lancering. Wij zijn het bureau dat resultaten levert die er toe doen.',
  cta = { label: 'Bekijk ons werk →', href: '#' },
  stats = [
    { value: '80+', label: 'Klanten' },
    { value: '4.2×', label: 'Gemiddeld ROAS' },
    { value: '93%', label: 'Retentie' },
  ],
  images = [
    { src: '/img/ext/photo-1460925895917-afdab827c52f-w600-18aff0.jpg', alt: '' },
    { src: '/img/ext/photo-1551434678-e076c223a692-w400-770994.jpg', alt: '' },
    { src: '/img/ext/photo-1611532736597-de2d4265fba3-w400-a33fbb.jpg', alt: '' },
    { src: '/img/ext/photo-1504868584819-f8e8b4b6d7e3-w400-b57f3e.jpg', alt: '' },
  ],
} = Astro.props;
---

<section class:list={['bl-section', 'hvg']}>
  <div class="bl-inner hvg-inner">
    <!-- Left -->
    <div class="hvg__left">
      {eyebrow && <p class="hvg__eyebrow">{eyebrow}</p>}
      <h1 class="hvg__headline">{headline}{accent && <> <em>{accent}</em></>}{headlineTail && ` ${headlineTail}`}</h1>
      {sub && <p class="hvg__sub">{sub}</p>}
      {cta && <a href={cta.href} class="hvg__cta">{cta.label}</a>}
      {stats.length > 0 && (
        <div class="hvg__stats">
          {stats.map((s) => (
            <div class="hvg__stat">
              <div class="hvg__stat-value">{s.value}</div>
              <div class="hvg__stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      )}
    </div>
    <!-- Right: mosaic grid -->
    <div class="hvg__grid">
      {images.map((img, i) => (
        <div class:list={['hvg__cell', `hvg__cell--${i + 1}`]}>
          <img data-allow-img src={img.src} alt={img.alt ?? ''} loading="eager" fetchpriority="high" decoding="async" />
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.hvg{background:var(--color-primary, #0a0a0a);color:#e8e8e8;overflow:hidden}
.hvg-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hvg__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:1rem}
.hvg__headline{font-size:clamp(2.5rem,4.5vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:#fff;margin-bottom:1.25rem}
.hvg__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hvg__sub{font-size:1.0625rem;line-height:1.65;color:#aaa;margin-bottom:2rem;max-width:40ch}
.hvg__cta{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;text-decoration:none;font-weight:700;font-size:.9375rem;padding:.875rem 1.75rem;border-radius:var(--radius, .5rem);transition:filter .2s,transform .2s;margin-bottom:2.5rem}
.hvg__cta:hover{filter:brightness(1.15);transform:translateY(-1px)}
.hvg__stats{display:flex;gap:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.hvg__stat-value{font-size:1.875rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.hvg__stat-label{font-size:.875rem;color:#aaa;margin-top:.25rem}
.hvg__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 240px;gap:.75rem}
.hvg__cell{border-radius:calc(var(--radius, .5rem) * 1.5);overflow:hidden}
.hvg__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hvg__cell:hover img{transform:scale(1.04)}
.hvg__cell--1{grid-row:1 / 3;grid-column:1}

@media (max-width: 768px){
  .hvg-inner{grid-template-columns:1fr;gap:2.5rem}
  .hvg__grid{grid-template-rows:180px 180px}
  .hvg__cell--1{grid-row:1 / 3}
  .hvg__stats{gap:1.5rem}
}
</style>