HeroSplitReversed Hero

---
/**
 * HeroSplitReversed — split-hero met beeld links en tekst rechts: kop met
 * accent-woord, sub, een feature-lijst met vinkjes, één CTA en een trust-regel.
 * Licht.
 *
 * Props:
 * - image?: string             src van het linkerbeeld
 * - imageAlt?: string
 * - headlineLead?: string      accent-woord vooraan de kop (cursief gemarkeerd)
 * - headline?: string          rest van de kop, na het accent-woord
 * - sub?: string
 * - features?: string[]        bullet-lijst met vinkjes
 * - cta?: { label: string; href: string }
 * - trustLead?: string         vetgedrukt getal/woord in de trust-regel
 * - trustText?: string         rest van de trust-regel
 */
interface Props {
  image?: string;
  imageAlt?: string;
  headlineLead?: string;
  headline?: string;
  sub?: string;
  features?: string[];
  cta?: { label: string; href: string };
  trustLead?: string;
  trustText?: string;
}

const {
  image = '/img/ext/photo-1553877522-43269d4ea984-w800-fc1c82.jpg',
  imageAlt = '',
  headlineLead = 'Slimmer',
  headline = 'adverteren met minder budget',
  sub = 'Wij optimaliseren je campagnes zodat elke euro rendeert. Bewezen aanpak, meetbaar resultaat.',
  features = [
    'Campagnes live binnen 48 uur',
    'Maandelijkse rapportage',
    'Direct contact met je expert',
  ],
  cta = { label: 'Gratis audit aanvragen', href: '#' },
  trustLead = '500+',
  trustText = 'ondernemers gingen je voor',
} = Astro.props;
---

<section class:list={['bl-section', 'hsr']}>
  <div class="bl-inner hsr-inner">
    <!-- Image links -->
    <div class="hsr__visual">
      <div class="hsr__img-frame">
        {image && (
          <img data-allow-img src={image} alt={imageAlt} class="hsr__img" loading="eager" fetchpriority="high" decoding="async" />
        )}
        <div class="hsr__img-decor"></div>
      </div>
    </div>
    <!-- Text rechts -->
    <div class="hsr__content">
      <h1 class="hsr__headline">{headlineLead && <><em>{headlineLead}</em> </>}{headline}</h1>
      {sub && <p class="hsr__sub">{sub}</p>}
      {features.length > 0 && (
        <ul class="hsr__features">
          {features.map((f) => (
            <li class="hsr__feature">
              <svg class="hsr__check" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="8" r="8" fill="currentColor" opacity="0.12"></circle>
                <path d="M5 8.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              {f}
            </li>
          ))}
        </ul>
      )}
      {cta && <a href={cta.href} class="hsr__cta">{cta.label}</a>}
      {(trustLead || trustText) && (
        <div class="hsr__trust">
          <p class="hsr__trust-text">
            {trustLead && <strong>{trustLead}</strong>} {trustText}
          </p>
        </div>
      )}
    </div>
  </div>
</section>

<style>
.hsr{background:var(--color-bg, #fff)}
.hsr-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.hsr__img-frame{position:relative}
.hsr__img{width:100%;height:520px;object-fit:cover;border-radius:calc(var(--radius, .5rem) * 2);display:block;position:relative;z-index:1}
.hsr__img-decor{position:absolute;inset:1.5rem -1.5rem -1.5rem 1.5rem;background:color-mix(in srgb,var(--color-accent, #6366f1) 12%,transparent);border-radius:calc(var(--radius, .5rem) * 2);z-index:0}
.hsr__headline{font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:1.25rem}
.hsr__headline em{font-style:normal;color:var(--color-accent, #6366f1)}
.hsr__sub{font-size:1.0625rem;line-height:1.65;color:var(--color-muted, #6b7280);margin-bottom:1.5rem}
.hsr__features{list-style:none;margin-bottom:2rem;display:flex;flex-direction:column;gap:.625rem;padding:0}
.hsr__feature{display:flex;align-items:center;gap:.625rem;font-size:1rem;color:var(--color-primary, #0a0a0a);font-weight:500}
.hsr__check{flex-shrink:0;color:var(--color-accent, #6366f1)}
.hsr__cta{display:inline-block;background:var(--color-accent, #6366f1);color:#fff;padding:.875rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;margin-bottom:2rem;transition:filter .2s,transform .2s}
.hsr__cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hsr__trust{display:flex;align-items:center;gap:.875rem;padding-top:1.25rem;border-top:1px solid rgba(0,0,0,.07)}
.hsr__trust-text{font-size:.875rem;color:var(--color-muted, #6b7280)}
.hsr__trust-text strong{color:var(--color-primary, #0a0a0a);font-weight:700}

@media (max-width: 768px){
  .hsr-inner{grid-template-columns:1fr;gap:2rem}
  .hsr__img{height:280px}
  .hsr__img-decor{display:none}
}
</style>