HeroBold Hero

---
/**
 * HeroBold
 * Grote, vette statement-hero: één krachtige kop met optioneel cursief
 * accent-woord, korte sub en één CTA. Light of dark.
 *
 * Props:
 * - headline: string
 * - accent?: string            cursief accent, direct na de headline
 * - sub?: string
 * - cta?: { label: string; href: string }
 * - theme?: 'light' | 'dark'   default 'light'
 */
interface Props {
  headline: string;
  accent?: string;
  sub?: string;
  cta?: { label: string; href: string };
  theme?: 'light' | 'dark';
}

const { headline, accent, sub, cta, theme = 'light' } = Astro.props;
---

<section class:list={['bl-section', 'hbo', `hbo--${theme}`]}>
  <div class="bl-inner hbo-inner" data-bl-stagger>
    <h1 class="hbo-headline">{headline}{accent && <em class="hbo-accent"> {accent}</em>}</h1>
    {sub && <p class="hbo-sub">{sub}</p>}
    {cta && <a href={cta.href} class="hbo-cta">{cta.label}</a>}
  </div>
</section>

<style>
  .hbo { overflow: hidden; }
  .hbo--light { background: var(--color-bg, #fff); color: var(--color-text, #0a0a0a); }
  .hbo--dark { background: #0a0a0a; color: #fff; }
  .hbo-headline {
    font-size: clamp(3.5rem, 5vw, 5rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.04em;
    margin: 0 0 2rem;
  }
  .hbo-accent { font-style: italic; color: var(--color-accent, #6366f1); }
  .hbo-sub {
    font-size: 1.125rem;
    color: var(--color-muted, #6b7280);
    max-width: 520px;
    line-height: 1.65;
    margin-bottom: 2.5rem;
  }
  .hbo--dark .hbo-sub { color: #e8e8e8; }
  .hbo-cta {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent, #6366f1);
    text-decoration: none;
  }
  .hbo-cta:hover { gap: .25rem; }
</style>