HeroSplitAngle Hero

---
/**
 * HeroSplitAngle
 * Split-hero met schuine scheidingslijn: tekstkolom links (eyebrow, kop, sub,
 * twee CTA's), beeld rechts dat onder de hoek doorloopt. Beide kolommen liggen
 * binnen .bl-inner zodat de H1 op de pagina-rail uitlijnt. Accent instelbaar.
 *
 * Props: zie interface. Alle copy is prop-driven.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  primaryCta?: { label: string; href: string };
  ghostCta?: { label: string; href: string };
  image?: { src: string; alt?: string };
  accent?: string;
}

const {
  eyebrow,
  headline,
  sub,
  primaryCta,
  ghostCta,
  image,
  accent = '#6366f1',
} = Astro.props;
---

<section class:list={['bl-section', 'hsa']} style={`--hsa-accent:${accent}`}>
  <div class="bl-inner hsa-inner">
    <div class="hsa-text">
      {eyebrow && <span class="hsa-eyebrow">{eyebrow}</span>}
      <h1 class="hsa-headline">{headline}</h1>
      {sub && <p class="hsa-sub">{sub}</p>}
      {(primaryCta || ghostCta) && (
        <div class="hsa-actions">
          {primaryCta && <a href={primaryCta.href} class="hsa-btn hsa-btn--primary">{primaryCta.label}</a>}
          {ghostCta && <a href={ghostCta.href} class="hsa-btn hsa-btn--ghost">{ghostCta.label}</a>}
        </div>
      )}
    </div>
    {image && (
      <div class="hsa-visual">
        <img data-allow-img src={image.src} alt={image.alt ?? ''} class="hsa-img" loading="eager" fetchpriority="high" decoding="async" />
      </div>
    )}
  </div>
</section>

<style>
.hsa{background:var(--color-bg, #fff);overflow:hidden}
.hsa-inner{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:stretch}
.hsa-text{display:flex;flex-direction:column;justify-content:center;background:var(--color-bg, #fff);z-index:1}
.hsa-eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hsa-accent);margin-bottom:1.25rem}
.hsa-headline{font-size:clamp(2.25rem,4vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem}
.hsa-sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.65;margin:0 0 2.5rem;max-width:440px}
.hsa-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.hsa-btn{display:inline-flex;align-items:center;padding:.8125rem 1.75rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.hsa-btn--primary{background:var(--hsa-accent);color:#fff}
.hsa-btn--primary:hover{opacity:.9;transform:translateY(-1px)}
.hsa-btn--ghost{border:1.5px solid #cbd5e1;color:#374151}
.hsa-btn--ghost:hover{border-color:#94a3b8}
.hsa-visual{position:relative;overflow:hidden;border-radius:calc(var(--radius, .5rem) * 2);min-height:280px}
.hsa-img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:860px){
  .hsa-inner{grid-template-columns:1.05fr .95fr;gap:0;min-height:78vh}
  .hsa-text{padding:4rem clamp(2rem,4vw,4rem) 4rem 0;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
  .hsa-visual{margin-left:-7%;border-radius:0}
}
</style>