HeroCenteredMinimal Hero

---
/**
 * HeroCenteredMinimal
 * Gecentreerde minimal-hero: label-pill, kop met cursief accent, sub, twee
 * CTA's en een trust-regel. Achtergrond-mode instelbaar (wit/licht/donker/accent).
 * Centreert binnen de pagina-rail (.bl-inner).
 *
 * Props: zie interface. Alle copy is prop-driven.
 */
type Bg = 'white' | 'light' | 'dark' | 'accent';
interface Props {
  label?: string;
  headline: string;
  accent?: string;
  sub?: string;
  primaryCta?: { label: string; href: string };
  ghostCta?: { label: string; href: string };
  trust?: string;
  bg?: Bg;
}

const {
  label,
  headline,
  accent,
  sub,
  primaryCta,
  ghostCta,
  trust,
  bg = 'white',
} = Astro.props;
---

<section class:list={['bl-section', 'hcm', `hcm--bg-${bg}`]} data-component="hero-centered-minimal">
  <div class="bl-inner bl-inner--narrow hcm__inner">
    {label && (
      <div class="hcm__label">
        <span class="hcm__label-dot"></span>
        {label}
      </div>
    )}
    <h1 class="hcm__headline">{headline}{accent && <em> {accent}</em>}</h1>
    {sub && <p class="hcm__sub">{sub}</p>}
    {(primaryCta || ghostCta) && (
      <div class="hcm__ctas">
        {primaryCta && <a href={primaryCta.href} class="hcm__cta hcm__cta--primary">{primaryCta.label}</a>}
        {ghostCta && <a href={ghostCta.href} class="hcm__cta hcm__cta--ghost">{ghostCta.label}</a>}
      </div>
    )}
    {trust && <p class="hcm__trust">{trust}</p>}
  </div>
</section>

<style>
.hcm{text-align:center}
.hcm--bg-white{background:var(--color-bg, #fff)}
.hcm--bg-light{background:#f5f5f7}
.hcm--bg-dark{background:var(--color-primary, #0a0a0a);color:#fff}
.hcm--bg-accent{background:var(--color-accent, #6366f1);color:#fff}
.hcm__label{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.5rem;padding:.375rem 1rem;border-radius:100px;border:1px solid currentColor;opacity:.6}
.hcm--bg-dark .hcm__label,.hcm--bg-accent .hcm__label{color:#fff;border-color:#ffffff66;opacity:.9}
.hcm__label-dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent, #6366f1);flex-shrink:0}
.hcm--bg-accent .hcm__label-dot{background:#fff}
.hcm__headline{font-size:clamp(2.75rem,6vw,5rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:var(--color-primary, #0a0a0a);margin-bottom:1.5rem}
.hcm--bg-dark .hcm__headline,.hcm--bg-accent .hcm__headline{color:#fff}
.hcm__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hcm--bg-accent .hcm__headline em{color:#ffffffe6}
.hcm__sub{font-size:1.1875rem;line-height:1.65;color:var(--color-muted, #6b7280);margin-bottom:2.5rem;max-width:52ch;margin-left:auto;margin-right:auto}
.hcm--bg-dark .hcm__sub,.hcm--bg-accent .hcm__sub{color:#e8e8e8}
.hcm__ctas{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.hcm__cta{display:inline-block;padding:.9375rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:1rem;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.hcm__cta--primary{background:var(--color-accent, #6366f1);color:#fff}
.hcm--bg-accent .hcm__cta--primary{background:#fff;color:var(--color-accent, #6366f1)}
.hcm__cta--primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 24px #00000026}
.hcm__cta--ghost{border:1.5px solid var(--color-primary, #0a0a0a);color:var(--color-primary, #0a0a0a);opacity:.75}
.hcm--bg-dark .hcm__cta--ghost,.hcm--bg-accent .hcm__cta--ghost{border-color:#ffffff80;color:#fff}
.hcm__cta--ghost:hover{opacity:1}
.hcm__trust{font-size:.875rem;color:var(--color-muted, #6b7280)}
.hcm--bg-dark .hcm__trust,.hcm--bg-accent .hcm__trust{color:#cfcfcf}
@media (max-width:640px){
  .hcm__cta{width:100%;text-align:center}
  .hcm__ctas{flex-direction:column;align-items:center}
}
</style>