@props([
    'title',
    'lead',
    'primaryHref' => null,
    'primaryLabel' => null,
    'secondaryHref' => null,
    'secondaryLabel' => null,
])

<section class="vpm-mp-hero" aria-labelledby="page-heading">
    <h1 id="page-heading" class="vpm-mp-hero__title">{{ $title }}</h1>
    <p class="vpm-mp-hero__lead">{{ $lead }}</p>
    @if ($primaryHref || $secondaryHref)
        <div class="vpm-mp-hero__actions">
            @if ($primaryHref)
                <a href="{{ $primaryHref }}" class="vpm-i-btn vpm-i-btn--primary">{{ $primaryLabel ?? 'Open account' }}</a>
            @endif
            @if ($secondaryHref)
                <a href="{{ $secondaryHref }}" class="vpm-i-btn vpm-i-btn--outline">{{ $secondaryLabel ?? 'Learn more' }}</a>
            @endif
        </div>
    @endif
</section>