@php
    $bgColor = $content['bg_color'] ?? '';
    $bgImage = $content['bg_image'] ?? '';
    $sectionClass = $content['custom_class'] ?? '';
    $sectionStyle = $content['custom_style'] ?? '';
    
    $styleString = '';
    if (!empty($bgColor)) {
        $styleString .= "background-color: {$bgColor}; ";
    }
    if (!empty($bgImage)) {
        $imgUrl = \Illuminate\Support\Str::startsWith($bgImage, ['http', 'assets/']) 
            ? asset($bgImage) 
            : \Illuminate\Support\Facades\Storage::url($bgImage);
        $styleString .= "background-image: url('{$imgUrl}'); background-size: cover; background-position: center; ";
    }
    $styleString .= $sectionStyle;
@endphp

<section class="py-20 px-6 {{ $sectionClass }}" style="{{ $styleString }}">
    <div class="max-w-7xl mx-auto">
        @if(!empty($content['title']) || !empty($content['subtitle']))
            <div class="text-center mb-16">
                @if(!empty($content['title']))
                    <h2 class="font-headline-md text-3xl md:text-4xl text-primary mb-4 font-semibold">
                        {{ $content['title'] }}
                    </h2>
                @endif
                @if(!empty($content['subtitle']))
                    <p class="font-body-md text-on-surface-variant max-w-2xl mx-auto leading-relaxed">
                        {{ $content['subtitle'] }}
                    </p>
                @endif
            </div>
        @endif

        @if(!empty($content['cards']) && is_array($content['cards']))
            <div class="grid grid-cols-1 md:grid-cols-5 gap-6 justify-center items-stretch">
                @foreach($content['cards'] as $card)
                    @php
                        $cardBg = $card['bg_color'] ?? '#FCFBF7';
                        $cardClass = $card['custom_class'] ?? '';
                        $cardStyle = $card['custom_style'] ?? '';
                    @endphp
                    <div class="p-8 rounded transition-all duration-300 flex flex-col justify-between items-center text-center {{ $cardClass }}" 
                         style="background-color: {{ $cardBg }}; border: 1px solid rgba(196, 150, 38, 0.2); {{ $cardStyle }}">
                        
                        <div class="flex-grow flex flex-col items-center w-full">
                            @if(!empty($card['image']))
                            <div class="mb-6 h-20 flex items-center justify-center">
                                @if($card['image'] === 'sc_icon')
                                    <span class="sc_icon material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">
                                        {{ $card['icon_name'] ?? 'spa' }}
                                    </span>
                                @else
                                    <img src="{{ \Illuminate\Support\Str::startsWith($card['image'], ['http', 'assets/']) ? asset($card['image']) : \Illuminate\Support\Facades\Storage::url($card['image']) }}" 
                                         alt="{{ $card['title'] ?? '' }}" 
                                         class="max-h-20 max-w-[80px] object-contain" />
                                @endif
                            </div>
                        @endif

                            @if(!empty($card['title']))
                                @php
                                    $titleColor = $card['title_color'] ?? '#201b12';
                                    $titleSize = $card['title_font_size'] ?? '1.25rem';
                                    $titleFamily = $card['title_font_family'] ?? "'Playfair Display', serif";
                                    $titleClass = $card['title_custom_class'] ?? '';
                                    $titleStyle = $card['title_custom_style'] ?? '';
                                @endphp
                                <h3 class="mb-3 font-semibold {{ $titleClass }}" 
                                    style="color: {{ $titleColor }}; font-size: {{ $titleSize }}; font-family: {{ $titleFamily }}; {{ $titleStyle }}">
                                    {{ $card['title'] }}
                                </h3>
                            @endif

                            @if(!empty($card['description']))
                                @php
                                    $descColor = $card['desc_color'] ?? '#4e4635';
                                    $descSize = $card['desc_font_size'] ?? '0.875rem';
                                    $descFamily = $card['desc_font_family'] ?? "'Public Sans', sans-serif";
                                    $descClass = $card['desc_custom_class'] ?? '';
                                    $descStyle = $card['desc_custom_style'] ?? '';
                                @endphp
                                <p class="leading-relaxed mb-6 {{ $descClass }}" 
                                   style="color: {{ $descColor }}; font-size: {{ $descSize }}; font-family: {{ $descFamily }}; {{ $descStyle }}">
                                    {{ $card['description'] }}
                                </p>
                            @endif
                        </div>

                        @if(!empty($card['button_text']) && !empty($card['button_url']))
                            @php
                                $btnBg = $card['button_color'] ?? '#c49626';
                                $btnText = $card['button_text_color'] ?? '#ffffff';
                                $btnSize = $card['button_font_size'] ?? '0.75rem';
                                $btnFamily = $card['button_font_family'] ?? "'Public Sans', sans-serif";
                                $btnClass = $card['button_custom_class'] ?? '';
                                $btnStyle = $card['button_custom_style'] ?? '';
                            @endphp
                            <div class="mt-auto">
                                <a href="{{ $card['button_url'] }}" 
                                   class="inline-block px-4 py-2 rounded transition-all font-semibold tracking-wider uppercase {{ $btnClass }}"
                                   style="background-color: {{ $btnBg }}; color: {{ $btnText }} !important; font-size: {{ $btnSize }}; font-family: {{ $btnFamily }}; {{ $btnStyle }}">
                                    {{ $card['button_text'] }}
                                </a>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>