@php
    $settings = $section->settings ?? [];
    $pt = $settings['padding_top'] ?? '120px';
    $pb = $settings['padding_bottom'] ?? '120px';
    $bg = $settings['bg_color'] ?? '#020617';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = "background-color: $bg;";

    $plans = $plans ?? \App\Modules\CustomerSubscription\Models\CustomerPlan::where('is_active', true)
        ->where('show_on_pricing', true)
        ->orderBy('sort_order')
        ->orderBy('price')
        ->get();
@endphp

<section class="relative overflow-hidden font-sans selection:bg-brand-500/30" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" 
    x-data="{ 
        billing: '{{ $settings['default_billing'] ?? ($billingType ?? 'monthly') }}', 
        intersected: false 
    }" 
    x-intersect.once="intersected = true">
    
    {{-- Premium Background Effects --}}
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full">
            <div class="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-brand-500/10 blur-[150px] rounded-full animate-pulse-slow"></div>
            <div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-indigo-500/10 blur-[150px] rounded-full animate-pulse-slow" style="animation-delay: 2s"></div>
        </div>
        {{-- Grid Overlay --}}
        <div class="absolute inset-0 opacity-[0.05]" style="background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 50px 50px;"></div>
    </div>

    <div class="container relative z-10 px-6 mx-auto">
        <div class="max-w-4xl mx-auto text-center mb-24">
            <div x-show="intersected" x-transition:enter="transition ease-out duration-700" x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0">
                <span class="inline-block px-4 py-1.5 mb-6 text-[10px] font-black uppercase tracking-[0.3em] text-brand-400 bg-brand-500/10 border border-brand-500/20 rounded-full">
                    Pricing Plans
                </span>
                <h2 class="text-4xl md:text-6xl font-black text-white mb-8 tracking-tight leading-[1.1] font-display">
                    {{ $section->settings['title'] ?? ($section->title ?? 'Ready to Start Selling?') }}
                </h2>
                <p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed font-medium">
                    {{ $section->settings['subtitle'] ?? ($section->subtitle ?? 'Choose a plan that fits your business needs and start reaching thousands of customers.') }}
                </p>
            </div>

            {{-- Refined Billing Toggle --}}
            @if(setting('enable_yearly_billing', true))
            <div class="mt-14 flex items-center justify-center gap-6" x-show="intersected" x-transition:enter="transition ease-out duration-700 delay-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <span :class="billing === 'monthly' ? 'text-white' : 'text-slate-500'" class="text-xs font-black uppercase tracking-widest transition-all cursor-pointer" @click="billing = 'monthly'">Monthly</span>
                <button type="button" @click="billing = (billing === 'monthly' ? 'yearly' : 'monthly')" 
                    class="relative w-16 h-8 bg-slate-900 border border-white/10 rounded-full transition-all p-1.5 hover:border-brand-500/50 shadow-inner group">
                    <div :class="billing === 'yearly' ? 'translate-x-8 bg-brand-500' : 'translate-x-0 bg-slate-600'" class="w-5 h-5 rounded-full transition-all shadow-lg group-hover:scale-110"></div>
                </button>
                <div class="flex items-center gap-3">
                    <span :class="billing === 'yearly' ? 'text-white' : 'text-slate-500'" class="text-xs font-black uppercase tracking-widest transition-all cursor-pointer" @click="billing = 'yearly'">Yearly</span>
                    <span class="bg-emerald-500/10 text-emerald-400 text-[9px] font-black px-2.5 py-1 rounded-md border border-emerald-500/20 shadow-sm animate-bounce">{{ setting('yearly_discount_text', 'Save 30%') }}</span>
                </div>
            </div>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
            @foreach ($plans as $plan)
                @php
                    $planInterval = ($plan->duration_unit === 'year' || $plan->duration_unit === 'years') ? 'yearly' : 'monthly';
                @endphp
                <div class="relative group h-full flex flex-col" 
                     x-show="!@js(setting('enable_yearly_billing', true)) || billing === '{{ $planInterval }}'"
                     x-transition:enter="transition ease-out duration-700"
                     x-transition:enter-start="opacity-0 translate-y-12"
                     x-transition:enter-end="opacity-100 translate-y-0">
                    
                    {{-- Premium Border Glow --}}
                    @if($plan->highlight_plan)
                        <div class="absolute -inset-[2px] bg-gradient-to-br from-brand-500 via-indigo-500 to-brand-500 rounded-[2.5rem] opacity-30 blur-[4px] group-hover:opacity-100 transition-opacity duration-700"></div>
                    @endif

                    <div class="relative h-full flex flex-col bg-slate-900/80 backdrop-blur-3xl border border-white/5 rounded-[2.5rem] p-10 transition-all duration-700 group-hover:border-white/20 group-hover:shadow-2xl group-hover:shadow-brand-500/5 group-hover:-translate-y-2 overflow-hidden">
                        
                        {{-- Badge & Header --}}
                        <div class="mb-12">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-2xl font-black text-white tracking-tight">{{ $plan->name }}</h3>
                                @if($plan->badge)
                                    <span class="bg-brand-500 text-slate-950 text-[10px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full shadow-lg shadow-brand-500/20">
                                        {{ $plan->badge }}
                                    </span>
                                @endif
                            </div>
                            <p class="text-slate-400 text-sm font-medium leading-relaxed">
                                {{ $plan->short_description }}
                            </p>
                        </div>

                        {{-- Pricing Display --}}
                        <div class="mb-12">
                            <div class="flex items-baseline gap-2">
                                <span class="text-brand-500/50 text-2xl font-black">{{ $plan->currency === 'USD' ? '$' : $plan->currency }}</span>
                                <span class="text-6xl font-black text-white tracking-tighter leading-none">
                                    {{ number_format($plan->price, 0) }}
                                </span>
                                <span class="text-slate-500 font-bold text-xs uppercase tracking-widest">/ {{ $planInterval == 'yearly' ? 'yr' : 'mo' }}</span>
                            </div>
                            <div class="mt-4 h-1 w-12 bg-gradient-to-r from-brand-500 to-indigo-500 rounded-full"></div>
                        </div>

                        {{-- CTA Button --}}
                        <div class="mb-12">
                            <a href="{{ Route::has('customer.subscription.checkout') ? route('customer.subscription.checkout', $plan->slug) : '#' }}" 
                                class="w-full h-16 flex items-center justify-center font-black text-xs uppercase tracking-[0.2em] rounded-2xl transition-all shadow-xl active:scale-95 group/btn overflow-hidden relative {{ $plan->highlight_plan ? 'bg-brand-500 text-slate-950 hover:bg-brand-400' : 'bg-white/5 border border-white/10 text-white hover:bg-white/10' }}">
                                <span class="relative z-10 flex items-center gap-2">
                                    Get Started
                                    <i data-lucide="{{ $plan->highlight_plan ? 'zap' : 'arrow-right' }}" class="w-4 h-4 {{ $plan->highlight_plan ? 'fill-current' : '' }} group-hover/btn:translate-x-1 transition-transform"></i>
                                </span>
                                @if($plan->highlight_plan)
                                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover/btn:animate-shimmer"></div>
                                @endif
                            </a>
                        </div>

                        {{-- Plan Limits (The "Hidden" Options) --}}
                        <div class="pt-8 mb-10 border-t border-white/5 space-y-6">
                            <div class="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em] mb-2 flex items-center gap-3">
                                <span>Plan Limits</span>
                                <div class="flex-1 h-[1px] bg-white/5"></div>
                            </div>
                            
                            <div class="grid grid-cols-1 gap-5">
                                {{-- Downloads --}}
                                <div class="flex items-center gap-4 group/item">
                                    <div class="w-10 h-10 rounded-xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-400 transition-transform group-hover/item:scale-110">
                                        <i data-lucide="download-cloud" class="w-5 h-5 stroke-[2.5]"></i>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-[10px] text-slate-500 font-black uppercase tracking-wider">Storage & DLs</span>
                                        <span class="text-sm font-bold text-white">
                                            @if($plan->unlimited_downloads || $plan->download_limit_type === 'unlimited')
                                                Unlimited Downloads
                                            @elseif($plan->download_limit_type === 'monthly' || $plan->limit_type === 'monthly_limit')
                                                {{ $plan->download_limit_value ?? $plan->monthly_download_limit }} Monthly
                                            @else
                                                {{ $plan->download_limit_value ?? $plan->total_download_limit }} Total
                                            @endif
                                        </span>
                                    </div>
                                </div>

                                {{-- Daily Cap --}}
                                @if($plan->daily_download_limit > 0)
                                <div class="flex items-center gap-4 group/item">
                                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 transition-transform group-hover/item:scale-110">
                                        <i data-lucide="clock-4" class="w-5 h-5 stroke-[2.5]"></i>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-[10px] text-slate-500 font-black uppercase tracking-wider">Daily Speed</span>
                                        <span class="text-sm font-bold text-white">{{ $plan->daily_download_limit }} Products / Day</span>
                                    </div>
                                </div>
                                @endif

                                {{-- Access --}}
                                <div class="flex items-center gap-4 group/item">
                                    <div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 transition-transform group-hover/item:scale-110">
                                        <i data-lucide="shield-check" class="w-5 h-5 stroke-[2.5]"></i>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-[10px] text-slate-500 font-black uppercase tracking-wider">Access Scope</span>
                                        <span class="text-sm font-bold text-white">
                                            {{ $plan->access_type == 'all_products' ? 'Full Library Access' : 'Restricted Access' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Features List --}}
                        <div class="mt-auto">
                            <div class="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-3">
                                <span>Features</span>
                                <div class="flex-1 h-[1px] bg-white/5"></div>
                            </div>
                            <ul class="space-y-4">
                                @php
                                    $planFeatures = is_array($plan->features_list) ? $plan->features_list : [];
                                    $allFeatures = array_unique(array_merge($globalFeatures ?? [], $planFeatures));
                                @endphp

                                @foreach($allFeatures as $feature)
                                    @php $hasFeature = in_array($feature, $planFeatures); @endphp
                                    <li class="flex items-start gap-4 transition-all duration-300 {{ !$hasFeature ? 'opacity-20' : '' }}">
                                        <div class="mt-1 w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0 {{ $hasFeature ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-600' }}">
                                            <i data-lucide="{{ $hasFeature ? 'check' : 'x' }}" class="w-3.5 h-3.5 stroke-[4]"></i>
                                        </div>
                                        <span class="text-xs font-bold leading-tight {{ $hasFeature ? 'text-slate-300' : 'text-slate-600 line-through decoration-slate-800' }}">{{ $feature }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>