HeroGradient Hero

---
/**
 * HeroGradient
 * Mesh/gradient achtergrond met groot gecentreerd statement, glassmorphism pill,
 * en animated floating blobs (pure CSS). Geen externe deps.
 */
interface Props {
  badge?: string;
  headline: string;
  sub?: string;
  ctaLabel?: string;
  ctaHref?: string;
  secondaryLabel?: string;
  secondaryHref?: string;
  gradientFrom?: string;
  gradientTo?: string;
  accentBlob?: string;
}

const {
  badge,
  headline,
  sub,
  ctaLabel = 'Begin nu',
  ctaHref = '#',
  secondaryLabel,
  secondaryHref = '#',
  gradientFrom = '#f5f3ff',
  gradientTo = '#ede9fe',
  accentBlob = '#818cf8',
} = Astro.props;
---

<section
  class="hg"
  data-component="hero-gradient"
  style={`--hg-from:${gradientFrom};--hg-to:${gradientTo};--hg-blob:${accentBlob};`}
>
  <!-- Animated blobs -->
  <div class="hg__blobs" aria-hidden="true">
    <div class="hg__blob hg__blob--1"></div>
    <div class="hg__blob hg__blob--2"></div>
    <div class="hg__blob hg__blob--3"></div>
  </div>

  <!-- Noise overlay -->
  <div class="hg__noise" aria-hidden="true"></div>

  <div class="hg__content">
    {badge && (
      <div class="hg__badge-wrap">
        <span class="hg__badge">
          <span class="hg__badge-dot"></span>
          {badge}
        </span>
      </div>
    )}

    <h1 class="hg__headline" set:html={headline} />

    {sub && <p class="hg__sub">{sub}</p>}

    <div class="hg__actions">
      <a href={ctaHref} class="hg__cta">{ctaLabel}</a>
      {secondaryLabel && (
        <a href={secondaryHref} class="hg__secondary">
          {secondaryLabel}
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      )}
    </div>

    <!-- Social proof -->
    <div class="hg__proof">
      <div class="hg__avatars">
        {Array.from({ length: 4 }).map((_, i) => (
          <div class="hg__avatar" style={`background:hsl(${i * 70 + 220},60%,65%)`}></div>
        ))}
      </div>
      <p class="hg__proof-text">Meer dan <strong>500+</strong> tevreden klanten</p>
    </div>
  </div>
</section>

<style>
  .hg {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hg-from, #f5f3ff) 0%, var(--hg-to, #ede9fe) 100%);
  }

  /* === BLOBS === */
  .hg__blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .hg__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.45;
  }

  .hg__blob--1 {
    width: 55vw;
    height: 55vw;
    background: var(--hg-blob, #818cf8);
    top: -20%;
    left: -15%;
    animation: hg-float-1 18s ease-in-out infinite;
  }

  .hg__blob--2 {
    width: 40vw;
    height: 40vw;
    background: #a78bfa;
    bottom: -10%;
    right: -10%;
    animation: hg-float-2 22s ease-in-out infinite;
  }

  .hg__blob--3 {
    width: 30vw;
    height: 30vw;
    background: #f9a8d4;
    top: 40%;
    right: 20%;
    animation: hg-float-3 16s ease-in-out infinite;
  }

  /* === NOISE === */
  .hg__noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px;
    pointer-events: none;
  }

  /* === CONTENT === */
  .hg__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: 5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Badge */
  .hg__badge-wrap {
    margin-bottom: 1.75rem;
    animation: hg-fade-up 0.5s 0.1s cubic-bezier(0.22,1,0.36,1) both;
  }

  .hg__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.8);
    padding: 0.4375rem 1rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .hg__badge-dot {
    width: 6px;
    height: 6px;
    background: var(--color-accent, #6366f1);
    border-radius: 50%;
    flex-shrink: 0;
    animation: hg-pulse 2s ease-in-out infinite;
  }

  /* Headline */
  .hg__headline {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.05em;
    color: var(--color-primary, #0a0a0a);
    margin-bottom: 1.5rem;
    animation: hg-fade-up 0.7s 0.2s cubic-bezier(0.22,1,0.36,1) both;
  }

  .hg__headline :global(em) {
    font-style: normal;
    background: linear-gradient(135deg, var(--color-accent, #6366f1), #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hg__headline :global(strong) {
    -webkit-text-stroke: 2px var(--color-primary, #0a0a0a);
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Sub */
  .hg__sub {
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(10,10,10,0.6);
    max-width: 44ch;
    margin-bottom: 2.5rem;
    animation: hg-fade-up 0.6s 0.35s cubic-bezier(0.22,1,0.36,1) both;
  }

  /* Actions */
  .hg__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
    animation: hg-fade-up 0.6s 0.45s cubic-bezier(0.22,1,0.36,1) both;
  }

  .hg__cta {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary, #0a0a0a);
    color: #fff;
    padding: 1rem 2.25rem;
    border-radius: var(--radius, 0.5rem);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .hg__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  }

  .hg__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s, gap 0.2s;
  }

  .hg__secondary:hover { opacity: 1; gap: 0.65rem; }

  /* Social proof */
  .hg__proof {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    animation: hg-fade-up 0.5s 0.6s cubic-bezier(0.22,1,0.36,1) both;
  }

  .hg__avatars {
    display: flex;
  }

  .hg__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    margin-left: -8px;
    flex-shrink: 0;
  }

  .hg__avatars .hg__avatar:first-child { margin-left: 0; }

  .hg__proof-text {
    font-size: 0.875rem;
    color: rgba(10,10,10,0.55);
  }

  .hg__proof-text strong { color: var(--color-primary, #0a0a0a); font-weight: 700; }

  /* === KEYFRAMES === */
  @keyframes hg-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes hg-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(3%, 5%) scale(1.04); }
    66%  { transform: translate(-4%, 2%) scale(0.97); }
  }

  @keyframes hg-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-5%, -3%) scale(1.06); }
    70%  { transform: translate(2%, -6%) scale(0.95); }
  }

  @keyframes hg-float-3 {
    0%, 100% { transform: translate(0, 0); }
    50%  { transform: translate(6%, -8%); }
  }

  @keyframes hg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.6; transform: scale(1.3); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hg__blob--1, .hg__blob--2, .hg__blob--3, .hg__badge-dot { animation: none; }
    .hg__badge-wrap, .hg__headline, .hg__sub, .hg__actions, .hg__proof { animation: none; }
  }

  @media (max-width: 600px) {
    .hg__content { padding: 3.5rem 1.25rem; }
    .hg__actions { flex-direction: column; width: 100%; }
    .hg__cta { width: 100%; justify-content: center; }
  }
</style>