<div class="mb-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
        <div>
            @if(isset($breadcrumbs))
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2 text-xs font-medium text-[var(--text-secondary)]">
                    @foreach($breadcrumbs as $name => $url)
                        <li class="flex items-center gap-2">
                            @if(!$loop->first) <i class="bi bi-chevron-right text-[10px]"></i> @endif
                            <a href="{{ $url }}" class="hover:text-[var(--text-primary)] transition-colors">{{ $name }}</a>
                        </li>
                    @endforeach
                </ol>
            </nav>
            @endif
            <h1 class="text-3xl font-extrabold tracking-tight text-[var(--text-primary)]">{{ $title ?? 'Page Title' }}</h1>
            @if(isset($description))
                <p class="text-[var(--text-secondary)] mt-1">{{ $description }}</p>
            @endif
        </div>
        
        @if(isset($actions))
            <div class="flex items-center gap-3">
                {!! $actions !!}
            </div>
        @endif
    </div>

    <!-- Statistics Grid -->
    @if(isset($stats) && is_array($stats) && count($stats) > 0)
    <div class="final-row final-row-1" style="margin-bottom: 0;">
        @foreach($stats as $stat)
        @if(is_array($stat))
        <div class="final-card" @if(isset($stat['id'])) id="{{ $stat['id'] }}" @endif>
            <div class="final-stat-icon" style="color: {{ $stat['color'] ?? 'var(--accent-green)' }}">
                <i class="bi {{ $stat['icon'] ?? 'bi-graph-up' }}"></i>
            </div>
            <span class="final-stat-label">{{ $stat['label'] ?? 'Stat' }}</span>
            <h2 class="final-metric-value">{{ $stat['value'] ?? '0' }}</h2>
        </div>
        @endif
        @endforeach
    </div>
    @endif
</div>
