{{-- 
    Publishing Block: Split Screen
    Two-column layout with image on one side and content on other
    
    Block Data Structure:
    {
        "type": "split_screen",
        "layout": "left", // left, right, alternating
        "image": "path/to/image.jpg",
        "image_alt": "Alt text",
        "title": "Section Title",
        "content": "<p>HTML content...</p>",
        "button": {"label": "Learn More", "url": "/path"},
        "theme_color": "#10b981",
        "background": "white"
    }
--}}
@php
    $layout = $block['layout'] ?? 'left';
    $background = $block['background'] ?? 'white';
    $themeColor = $block['theme_color'] ?? '#10b981';
    
    $backgroundClasses = [
        'white' => 'bg-white',
        'gray' => 'bg-gray-50',
        'primary' => 'bg-green-50',
    ];
@endphp

<section class="py-12 lg:py-20 {{ $backgroundClasses[$background] ?? 'bg-white' }}">
    <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-0 lg:gap-0">
            
            {{-- Image Column --}}
            <div class="{{ $layout === 'right' ? 'lg:order-2' : '' }} relative h-64 lg:h-auto min-h-[400px]">
                @if(!empty($block['image']))
                    <img src="{{ asset('storage/' . $block['image']) }}" 
                         alt="{{ $block['image_alt'] ?? '' }}"
                         class="absolute inset-0 w-full h-full object-cover">
                @endif
                
                {{-- Decorative Overlay --}}
                <div class="absolute inset-0 bg-gradient-to-r {{ $layout === 'right' ? 'from-transparent via-transparent to-white/20 lg:to-white' : 'from-white/20 via-transparent to-transparent lg:from-white' }}"></div>
            </div>
            
            {{-- Content Column --}}
            <div class="{{ $layout === 'right' ? 'lg:order-1' : '' }} flex items-center px-6 lg:px-16 py-12 lg:py-16">
                <div class="max-w-xl">
                    {{-- Label/Badge --}}
                    @if(!empty($block['label']))
                        <span class="inline-block px-4 py-1 text-sm font-semibold rounded-full mb-4"
                              style="background-color: {{ $themeColor }}20; color: {{ $themeColor }};">
                            {{ $block['label'] }}
                        </span>
                    @endif
                    
                    {{-- Title --}}
                    @if(!empty($block['title']))
                        <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">
                            {{ $block['title'] }}
                        </h2>
                    @endif
                    
                    {{-- Content --}}
                    @if(!empty($block['content']))
                        <div class="prose prose-lg text-gray-600 mb-8">
                            {!! $block['content'] !!}
                        </div>
                    @endif
                    
                    {{-- Features List --}}
                    @if(!empty($block['features']))
                        <ul class="space-y-3 mb-8">
                            @foreach($block['features'] as $feature)
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle mt-1 mr-3" style="color: {{ $themeColor }};"></i>
                                    <span class="text-gray-700">{{ $feature }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                    
                    {{-- Button --}}
                    @if(!empty($block['button']))
                        <a href="{{ $block['button']['url'] ?? '#' }}" 
                           class="inline-flex items-center px-8 py-4 font-semibold rounded-lg transition shadow-lg"
                           style="background-color: {{ $themeColor }}; color: white;"
                           onmouseover="this.style.opacity='0.9'" 
                           onmouseout="this.style.opacity='1'">
                            @if(!empty($block['button']['icon']))
                                <i class="fas fa-{{ $block['button']['icon'] }} mr-2"></i>
                            @endif
                            {{ $block['button']['label'] ?? 'Learn More' }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
