@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'The Marketplace Standard';
$subtitle = $settings['subtitle'] ?? 'We provide the tools and support you need to scale your digital business efficiently.';
$items = $settings['items'] ?? [
    ['icon' => 'zap', 'title' => 'Instant Delivery', 'description' => 'Access your digital assets immediately after purchase via our secure cloud.'],
    ['icon' => 'shield-check', 'title' => 'Verified Assets', 'description' => 'Every product on our platform is strictly vetted by our expert review team.'],
    ['icon' => 'message-square', 'title' => 'Expert Support', 'description' => 'Get direct assistance from elite creators and our dedicated support staff.'],
];

// Animation Settings
$animType = $settings['anim_type'] ?? 'fade-in-up';
$animDuration = $settings['anim_duration'] ?? '0.8s';
$animDelay = $settings['anim_delay'] ?? '0s';

$pt = $settings['padding_top'] ?? '48px';
$pb = $settings['padding_bottom'] ?? '48px';
$bg = $settings['bg_color'] ?? '#050816';

$ptStyle = "padding-top: $pt;";
$pbStyle = "padding-bottom: $pb;";
$bgStyle = "background-color: $bg;";
$titleAlignment = $settings['title_alignment'] ?? 'center';
@endphp

<section class="relative overflow-hidden mb-0!" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: true }">
    
    {{-- Cinematic Background Glows --}}
    <div class="absolute bottom-[-10%] left-[-10%] w-[40%] h-[40%] bg-brand-500/10 blur-[150px] rounded-full pointer-events-none opacity-40"></div>
    <div class="absolute top-[-5%] right-[-5%] w-[30%] h-[30%] bg-indigo-500/10 blur-[120px] rounded-full pointer-events-none opacity-30"></div>
    
    <div class="container mx-auto px-6 lg:px-8 relative z-10">
        <div class="flex flex-col {{ $titleAlignment === 'center' ? 'items-center text-center' : ($titleAlignment === 'right' ? 'items-end text-right' : 'items-start text-left') }} max-w-4xl {{ $titleAlignment === 'center' ? 'mx-auto' : '' }} mb-12">
            <div class="reveal-item anim-{{ $animType }} inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/05 border border-white/10 text-brand-400 text-[10px] font-black tracking-[0.2em] uppercase mb-6"
                :class="{ 'active': intersected }" style="--anim-duration: 0.6s; --anim-delay: 0s;">
                <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
                Platform Intelligence
            </div>
            
            <h2 class="reveal-item anim-{{ $animType }} text-4xl md:text-5xl lg:text-7xl font-display font-black text-white tracking-tighter mb-6 leading-[0.95]"
                :class="{ 'active': intersected }" style="--anim-duration: 0.8s; --anim-delay: 0.1s;">
                {{ $title }}
            </h2>
            
            <p class="reveal-item anim-{{ $animType }} text-lg md:text-xl text-white/50 max-w-2xl leading-relaxed font-medium"
                :class="{ 'active': intersected }" style="--anim-duration: 0.8s; --anim-delay: 0.2s;">
                {{ $subtitle }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            @foreach ($items as $index => $item)
            <div class="reveal-item anim-fade-in-up group p-10 bg-white/[0.02] border border-white/05 rounded-[3rem] backdrop-blur-3xl hover:bg-white/[0.04] hover:border-brand-500/30 transition-all duration-700 shadow-2xl"
                :class="{ 'active': intersected }" style="--anim-duration: 0.6s; --anim-delay: {{ 0.3 + ($index * 0.1) }}s;">
                <div class="w-16 h-16 rounded-[1.5rem] bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-500 mb-10 group-hover:scale-110 group-hover:bg-brand-500 group-hover:text-white transition-all duration-500 shadow-2xl shadow-brand-500/10">
                    <i data-lucide="{{ $item['icon'] ?? 'zap' }}" class="w-8 h-8 stroke-[2.5]"></i>
                </div>
                <h3 class="text-2xl font-black text-white mb-6 group-hover:text-brand-400 transition-colors tracking-tighter">
                    {{ $item['title'] ?? '' }}
                </h3>
                <p class="text-[14px] text-white/40 leading-relaxed font-bold group-hover:text-white/60 transition-colors duration-500">
                    {{ $item['description'] ?? '' }}
                </p>
                <div class="mt-8 pt-8 border-t border-white/05 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
                    <span class="text-[10px] font-black text-brand-500 uppercase tracking-widest">Learn More <i data-lucide="arrow-right" class="inline w-3 h-3 ml-2"></i></span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>