HeroVideoFullscreen Hero

---
interface Props {
  videoSrc?: string;
  poster?: string;
  brand?: string;
  navCta?: string;
  headline: string;
  subhead?: string;
}
const {
  videoSrc = 'https://videos.pexels.com/video-files/3192305/3192305-uhd_2560_1440_25fps.mp4',
  poster = '',
  brand = 'BLURR',
  navCta = 'Plan gesprek',
  headline,
  subhead,
} = Astro.props;
---
<section class="hvf">
  <nav class="hvf-nav">
    <button class="hvf-more">More <span aria-hidden="true">⋮</span></button>
    <div class="hvf-brand"><span class="hvf-logo">✻</span><span>{brand}</span></div>
    <a href="#cta" class="hvf-cta">{navCta}</a>
  </nav>

  <video class="hvf-video" autoplay muted loop playsinline poster={poster}>
    <source src={videoSrc} type="video/mp4" />
  </video>
  <div class="hvf-scrim"></div>

  <div class="hvf-content">
    <h1>{headline}</h1>
    {subhead && <p>{subhead}</p>}
  </div>
</section>

<style>
  .hvf {
    --ink: #131313;
    --white: #ffffff;
    --accent: #ecf86e;
    --pill: 999px;
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .hvf-nav {
    position: absolute; top: 24px; left: 24px; right: 24px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 10;
  }
  .hvf-more {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--pill);
    padding: 12px 22px;
    font: inherit; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
  }
  .hvf-brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--white);
    padding: 12px 28px; border-radius: var(--pill);
    display: flex; align-items: center; gap: 12px;
    font-weight: 500;
  }
  .hvf-logo { color: var(--accent); }
  .hvf-cta {
    background: var(--white); color: var(--ink);
    padding: 14px 26px; border-radius: var(--pill);
    font-weight: 500; text-decoration: none; font-size: 15px;
  }
  .hvf-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  .hvf-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
  }
  .hvf-content { position: relative; z-index: 2; padding: 0 24px; max-width: 900px; }
  .hvf-content h1 {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 500; letter-spacing: -0.025em; line-height: 1.05;
    margin: 0;
    text-shadow: 0 2px 30px rgba(0,0,0,0.2);
  }
  .hvf-content p {
    margin-top: 24px;
    font-size: clamp(15px, 1.4vw, 18px);
    opacity: 0.92; max-width: 540px; margin-inline: auto;
    line-height: 1.55;
  }
  @media (max-width: 720px) { .hvf-brand { display: none; } }
</style>