HeroBoldSplit Hero

---
/**
 * HeroBoldSplit
 * Split-hero: tekstkolom links (pre-label, vette kop met cursief accent, sub,
 * primaire CTA + tekstlink), beeld rechts. Light. Beide kolommen liggen binnen
 * .bl-inner zodat de H1 exact op de pagina-rail uitlijnt.
 *
 * Props: zie interface. Alle copy is prop-driven.
 */
interface Props {
  pre?: string;
  headline: string;
  accent?: string;
  sub?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  image?: { src: string; alt?: string };
}

const {
  pre,
  headline,
  accent,
  sub,
  primaryCta,
  secondaryCta,
  image,
} = Astro.props;
---

<section class:list={['bl-section', 'hbs']} data-component="hero-bold-split">
  <div class="bl-inner hbs__inner">
    <div class="hbs__content">
      {pre && (
        <p class="hbs__pre">
          <span class="hbs__pre-dot"></span>
          {pre}
        </p>
      )}
      <h1 class="hbs__headline">{headline}{accent && <em> {accent}</em>}</h1>
      {sub && <p class="hbs__sub">{sub}</p>}
      {(primaryCta || secondaryCta) && (
        <div class="hbs__actions">
          {primaryCta && <a href={primaryCta.href} class="hbs__cta">{primaryCta.label}</a>}
          {secondaryCta && (
            <a href={secondaryCta.href} class="hbs__secondary">
              {secondaryCta.label}
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
            </a>
          )}
        </div>
      )}
    </div>
    {image && (
      <div class="hbs__media">
        <img data-allow-img src={image.src} alt={image.alt ?? ''} class="hbs__img" loading="eager" fetchpriority="high" decoding="async" />
      </div>
    )}
  </div>
</section>

<style>
.hbs{background:var(--color-bg, #fff);overflow:hidden}
.hbs__inner{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
.hbs__pre{display:flex;align-items:center;gap:.625rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted, #6b7280);margin-bottom:1.5rem;animation:hbs-fade-up .5s .1s cubic-bezier(.22,1,.36,1) both}
.hbs__pre-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent, #6366f1);flex-shrink:0}
.hbs__headline{font-size:clamp(3rem, 6vw, 5rem);font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--color-primary, #0a0a0a);margin-bottom:1.5rem;animation:hbs-fade-up .65s .2s cubic-bezier(.22,1,.36,1) both}
.hbs__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hbs__sub{font-size:1.0625rem;line-height:1.65;color:var(--color-muted, #6b7280);margin-bottom:2.5rem;max-width:42ch;animation:hbs-fade-up .6s .35s cubic-bezier(.22,1,.36,1) both}
.hbs__actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;animation:hbs-fade-up .6s .45s cubic-bezier(.22,1,.36,1) both}
.hbs__cta{display:inline-flex;align-items:center;background:var(--color-primary, #0a0a0a);color:#fff;padding:.9375rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;transition:background .2s,transform .2s}
.hbs__cta:hover{background:var(--color-accent, #6366f1);transform:translateY(-2px)}
.hbs__secondary{display:inline-flex;align-items:center;gap:.4rem;font-size:.9375rem;font-weight:600;color:var(--color-primary, #0a0a0a);text-decoration:none;opacity:.6;transition:opacity .2s,gap .2s}
.hbs__secondary:hover{opacity:1;gap:.6rem}
.hbs__media{position:relative;overflow:hidden;border-radius:calc(var(--radius, .5rem) * 2);animation:hbs-scale-in 1s .1s cubic-bezier(.22,1,.36,1) both}
.hbs__img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
@media (min-width:860px){
  .hbs__inner{grid-template-columns:1fr 1fr;gap:4rem}
  .hbs__media{height:100%}
  .hbs__img{height:520px}
}
@media (prefers-reduced-motion: reduce){
  .hbs__pre,.hbs__headline,.hbs__sub,.hbs__actions,.hbs__media{animation:none}
}
</style>