@props(['pageTitle', 'subtitle' => '', 'label' => ''])

{{--
  Conference Inner Page Hero Component
  Provides a consistent, rich hero section matching the conference home page style.
  Use inside x-conference-layout:
    <x-conference-inner-hero pageTitle="Call for Papers" label="Opportunity" subtitle="..." />
--}}

<section class="relative overflow-hidden bg-black" style="min-height: 500px;">
    <!-- Background Image - uses conference image from controller -->
    <div class="absolute inset-0">
        <img src="{{ $conference['image'] ?? 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80' }}"
             alt="Conference Background"
             class="w-full h-full object-cover opacity-30 scale-105">
        <!-- Multi-layer gradient for premium feel -->
        <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-black/30"></div>
        <!-- Orange glow accent -->
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-orange-600/15 rounded-full blur-[100px] -mr-48 -mt-48 pointer-events-none"></div>
    </div>

    <!-- Content -->
    <div class="relative max-w-7xl mx-auto px-6 lg:px-8 z-10 flex flex-col justify-center" style="min-height: 500px; padding-top: 130px; padding-bottom: 80px;">

        <!-- Breadcrumb -->
        <nav class="flex items-center gap-2 text-xs text-gray-500 mb-10">
            <a href="{{ isset($conference['slug']) ? route('conference.show', $conference['slug']) : url('/') }}" class="hover:text-orange-400 transition-colors font-medium">Home</a>
            <i class="fas fa-chevron-right text-[9px]"></i>
            <span class="text-orange-400 font-semibold">{{ $pageTitle }}</span>
        </nav>

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

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

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

            <!-- Conference name badge -->
            @if(isset($conference['title']))
                <div class="mt-8 inline-flex items-center gap-2 bg-white/10 border border-white/10 backdrop-blur-sm rounded-full px-4 py-2">
                    <i class="fas fa-university text-orange-400 text-xs"></i>
                    <span class="text-gray-300 text-xs font-medium uppercase tracking-widest">{{ strtoupper($conference['title']) }}</span>
                </div>
            @endif
        </div>
    </div>
</section>