@props([
    'title',
    'subtitle' => null,
    'icon' => null,
    'tone' => 'default',     // patients, appointments, records, prescriptions, invoices, payments, labs, reports, settings, staff, schedules
    'stats' => [],           // [['icon' => 'ti-...', 'label' => '...', 'value' => '...'], ...]
])

{{--
    Page hero banner — gradient background, icon, title, subtitle,
    optional KPI strip in the gradient, plus action slot.

    Each tenant page renders one of these instead of <x-page-header>
    for a consistent first-impression. The `tone` prop maps to a
    gradient defined in clinic-pages.css.
--}}
<div class="clinic-hero" data-tone="{{ $tone }}">
    <div class="position-relative d-flex flex-wrap align-items-center gap-3">
        @if($icon)
            <span class="hero-icon"><i class="ti {{ $icon }}"></i></span>
        @endif
        <div class="flex-grow-1 min-w-0">
            <div class="hero-title">{{ $title }}</div>
            @if($subtitle)
                <div class="hero-subtitle">{{ $subtitle }}</div>
            @endif
        </div>
        @isset($actions)
            <div class="hero-actions d-flex flex-wrap gap-2">
                {{ $actions }}
            </div>
        @endisset
    </div>

    @if(! empty($stats))
        <div class="hero-stats position-relative">
            @foreach($stats as $s)
                <span class="stat">
                    @if(! empty($s['icon']))<i class="ti {{ $s['icon'] }}"></i>@endif
                    <span><strong>{!! $s['value'] !!}</strong> {{ $s['label'] }}</span>
                </span>
            @endforeach
        </div>
    @endif
</div>