HeadingWithLabel heading

---
interface Props {
  label: string;
  headline: string;
  sub?: string;
  labelVariant?: 'accent' | 'outline' | 'dark';
  ctaLabel?: string;
  ctaHref?: string;
  align?: 'center' | 'left';
  layout?: 'stacked' | 'inline';
}

const {
  label,
  headline,
  sub,
  labelVariant = 'accent',
  ctaLabel,
  ctaHref = '#',
  align = 'center',
  layout = 'stacked',
} = Astro.props;
---

<section class={`hwlb__section hwlb__align-${align} hwlb__layout-${layout}`}>
  <div class="hwlb__head">
    <span class={`hwlb__label hwlb__label--${labelVariant}`}>{label}</span>
    {layout === 'inline' ? (
      <h2 class="hwlb__headline hwlb__headline--inline" set:html={headline} />
    ) : (
      <h2 class="hwlb__headline" set:html={headline} />
    )}
  </div>
  {sub && <p class="hwlb__sub">{sub}</p>}
  {ctaLabel && (
    <a class="hwlb__cta" href={ctaHref}>{ctaLabel}</a>
  )}
</section>

<style>
  :root {
    --color-primary: #0a0a0a;
    --color-accent: #6366f1;
    --color-bg: #fff;
    --color-muted: #6b7280;
    --radius: 0.5rem;
  }

  .hwlb__section {
    padding: 5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .hwlb__align-center {
    align-items: center;
    text-align: center;
  }

  .hwlb__align-left {
    align-items: flex-start;
    text-align: left;
  }

  /* Stacked layout: label above headline */
  .hwlb__layout-stacked .hwlb__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: inherit;
  }

  /* Inline layout: label + headline on same line */
  .hwlb__layout-inline .hwlb__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .hwlb__align-center.hwlb__layout-inline .hwlb__head {
    justify-content: center;
  }

  .hwlb__label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.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: -0.02em;
    color: var(--color-primary);
    line-height: 1.1;
  }

  .hwlb__headline--inline {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  .hwlb__headline 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: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
  }

  .hwlb__cta:hover {
    border-color: var(--color-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
</style>