{{-- 
    Publishing Block: Call to Action (CTA)
    Prominent call-to-action section with background
    
    Block Data Structure:
    {
        "type": "cta",
        "title": "Ready to Get Started?",
        "content": "Join thousands of healthcare providers...",
        "style": "default", // default, simple, boxed, split
        "background_type": "gradient", // gradient, image, solid
        "background_color": "#10b981",
        "background_image": "path/to/image.jpg",
        "buttons": [
            {"label": "Get Started", "url": "/path", "style": "primary"},
            {"label": "Learn More", "url": "/path", "style": "outline"}
        ]
    }
--}}
@php
    $style = $block['style'] ?? 'default';
    $backgroundType = $block['background_type'] ?? 'gradient';
    $bgColor = $block['background_color'] ?? '#10b981';
@endphp

<section class="relative overflow-hidden">
    {{-- Background --}}
    @if($backgroundType === 'image' && !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 class="absolute inset-0 bg-black/60"></div>
        </div>
    @endif
    
    @if($style === 'split')
        <div class="grid grid-cols-1 lg:grid-cols-2">
            {{-- Left: Content --}}
            <div class="py-16 lg:py-24 px-6 lg:px-16 bg-gradient-to-br" 
                 style="background: linear-gradient(135deg, {{ $bgColor }}, {{ $bgColor }}dd);">
                <div class="max-w-xl">
                    @if(!empty($block['title']))
                        <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                            {{ $block['title'] }}
                        </h2>
                    @endif
                    
                    @if(!empty($block['content']))
                        <p class="text-lg text-white/90 mb-8">
                            {{ $block['content'] }}
                        </p>
                    @endif
                    
                    @if(!empty($block['buttons']))
                        <div class="flex flex-wrap gap-4">
                            @foreach($block['buttons'] as $button)
                                @php
                                    $isPrimary = ($button['style'] ?? 'primary') === 'primary';
                                    $btnClass = $isPrimary 
                                        ? 'bg-white text-gray-800 hover:bg-gray-100' 
                                        : '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">
                                    @if(!empty($button['icon']))
                                        <i class="fas fa-{{ $button['icon'] }} mr-2"></i>
                                    @endif
                                    {{ $button['label'] ?? 'Learn More' }}
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
            
            {{-- Right: Image/Form --}}
            <div class="py-16 lg:py-24 px-6 lg:px-16 bg-white">
                @if(!empty($block['right_content']))
                    <div class="prose prose-lg max-w-none">
                        {!! $block['right_content'] !!}
                    </div>
                @else
                    <div class="h-full flex items-center justify-center">
                        @if(!empty($block['right_image']))
                            <img src="{{ asset('storage/' . $block['right_image']) }}" 
                                 alt=""
                                 class="max-w-md w-full rounded-lg shadow-xl">
                        @endif
                    </div>
                @endif
            </div>
        </div>
    @elseif($style === 'boxed')
        <div class="py-12 lg:py-20 px-4 bg-gray-50">
            <div class="max-w-4xl mx-auto">
                <div class="rounded-2xl shadow-2xl overflow-hidden"
                     @if($backgroundType === 'gradient')
                         style="background: linear-gradient(135deg, {{ $bgColor }}, {{ $bgColor }}bb);"
                     @elseif($backgroundType === 'solid')
                         style="background-color: {{ $bgColor }};"
                     @endif>
                    <div class="py-16 px-8 text-center">
                        @if(!empty($block['title']))
                            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                                {{ $block['title'] }}
                            </h2>
                        @endif
                        
                        @if(!empty($block['content']))
                            <p class="text-lg text-white/90 mb-8 max-w-5xl mx-auto">
                                {{ $block['content'] }}
                            </p>
                        @endif
                        
                        @if(!empty($block['buttons']))
                            <div class="flex flex-wrap justify-center gap-4">
                                @foreach($block['buttons'] as $button)
                                    @php
                                        $isPrimary = ($button['style'] ?? 'primary') === 'primary';
                                        $btnClass = $isPrimary 
                                            ? 'bg-white text-gray-800 hover:bg-gray-100' 
                                            : '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">
                                        {{ $button['label'] ?? 'Learn More' }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @else
        {{-- Default Style --}}
        <div class="relative py-16 lg:py-24 px-4"
             @if($backgroundType === 'gradient')
                 style="background: linear-gradient(135deg, {{ $bgColor }}, {{ $bgColor }}dd);"
             @elseif($backgroundType === 'solid')
                 style="background-color: {{ $bgColor }};"
             @endif>
            
            {{-- Decorative Elements --}}
            <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <div class="absolute -top-24 -right-24 w-64 h-64 rounded-full bg-white/5"></div>
                <div class="absolute -bottom-24 -left-24 w-96 h-96 rounded-full bg-white/5"></div>
            </div>
            
            <div class="relative max-w-4xl mx-auto text-center">
                @if(!empty($block['title']))
                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
                        {{ $block['title'] }}
                    </h2>
                @endif
                
                @if(!empty($block['content']))
                    <p class="text-xl text-white/90 mb-10 max-w-5xl mx-auto">
                        {{ $block['content'] }}
                    </p>
                @endif
                
                @if(!empty($block['buttons']))
                    <div class="flex flex-wrap justify-center gap-4">
                        @foreach($block['buttons'] as $button)
                            @php
                                $isPrimary = ($button['style'] ?? 'primary') === 'primary';
                                $btnClass = $isPrimary 
                                    ? 'bg-white text-gray-800 hover:bg-gray-100 shadow-lg' 
                                    : '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">
                                @if(!empty($button['icon']))
                                    <i class="fas fa-{{ $button['icon'] }} mr-2"></i>
                                @endif
                                {{ $button['label'] ?? 'Learn More' }}
                            </a>
                        @endforeach
                    </div>
                @endif
                
                {{-- Trust Indicators --}}
                @if(!empty($block['trust_indicators']))
                    <div class="mt-12 flex flex-wrap justify-center gap-8 text-white/80">
                        @foreach($block['trust_indicators'] as $indicator)
                            <div class="flex items-center">
                                <i class="fas fa-{{ $indicator['icon'] ?? 'check' }} mr-2"></i>
                                <span>{{ $indicator['text'] }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    @endif
</section>
