@props(['title', 'subtitle' => '', 'category' => '', 'breadcrumb' => ''])

<x-main-layout>
    <!-- ── PREMIUM HERO ── -->
    <div class="relative bg-slate-900 overflow-hidden" style="min-height: 480px;">
        <!-- Background Image -->
        <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
                 alt="Hero Background"
                 class="w-full h-full object-cover opacity-20 scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-slate-900/20"></div>
            <!-- Decorative Glow Blobs -->
            <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-600/20 rounded-full blur-3xl -mr-64 -mt-64 pointer-events-none"></div>
            <div class="absolute bottom-0 left-0 w-80 h-80 bg-cyan-600/10 rounded-full blur-2xl -ml-40 -mb-40 pointer-events-none"></div>
        </div>

        <!-- Hero Content: full height flex, vertically centered -->
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10 flex flex-col justify-center pb-10" style="min-height: 480px;">
            <!-- Breadcrumb -->
            <nav class="flex items-center flex-wrap gap-2 text-xs text-slate-400 mb-10 pt-10">
                <a href="{{ url('/') }}" class="hover:text-brand-400 transition-colors font-medium">Home</a>
                <i class="fas fa-chevron-right text-[10px] text-slate-600"></i>
                @if($category)
                    <span class="text-slate-400 capitalize">{{ $category }}</span>
                    <i class="fas fa-chevron-right text-[10px] text-slate-600"></i>
                @endif
                <span class="text-brand-400 font-semibold">{{ $title }}</span>
            </nav>

            <!-- Label + Title -->
            <div class="max-w-3xl">
                @if($category)
                    <div class="inline-flex items-center gap-3 mb-5">
                        <span class="h-px w-10 bg-brand-500"></span>
                        <span class="text-brand-400 font-bold tracking-widest uppercase text-xs">{{ $category }}</span>
                    </div>
                @endif

                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight leading-tight">
                    {{ $title }}
                </h1>

                @if($subtitle)
                    <p class="text-slate-300 text-lg leading-relaxed max-w-2xl">
                        {{ $subtitle }}
                    </p>
                @endif
            </div>
        </div>
    </div>

    <!-- ── MAIN CONTENT ── -->
    <div class="bg-slate-50 border-b border-slate-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            {{ $slot }}
        </div>
    </div>

    <!-- ── CTA BOTTOM STRIP ── -->
    <div class="bg-slate-900 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-8">
            <div>
                <p class="text-brand-400 uppercase tracking-widest text-xs font-bold mb-2">Get Involved</p>
                <h3 class="text-2xl font-bold text-white">Ready to join the GARI community?</h3>
                <p class="text-slate-400 text-sm mt-2">Join thousands of researchers and academics worldwide.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-4 shrink-0">
                <a href="{{ route('main.page', ['category' => 'apply', 'page' => 'presenter']) }}"
                   class="inline-flex items-center justify-center gap-2 bg-brand-600 text-white font-bold px-8 py-4 rounded-xl hover:bg-brand-700 transition-all shadow-lg shadow-brand-600/30 text-sm">
                    <i class="fas fa-user-plus"></i> Apply as Presenter
                </a>
                <a href="{{ route('main.page', ['category' => 'contact', 'page' => 'contact-us']) }}"
                   class="inline-flex items-center justify-center gap-2 bg-white/10 border border-white/20 text-white font-bold px-8 py-4 rounded-xl hover:bg-white/20 transition-all text-sm backdrop-blur-sm">
                    <i class="fas fa-envelope"></i> Contact Us
                </a>
            </div>
        </div>
    </div>
</x-main-layout>