HeroBold Hero

---
/**
 * HeroBold
 * Oversized headline domineert het beeld. 1-2 regels, rest minimaal.
 * Accent kleur op één woord. Ideaal voor impactvolle statements.
 */
interface Props {
  preText?: string;
  headline: string;
  accentWord?: string;
  postText?: string;
  sub?: string;
  cta?: { label: string; href: string };
  theme?: 'light' | 'dark';
}
const { preText, headline, accentWord, postText, sub, cta, theme = 'light' } = Astro.props;
---
<section class={`hbo hbo--${theme}`}>
  <div class="hbo-inner">
    <h1 class="hbo-headline">
      {preText && <span class="hbo-pre">{preText} </span>}
      {headline}
      {accentWord && <em class="hbo-accent"> {accentWord}</em>}
      {postText && <span class="hbo-post"> {postText}</span>}
    </h1>
    {sub && <p class="hbo-sub">{sub}</p>}
    {cta && <a href={cta.href} class="hbo-cta">{cta.label} →</a>}
  </div>
</section>
<style>
  .hbo { padding: 6rem 2rem 5rem; overflow: hidden; }
  .hbo--light { background: #fff; color: #0a0a0a; }
  .hbo--dark { background: #0a0a0a; color: #fff; }
  .hbo-inner { max-width: 1200px; margin: 0 auto; }
  .hbo-headline { font-size: clamp(3.5rem, 9vw, 10rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 2rem; }
  .hbo-accent { font-style: italic; color: var(--color-accent, #6366f1); }
  .hbo-sub { font-size: 1.125rem; color: #6b7280; max-width: 520px; line-height: 1.65; margin-bottom: 2.5rem; }
  .hbo--dark .hbo-sub { color: rgba(255,255,255,0.5); }
  .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: 0.25rem; }
</style>