HeroNeon Hero

---
/**
 * HeroNeon
 * Donkere neon-hero: gloeiende eyebrow, kop met gradient-fill, sub, twee CTA's
 * (glow + ghost) en een rij partner-badges. Centreert binnen de pagina-rail.
 * Glow-kleur instelbaar via --hn-glow.
 *
 * Props: zie interface. Alle copy is prop-driven.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  primaryCta?: { label: string; href: string };
  ghostCta?: { label: string; href: string };
  badges?: string[];
  glow?: string;
}

const {
  eyebrow,
  headline,
  sub,
  primaryCta,
  ghostCta,
  badges = [],
  glow = '#6366f1',
} = Astro.props;
---

<section class:list={['bl-section', 'hn']} style={`--hn-glow:${glow}`}>
  <div class="hn-blob" aria-hidden="true"></div>
  <div class="bl-inner bl-inner--narrow hn-inner">
    {eyebrow && <p class="hn-eyebrow">{eyebrow}</p>}
    <h1 class="hn-headline">{headline}</h1>
    {sub && <p class="hn-sub">{sub}</p>}
    {(primaryCta || ghostCta) && (
      <div class="hn-actions">
        {primaryCta && <a href={primaryCta.href} class="hn-btn hn-btn--glow">{primaryCta.label}</a>}
        {ghostCta && <a href={ghostCta.href} class="hn-btn hn-btn--ghost">{ghostCta.label}</a>}
      </div>
    )}
    {badges.length > 0 && (
      <div class="hn-badges">
        {badges.map((badge) => <span class="hn-badge">{badge}</span>)}
      </div>
    )}
  </div>
</section>

<style>
.hn{position:relative;background:#080b14;color:#fff;text-align:center;overflow:hidden}
.hn-blob{position:absolute;top:-20%;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,color-mix(in srgb,var(--hn-glow) 30%,transparent) 0%,transparent 70%);pointer-events:none;animation:hnPulse 4s ease-in-out infinite}
.hn-inner{position:relative;z-index:1}
.hn-eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-glow);margin-bottom:1.25rem;text-shadow:0 0 20px var(--hn-glow)}
.hn-headline{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 1.25rem;background:linear-gradient(135deg,#fff 60%,var(--hn-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hn-sub{font-size:1.125rem;color:#cfd2da;line-height:1.65;max-width:540px;margin-left:auto;margin-right:auto;margin-bottom:2.5rem}
.hn-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.hn-btn{display:inline-flex;align-items:center;padding:.8125rem 2rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.hn-btn--glow{background:var(--hn-glow);color:#fff;box-shadow:0 0 30px color-mix(in srgb,var(--hn-glow) 50%,transparent)}
.hn-btn--glow:hover{box-shadow:0 0 50px color-mix(in srgb,var(--hn-glow) 70%,transparent);transform:translateY(-1px)}
.hn-btn--ghost{border:1px solid rgba(255,255,255,.18);color:#e8e8e8;backdrop-filter:blur(8px);background:#ffffff0d}
.hn-btn--ghost:hover{border-color:#ffffff66;color:#fff}
.hn-badges{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hn-badge{font-size:.75rem;padding:.3rem .75rem;border:1px solid rgba(255,255,255,.14);border-radius:100px;color:#aaa;backdrop-filter:blur(4px)}
@media (prefers-reduced-motion: reduce){
  .hn-blob{animation:none}
}
</style>