{{-- 
    Publishing Block: Card Section
    Grid of cards with icons, images, titles, and descriptions
    
    Block Data Structure:
    {
        "type": "card_section",
        "title": "Our Services",
        "subtitle": "What we offer",
        "columns": 3,
        "cards": [
            {
                "title": "Card Title",
                "description": "Card description",
                "icon": "stethoscope",
                "image": "path/to/image.jpg",
                "link": "/path",
                "theme_color": "#10b981"
            }
        ],
        "style": "default", // default, bordered, elevated, flat
        "background": "white"
    }
--}}
@php
    $columns = $block['columns'] ?? 3;
    $style = $block['style'] ?? 'default';
    $background = $block['background'] ?? 'white';
    $cards = $block['cards'] ?? [];
    
    $columnClasses = [
        1 => 'grid-cols-1',
        2 => 'grid-cols-1 md:grid-cols-2',
        3 => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
        4 => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
    ];
    
    $backgroundClasses = [
        'white' => 'bg-white',
        'gray' => 'bg-gray-50',
        'primary' => 'bg-green-50',
    ];
@endphp

<section class="py-12 lg:py-16 {{ $backgroundClasses[$background] ?? 'bg-white' }}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Section Header --}}
        @if(!empty($block['title']))
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
                    {{ $block['title'] }}
                </h2>
                @if(!empty($block['subtitle']))
                    <p class="text-lg text-gray-600 max-w-5xl mx-auto">
                        {{ $block['subtitle'] }}
                    </p>
                @endif
            </div>
        @endif
        
        {{-- Cards Grid --}}
        <div class="grid {{ $columnClasses[$columns] ?? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' }} gap-6 lg:gap-8">
            @foreach($cards as $card)
                @php
                    $themeColor = $card['theme_color'] ?? '#10b981';
                    $cardTag = !empty($card['link']) ? 'a' : 'div';
                    $cardHref = !empty($card['link']) ? 'href="' . $card['link'] . '"' : '';
                @endphp
                
                @if(!empty($card['link']))
                    <a href="{{ $card['link'] }}" class="group">
                @endif
                
                <div class="bg-white rounded-xl overflow-hidden {{ $style === 'elevated' ? 'shadow-lg hover:shadow-xl' : 'shadow-md' }} {{ $style === 'bordered' ? 'border border-gray-200' : '' }} {{ $style === 'flat' ? 'shadow-none' : '' }} transition-all duration-300 hover:-translate-y-1">
                    {{-- Card Image --}}
                    @if(!empty($card['image']))
                        <div class="h-48 bg-gray-100 overflow-hidden">
                            <img src="{{ asset('storage/' . $card['image']) }}" 
                                 alt="{{ $card['title'] ?? '' }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        </div>
                    @endif
                    
                    <div class="p-6">
                        {{-- Card Icon --}}
                        @if(!empty($card['icon']))
                            <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" 
                                 style="background-color: {{ $themeColor }}20;">
                                <i class="fas fa-{{ $card['icon'] }} text-2xl" style="color: {{ $themeColor }};"></i>
                            </div>
                        @endif
                        
                        {{-- Card Title --}}
                        @if(!empty($card['title']))
                            <h3 class="text-xl font-semibold text-gray-800 mb-2 group-hover:text-green-600 transition">
                                {{ $card['title'] }}
                            </h3>
                        @endif
                        
                        {{-- Card Description --}}
                        @if(!empty($card['description']))
                            <p class="text-gray-600 leading-relaxed">
                                {{ $card['description'] }}
                            </p>
                        @endif
                        
                        {{-- Card Link --}}
                        @if(!empty($card['link']))
                            <div class="mt-4 flex items-center text-sm font-medium" style="color: {{ $themeColor }};">
                                Learn More
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                            </div>
                        @endif
                    </div>
                </div>
                
                @if(!empty($card['link']))
                    </a>
                @endif
            @endforeach
        </div>
        
        {{-- Section CTA --}}
        @if(!empty($block['cta_button']))
            <div class="mt-12 text-center">
                <a href="{{ $block['cta_button']['url'] ?? '#' }}" 
                   class="inline-flex items-center px-8 py-4 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition shadow-lg">
                    @if(!empty($block['cta_button']['icon']))
                        <i class="fas fa-{{ $block['cta_button']['icon'] }} mr-2"></i>
                    @endif
                    {{ $block['cta_button']['label'] ?? 'View All' }}
                </a>
            </div>
        @endif
    </div>
</section>
