{{-- 
    Publishing Block: Hero Section
    Full-width hero with background, title, subtitle, and CTA buttons
    
    Block Data Structure:
    {
        "type": "hero",
        "title": "Hero Title",
        "subtitle": "Optional subtitle text",
        "background_image": "path/to/image.jpg",
        "background_color": "#10b981",
        "overlay": true,
        "overlay_opacity": 0.5,
        "height": "medium", // small, medium, large, full
        "text_alignment": "center", // left, center, right
        "buttons": [
            {"label": "Get Started", "url": "/path", "style": "primary", "icon": "arrow-right"}
        ]
    }
--}}
@php
    $height = $block['height'] ?? 'medium';
    $heightClasses = [
        'small' => 'min-h-[40vh]',
        'medium' => 'min-h-[60vh]',
        'large' => 'min-h-[80vh]',
        'full' => 'min-h-screen',
    ];
    $alignment = $block['text_alignment'] ?? 'center';
    $alignmentClasses = [
        'left' => 'text-left',
        'center' => 'text-center',
        'right' => 'text-right',
    ];
    $overlay = $block['overlay'] ?? true;
    $overlayOpacity = $block['overlay_opacity'] ?? 0.4;
    $bgColor = $block['background_color'] ?? 'from-green-600 via-green-700 to-emerald-800';
@endphp

<section class="relative {{ $heightClasses[$height] ?? 'min-h-[60vh]' }} bg-gradient-to-br {{ $bgColor }} overflow-hidden">
    {{-- Background Image --}}
    @if(!empty($block['background_image']))
        <div class="absolute inset-0">
            <img src="{{ asset('storage/' . $block['background_image']) }}" 
                 alt=""
                 class="w-full h-full object-cover">
        </div>
    @endif
    
    {{-- Overlay --}}
    @if($overlay)
        <div class="absolute inset-0 bg-black" style="opacity: {{ $overlayOpacity }}"></div>
    @endif
    
    {{-- Pattern Overlay --}}
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.4&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
    
    {{-- Content --}}
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 flex items-center h-full">
        <div class="w-full {{ $alignmentClasses[$alignment] ?? 'text-center' }}">
            @if(!empty($block['title']))
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 {{ $alignment === 'center' ? 'mx-auto' : '' }} {{ $alignment === 'center' ? 'max-w-4xl' : 'max-w-3xl' }}">
                    {{ $block['title'] }}
                </h1>
            @endif
            
            @if(!empty($block['subtitle']))
                <p class="text-xl md:text-2xl text-white/90 {{ $alignment === 'center' ? 'mx-auto' : '' }} max-w-3xl mb-8">
                    {{ $block['subtitle'] }}
                </p>
            @endif
            
            {{-- CTA Buttons --}}
            @if(!empty($block['buttons']))
                <div class="flex flex-wrap {{ $alignment === 'center' ? 'justify-center' : ($alignment === 'right' ? 'justify-end' : 'justify-start') }} gap-4">
                    @foreach($block['buttons'] as $button)
                        @php
                            $isPrimary = ($button['style'] ?? 'primary') === 'primary';
                            $btnClass = $isPrimary 
                                ? 'bg-white text-green-700 hover:bg-green-50' 
                                : 'border-2 border-white text-white hover:bg-white/10';
                        @endphp
                        <a href="{{ $button['url'] ?? '#' }}" 
                           class="inline-flex items-center px-8 py-4 {{ $btnClass }} font-semibold rounded-lg transition shadow-lg">
                            @if(!empty($button['icon']))
                                <i class="fas fa-{{ $button['icon'] }} mr-2"></i>
                            @endif
                            {{ $button['label'] ?? 'Learn More' }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
    
    {{-- Scroll Indicator --}}
    @if(($block['show_scroll_indicator'] ?? false) && $height !== 'small')
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <a href="#content" class="text-white/80 hover:text-white transition">
                <i class="fas fa-chevron-down text-2xl"></i>
            </a>
        </div>
    @endif
</section>
