HeadingWithLabel heading

---
/**
 * HeadingWithLabel — sectiekop met pill-label, headline (HTML toegestaan,
 * <em> voor accent), sub en optionele tekst-CTA. Links uitgelijnd.
 *
 * Props:
 * - label?: string
 * - labelStyle?: 'accent' | 'outline' | 'dark'
 * - headline?: string            (HTML toegestaan, <em> voor accent)
 * - sub?: string
 * - cta?: { label: string; href: string }
 * - layout?: 'stacked' | 'inline'
 */
interface Props {
  label?: string;
  labelStyle?: 'accent' | 'outline' | 'dark';
  headline?: string;
  sub?: string;
  cta?: { label: string; href: string };
  layout?: 'stacked' | 'inline';
}

const {
  label = 'Nieuw',
  labelStyle = 'accent',
  headline = 'Geautomatiseerde <em>rapportages</em> voor elk kanaal',
  sub = 'Koppel al je advertentieplatformen en ontvang elke week een overzicht in je inbox.',
  cta = { label: 'Meer informatie', href: '#' },
  layout = 'stacked',
} = Astro.props;
---

<section class={`bl-section hwlb__section hwlb__layout-${layout}`}>
  <div class="bl-inner hwlb__wrap">
    <div class="hwlb__head">
      {label && <span class={`hwlb__label hwlb__label--${labelStyle}`}>{label}</span>}
      <h2 class={`hwlb__headline${layout === 'inline' ? ' hwlb__headline--inline' : ''}`} set:html={headline}></h2>
    </div>
    {sub && <p class="hwlb__sub">{sub}</p>}
    {cta && <a class="hwlb__cta" href={cta.href}>{cta.label}</a>}
  </div>
</section>

<style>
.hwlb__section{padding-block:5rem}
.hwlb__wrap{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1.25rem}
.hwlb__layout-stacked .hwlb__head{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.hwlb__layout-inline .hwlb__head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.hwlb__label{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.03em;flex-shrink:0}
.hwlb__label--accent{background:var(--color-accent);color:#fff}
.hwlb__label--outline{border:1.5px solid var(--color-accent);color:var(--color-accent);background:transparent}
.hwlb__label--dark{background:var(--color-primary);color:#fff}
.hwlb__headline{margin:0;font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:-.02em;color:var(--color-primary);line-height:1.1}
.hwlb__headline--inline{font-size:clamp(1.5rem,3vw,2.5rem)}
.hwlb__headline :global(em){font-style:italic;color:var(--color-accent)}
.hwlb__sub{margin:0;font-size:1.125rem;line-height:1.7;color:var(--color-muted);max-width:580px}
.hwlb__cta{display:inline-flex;align-items:center;gap:.25rem;font-size:.9375rem;font-weight:700;color:var(--color-accent);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s ease}
.hwlb__cta:hover{border-color:var(--color-accent)}
</style>