@props([
    'title' => '',
    'subtitle' => ''
])
<div class="hero-wrapper">
    <div class="hero-section text-white d-flex align-items-center mb-4" 
         style="background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%); height: 240px; padding: 40px; border-radius: 0 0 16px 16px; box-shadow: 0 4px 20px rgba(15, 118, 110, 0.15); position: relative;">
        <div class="container-fluid py-2 d-flex justify-content-between align-items-center flex-wrap">
            <div>
                <h1 class="font-weight-bold tracking-tight mb-2" style="font-size: 2.2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.15);">
                    {{ $title }}
                </h1>
                @if($subtitle)
                    <p class="mb-0 text-white-50 font-weight-medium" style="font-size: 1.1rem; letter-spacing: 0.5px;">
                        {{ $subtitle }}
                    </p>
                @endif
            </div>
            @if(isset($actions))
                <div class="hero-actions mt-3 mt-md-0">
                    {{ $actions }}
                </div>
            @endif
        </div>
    </div>
</div>