@props([
    'headlineLine1',
    'headlineLine2',
    'subheadline',
    'trustBadges' => [],
])
@php
    $heroImage = 'images/hero/hero-home.jpg';
@endphp
<section class="nx-hero nx-rise is-visible" aria-label="Introduction">
    <div class="nx-shell nx-hero__shell">
        <div class="nx-hero__grid">
            <div class="nx-hero__copy">
                <p class="nx-label nx-hero__label">The Growth Charge</p>

                <h1 class="nx-hero__title">
                    <span class="nx-hero__title-line">{{ $headlineLine1 }}</span>
                    <span class="nx-hero__title-line nx-hero__title-line--accent">{{ $headlineLine2 }}</span>
                </h1>

                <p class="nx-lede nx-hero__lede">{{ $subheadline }}</p>

                <div class="nx-actions nx-hero__actions">
                    <a href="#" class="nx-btn nx-btn--fill" data-appointment-open>Free brand review</a>
                    <a href="{{ route('work.show', 'fleet-designs') }}" class="nx-btn nx-btn--line">View work</a>
                </div>
            </div>

            <div class="nx-hero__visual">
                <figure class="nx-frame nx-frame--hero">
                    <img
                        src="{{ asset($heroImage) }}"
                        alt="Fleet branding example"
                        loading="eager"
                        fetchpriority="high"
                        decoding="async"
                        width="960"
                        height="720"
                    >
                </figure>
            </div>
        </div>

        @if(count($trustBadges))
            <ul class="nx-statline">
                @foreach($trustBadges as $badge)
                    <li>{{ $badge }}</li>
                @endforeach
            </ul>
        @endif
    </div>
</section>