@php
    $pricingShow = App\Models\HomepageSetting::get('pricing_show', true);
    $pricingLabel = App\Models\HomepageSetting::get('pricing_label', 'PRICING');
    $pricingHeading = App\Models\HomepageSetting::get('pricing_heading', 'Flexible Plans for Every Budget');
    $pricingSubtext = App\Models\HomepageSetting::get('pricing_subtext', 'Choose between recurring subscriptions, multi-installment payments, or bulk upfront savings.');
    $card1 = App\Models\HomepageSetting::get('pricing_card1_json', []);
    $card2 = App\Models\HomepageSetting::get('pricing_card2_json', []);
    $card3 = App\Models\HomepageSetting::get('pricing_card3_json', []);
    $pricingSecurityShow = App\Models\HomepageSetting::get('pricing_security_show', true);
    $pricingSecurityText = App\Models\HomepageSetting::get('pricing_security_text', 'Secure payments via Stripe or manual bank transfers.');
@endphp

@if($pricingShow)
<div id="section-pricing" class="py-24 bg-slate-50/50 relative {{ isset($activeEditingSection) && $activeEditingSection === 'pricing' ? 'ring-4 ring-amber-500' : '' }}">
    @if(isset($activeEditingSection) && $activeEditingSection === 'pricing')
        <div class="absolute top-4 left-4 z-50 bg-amber-500 text-white font-bold text-xs uppercase px-3 py-1 rounded-full shadow-lg">Editing: Pricing Plans</div>
    @endif
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <span class="inline-block text-xs font-semibold text-accent uppercase tracking-widest" style="color: var(--accent);">{{ $pricingLabel }}</span>
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900" style="color: var(--primary);">
                {{ $pricingHeading }}
            </h2>
            <p class="text-slate-500 font-light text-base max-w-2xl mx-auto">
                {{ $pricingSubtext }}
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch max-w-6xl mx-auto">
            <!-- Card 1 -->
            @if(!empty($card1))
            <div class="bg-white rounded-3xl p-8 border flex flex-col justify-between transition duration-300 relative
                {{ ($card1['featured'] ?? false) ? 'border-accent shadow-xl scale-105 z-10' : 'border-slate-100 shadow-sm hover:shadow-md' }}
            ">
                @if($card1['featured'] ?? false)
                    <span class="absolute -top-3.5 left-1/2 transform -translate-x-1/2 bg-accent text-white text-[9px] font-bold uppercase tracking-wider px-3.5 py-1 rounded-full" style="background-color: var(--accent);">Most Popular</span>
                @endif
                <div class="space-y-6">
                    <h3 class="text-lg font-extrabold text-slate-800">{{ $card1['name'] ?? 'Monthly Plan' }}</h3>
                    <div class="flex items-baseline">
                        <span class="text-3xl font-black text-slate-800">{{ $card1['price'] ?? '' }}</span>
                        <span class="text-xs text-slate-400 font-medium ml-1">{{ $card1['unit'] ?? '' }}</span>
                    </div>
                    @if(isset($card1['savings_badge']) && $card1['savings_badge'])
                        <span class="inline-block px-2.5 py-1 rounded-lg text-[9px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700">{{ $card1['savings_badge'] }}</span>
                    @endif
                    <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $card1['description'] ?? '' }}</p>
                    
                    <ul class="space-y-3 pt-2">
                        @foreach($card1['features'] ?? [] as $feature)
                            <li class="flex items-center text-xs text-slate-600 font-medium">
                                <span class="text-accent mr-2" style="color: var(--accent);">✓</span>
                                <span>{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="pt-8">
                    <a href="{{ $card1['btn_url'] ?? '#' }}" class="w-full text-center block py-3 rounded-full text-xs font-bold shadow-md hover:shadow-lg transition" 
                       style="background-color: {{ ($card1['featured'] ?? false) ? 'var(--accent)' : 'var(--primary)' }}; color: white;">
                        {{ $card1['btn_label'] ?? 'Get Started' }}
                    </a>
                </div>
            </div>
            @endif

            <!-- Card 2 -->
            @if(!empty($card2))
            <div class="bg-white rounded-3xl p-8 border flex flex-col justify-between transition duration-300 relative
                {{ ($card2['featured'] ?? false) ? 'border-accent shadow-xl scale-105 z-10' : 'border-slate-100 shadow-sm hover:shadow-md' }}
            ">
                @if($card2['featured'] ?? false)
                    <span class="absolute -top-3.5 left-1/2 transform -translate-x-1/2 bg-accent text-white text-[9px] font-bold uppercase tracking-wider px-3.5 py-1 rounded-full" style="background-color: var(--accent);">Most Popular</span>
                @endif
                <div class="space-y-6">
                    <h3 class="text-lg font-extrabold text-slate-800">{{ $card2['name'] ?? 'Installment Plan' }}</h3>
                    <div class="flex items-baseline">
                        <span class="text-3xl font-black text-slate-800">{{ $card2['price'] ?? '' }}</span>
                        <span class="text-xs text-slate-400 font-medium ml-1">{{ $card2['unit'] ?? '' }}</span>
                    </div>
                    <div class="flex flex-col space-y-1.5">
                        @if(isset($card2['total_label']) && $card2['total_label'])
                            <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">{{ $card2['total_label'] }}</span>
                        @endif
                        @if(isset($card2['savings_badge']) && $card2['savings_badge'])
                            <div class="mt-0.5"><span class="inline-block px-2.5 py-1 rounded-lg text-[9px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700">{{ $card2['savings_badge'] }}</span></div>
                        @endif
                    </div>
                    <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $card2['description'] ?? '' }}</p>
                    
                    <ul class="space-y-3 pt-2">
                        @foreach($card2['features'] ?? [] as $feature)
                            <li class="flex items-center text-xs text-slate-600 font-medium">
                                <span class="text-accent mr-2" style="color: var(--accent);">✓</span>
                                <span>{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="pt-8">
                    <a href="{{ $card2['btn_url'] ?? '#' }}" class="w-full text-center block py-3 rounded-full text-xs font-bold shadow-md hover:shadow-lg transition" 
                       style="background-color: {{ ($card2['featured'] ?? false) ? 'var(--accent)' : 'var(--primary)' }}; color: white;">
                        {{ $card2['btn_label'] ?? 'Choose Installment' }}
                    </a>
                </div>
            </div>
            @endif

            <!-- Card 3 -->
            @if(!empty($card3))
            <div class="bg-white rounded-3xl p-8 border flex flex-col justify-between transition duration-300 relative
                {{ ($card3['featured'] ?? false) ? 'border-accent shadow-xl scale-105 z-10' : 'border-slate-100 shadow-sm hover:shadow-md' }}
            ">
                @if($card3['featured'] ?? false)
                    <span class="absolute -top-3.5 left-1/2 transform -translate-x-1/2 bg-accent text-white text-[9px] font-bold uppercase tracking-wider px-3.5 py-1 rounded-full" style="background-color: var(--accent);">Most Popular</span>
                @endif
                <div class="space-y-6">
                    <h3 class="text-lg font-extrabold text-slate-800">{{ $card3['name'] ?? 'Pay Upfront' }}</h3>
                    <div class="flex items-baseline">
                        <span class="text-3xl font-black text-slate-800">{{ $card3['price'] ?? '' }}</span>
                        <span class="text-xs text-slate-400 font-medium ml-1">{{ $card3['unit'] ?? '' }}</span>
                    </div>
                    @if(isset($card3['savings_badge']) && $card3['savings_badge'])
                        <span class="inline-block px-2.5 py-1 rounded-lg text-[9px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700">{{ $card3['savings_badge'] }}</span>
                    @endif
                    <p class="text-xs font-light text-slate-500 leading-relaxed">{{ $card3['description'] ?? '' }}</p>
                    
                    <ul class="space-y-3 pt-2">
                        @foreach($card3['features'] ?? [] as $feature)
                            <li class="flex items-center text-xs text-slate-600 font-medium">
                                <span class="text-accent mr-2" style="color: var(--accent);">✓</span>
                                <span>{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="pt-8">
                    <a href="{{ $card3['btn_url'] ?? '#' }}" class="w-full text-center block py-3 rounded-full text-xs font-bold shadow-md hover:shadow-lg transition" 
                       style="background-color: {{ ($card3['featured'] ?? false) ? 'var(--accent)' : 'var(--primary)' }}; color: white;">
                        {{ $card3['btn_label'] ?? 'Pay Upfront & Save' }}
                    </a>
                </div>
            </div>
            @endif
        </div>

        @if($pricingSecurityShow)
            <div class="text-center mt-12 text-xs font-bold text-slate-400 flex items-center justify-center space-x-2">
                <span>🔒 {{ $pricingSecurityText }}</span>
            </div>
        @endif
    </div>
</div>
@endif