@props([
    'eyebrow' => 'MPBA WMS',
    'title',
    'description' => null,
    'subtitle' => null,
    'icon' => null,
    'stats' => [],
])

@php
    $heroDescription = $description ?? $subtitle ?? null;
@endphp

<section {{ $attributes->merge(['class' => 'wms-page-hero']) }}>
    <div class="wms-page-hero-inner">
        <div class="wms-page-hero-row">
            <div class="wms-page-hero-copy">
                <p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
                <h1 class="wms-page-hero-title">{{ $title }}</h1>

                @if ($heroDescription)
                    <p class="wms-page-hero-description">{{ $heroDescription }}</p>
                @endif
            </div>

            @if (count($stats) > 0 || $icon || $slot->isNotEmpty())
                <div class="wms-page-hero-actions">
                    @foreach ($stats as $stat)
                        <article class="wms-page-hero-stat">
                            <span>{{ $stat['label'] ?? '' }}</span>
                            <strong>
                                @if (!empty($stat['icon']))
                                    <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
                                @endif
                                {{ $stat['value'] ?? '' }}
                            </strong>
                        </article>
                    @endforeach

                    @if ($icon && count($stats) === 0 && $slot->isEmpty())
                        <article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
                            <strong><i class="{{ $icon }}"></i></strong>
                        </article>
                    @endif

                    @if ($slot->isNotEmpty())
                        {{ $slot }}
                    @endif
                </div>
            @endif
        </div>
    </div>
</section>