@props([
    'title',
    'description' => null,
    'icon' => 'fa-cube',
])

{{--
    Module Hero Component
    =====================
    Light slate palette redesign. Replaces the old dark green (#1a4731) background.

    Usage:
        <x-module-hero title="User Management" description="..." icon="fa-users">
            <x-slot name="backButton">
                <a href="{{ route('...') }}" class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                    <i class="fas fa-arrow-left text-xs"></i> Back
                </a>
            </x-slot>
            <x-slot name="tabs">
                <a href="{{ route('module.section') }}"
                   class="module-hero-tab {{ request()->routeIs('module.section') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-icon text-sm"></i> Label
                </a>
            </x-slot>
            <x-slot name="actions">
                <a href="{{ route('...') }}" class="...">Create</a>
            </x-slot>
        </x-module-hero>

    Backward compatibility:
        Tabs using the old `active-tab` CSS class continue to receive the active border
        via the shim below. Migrate blade files to the inline routeIs() pattern and then
        remove the shim in Phase 3 (task 14.1).
--}}


<div class="w-full bg-[#f1f5f9]" style="overflow: hidden;">

    {{-- Back button row (optional) --}}
    @isset($backButton)
        <div class="px-6 pt-4">
            {{ $backButton }}
        </div>
    @endisset

    {{-- Title + description --}}
    <div class="px-6 pt-6 {{ isset($tabs) || isset($actions) ? 'pb-0' : 'pb-6' }}">
        <h1 class="text-2xl font-bold text-[#1e293b] break-words flex items-center gap-3">
            <i class="fas {{ $icon }} text-[#475569]"></i>
            {{ $title }}
        </h1>
        @if($description)
            <p class="mt-1 text-sm text-[#475569]">{{ $description }}</p>
        @endif
    </div>

    {{-- Navigation tabs (optional) --}}
    @isset($tabs)
        <div class="mt-4 px-2 sm:px-6">
            <nav class="flex flex-col md:flex-row flex-nowrap overflow-x-auto"
                 aria-label="Module navigation">
                {{ $tabs }}
            </nav>
        </div>
    @endisset

    {{-- Action buttons (optional) --}}
    @isset($actions)
        <div class="px-6 py-3 flex flex-wrap sm:flex-row flex-col items-start sm:items-center gap-2">
            {{ $actions }}
        </div>
    @endisset

    {{-- Accent bar — always present --}}
    <div class="h-1 bg-gradient-to-r from-green-600 to-red-600 w-full"></div>

</div>
