HeroMinimal Hero

---
/**
 * HeroMinimal — strakke, typografische hero. Eyebrow, lichte headline,
 * sub en twee knoppen. Links uitgelijnd op de rail.
 *
 * Props:
 * - eyebrow?: string
 * - headline?: string
 * - sub?: string
 * - ctaPrimary?: { label: string; href: string }
 * - ctaSecondary?: { label: string; href: string }
 */
interface Props {
  eyebrow?: string;
  headline?: string;
  sub?: string;
  ctaPrimary?: { label: string; href: string };
  ctaSecondary?: { label: string; href: string };
}

const {
  eyebrow = 'Premium dienstverlening',
  headline = 'Groei die blijft.',
  sub = 'Wij bouwen campagnes die niet alleen converteren, maar ook duurzame merkwaarde creëren.',
  ctaPrimary = { label: 'Begin vandaag', href: '#' },
  ctaSecondary = { label: 'Meer weten', href: '#' },
} = Astro.props;
---

<section class="bl-section hm">
  <div class="bl-inner bl-inner--narrow hm-inner">
    {eyebrow && <p class="hm-eyebrow">{eyebrow}</p>}
    <h1 class="hm-headline">{headline}</h1>
    {sub && <p class="hm-sub">{sub}</p>}
    {(ctaPrimary || ctaSecondary) && (
      <div class="hm-actions">
        {ctaPrimary && <a href={ctaPrimary.href} class="hm-btn hm-btn--primary">{ctaPrimary.label}</a>}
        {ctaSecondary && <a href={ctaSecondary.href} class="hm-btn hm-btn--ghost">{ctaSecondary.label}</a>}
      </div>
    )}
  </div>
</section>

<style>
.hm{padding-block:8rem 7rem;background:#fff}
.hm-eyebrow{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#9ca3af;margin-bottom:1.5rem}
.hm-headline{font-size:clamp(2.5rem,5vw,5rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;color:#0a0a0a;margin:0 0 1.5rem}
.hm-sub{font-size:1.0625rem;color:#6b7280;line-height:1.7;max-width:560px;margin:0 0 2.5rem}
.hm-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
.hm-btn{display:inline-flex;align-items:center;padding:.75rem 2rem;font-size:.875rem;font-weight:500;letter-spacing:.04em;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.hm-btn--primary{background:#0a0a0a;color:#fff}
.hm-btn--primary:hover{background:#1a1a1a}
.hm-btn--ghost{border:1px solid #d1d5db;color:#374151}
.hm-btn--ghost:hover{border-color:#9ca3af;color:#0a0a0a}
</style>