HeroStats Hero

---
/**
 * HeroStats — gecentreerde hero met eyebrow, kop, sub en twee CTA's, gevolgd
 * door een statistiek-balk onderaan. Light of dark.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - sub?: string
 * - ctaPrimary?: { label: string; href: string }
 * - ctaSecondary?: { label: string; href: string }
 * - stats?: { value: string; label: string }[]
 * - theme?: 'light' | 'dark'   default 'light'
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  ctaPrimary?: { label: string; href: string };
  ctaSecondary?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  theme?: 'light' | 'dark';
}

const {
  eyebrow = 'Bewezen resultaten',
  headline = 'Marketing die je kunt meten.',
  sub = 'Wij leveren resultaat dat zichtbaar is in je Google Analytics.',
  ctaPrimary = { label: 'Plan gratis gesprek', href: '#' },
  ctaSecondary = { label: 'Bekijk cases →', href: '#' },
  stats = [
    { value: '€12M+', label: 'Gegenereerde omzet' },
    { value: '4.2×', label: 'Gemiddeld ROAS' },
    { value: '80+', label: 'Tevreden klanten' },
    { value: '93%', label: 'Klantretentie' },
  ],
  theme = 'light',
} = Astro.props;
---

<section class:list={['bl-section', 'hst', `hst--${theme}`]}>
  <div class="bl-inner hst-inner">
    <div class="hst-hero">
      {eyebrow && <p class="hst-eyebrow">{eyebrow}</p>}
      <h1 class="hst-headline">{headline}</h1>
      {sub && <p class="hst-sub">{sub}</p>}
      {(ctaPrimary || ctaSecondary) && (
        <div class="hst-actions">
          {ctaPrimary && <a href={ctaPrimary.href} class="hst-btn hst-btn--primary">{ctaPrimary.label}</a>}
          {ctaSecondary && <a href={ctaSecondary.href} class="hst-btn hst-btn--ghost">{ctaSecondary.label}</a>}
        </div>
      )}
    </div>
    {stats.length > 0 && (
      <div class="hst-stats-bar">
        {stats.map((s) => (
          <div class="hst-stat">
            <span class="hst-stat-value">{s.value}</span>
            <span class="hst-stat-label">{s.label}</span>
          </div>
        ))}
      </div>
    )}
  </div>
</section>

<style>
.hst--light{background:#f8fafc;color:#0a0a0a}
.hst--dark{background:#0f172a;color:#fff}
.hst-hero{padding-block:1rem 4rem;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.hst-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:1rem}
.hst-headline{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 1.25rem}
.hst--dark .hst-headline{color:#fff}
.hst-sub{font-size:1.125rem;color:#64748b;line-height:1.65;max-width:560px;margin:0 0 2.5rem;margin-left:auto;margin-right:auto}
.hst--dark .hst-sub{color:#aaa}
.hst-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.hst-btn{display:inline-flex;align-items:center;padding:.8125rem 2rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition:filter .2s,opacity .2s}
.hst-btn--primary{background:var(--color-accent,#6366f1);color:#fff}
.hst-btn--primary:hover{opacity:.9}
.hst-btn--ghost{border:1.5px solid currentColor;color:inherit;opacity:.8}
.hst-btn--ghost:hover{opacity:1}
.hst-stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid rgba(0,0,0,.06)}
.hst--dark .hst-stats-bar{border-color:#ffffff14}
.hst-stat{padding:2rem;text-align:center;border-right:1px solid rgba(0,0,0,.06)}
.hst--dark .hst-stat{border-color:#ffffff14}
.hst-stat:last-child{border-right:none}
.hst-stat-value{display:block;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--color-accent,#6366f1);letter-spacing:-.02em}
.hst-stat-label{display:block;font-size:.875rem;color:#64748b;margin-top:.25rem}
.hst--dark .hst-stat-label{color:#aaa}
</style>