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

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
    
    // Animation Settings
    $animType = $section->settings['anim_type'] ?? 'fade-in-up';
    $animDuration = $section->settings['anim_duration'] ?? '0.8s';
    $animDelay = $section->settings['anim_delay'] ?? '0s';
    $stagger = $section->settings['anim_stagger'] ?? true;

    $title = $section->settings['title'] ?? ($section->title ?? 'How it works');
    $subtitle = $section->settings['subtitle'] ?? ($section->subtitle ?? 'Get started in 3 simple steps');
    $steps = $section->settings['steps'] ?? [
        ['icon' => 'user-plus', 'title' => 'Sign Up', 'desc' => 'Create your account in seconds'],
        ['icon' => 'search', 'title' => 'Search', 'desc' => 'Find the perfect asset for your project'],
        ['icon' => 'download', 'title' => 'Download', 'desc' => 'Download and start building']
    ];
@endphp

<section class="relative border-b border-border-subtle overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    {{-- Refined Background Effect --}}
    <div class="absolute right-0 top-1/2 -translate-y-1/2 w-1/2 h-full bg-[radial-gradient(circle_at_right,rgba(var(--primary-rgb),0.02)_0%,transparent_60%)] pointer-events-none"></div>

    <div class="container relative z-10 px-6 mx-auto">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base mb-6 tracking-tight leading-tight">
                {{ $title }}
            </h2>
            <p class="text-base md:text-lg text-text-muted/80 font-500 max-w-2xl mx-auto leading-relaxed">
                {{ $subtitle }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-14">
            @foreach($steps as $index => $step)
                <div class="relative group">
                    {{-- Connector Line --}}
                    @if(!$loop->last)
                        <div class="hidden md:block absolute top-[40px] left-[60%] w-[calc(100%-20%)] h-[1px] bg-gradient-to-r from-brand-500/20 to-transparent z-0"></div>
                    @endif

                    <div class="flex flex-col items-center text-center relative z-10">
                        <div class="w-20 h-20 bg-surface-secondary/40 border border-border-subtle rounded-3xl flex items-center justify-center text-text-dim/60 group-hover:text-brand-500 group-hover:border-brand-500/20 group-hover:bg-brand-500/5 transition-all duration-700 shadow-sm mb-8 relative shadow-brand-500/[0.01]">
                            {{-- Step Number Float --}}
                            <div class="absolute -top-3 -right-3 w-8 h-8 rounded-xl bg-brand-500 flex items-center justify-center text-[10px] font-800 text-white shadow-lg shadow-brand-500/20 transition-transform group-hover:scale-110 group-hover:rotate-12">
                                0{{ $index + 1 }}
                            </div>
                            
                            <i data-lucide="{{ $step['icon'] ?? 'check-circle' }}" class="w-8 h-8 stroke-[2.5]"></i>
                        </div>
                        
                        <h3 class="text-xl font-800 text-text-base mb-4 font-display tracking-tight group-hover:text-brand-500 transition-colors">
                            {{ $step['title'] ?? 'Step Name' }}
                        </h3>
                        
                        <p class="text-text-muted/80 leading-relaxed font-500 text-sm max-w-sm">
                            {{ $step['description'] ?? ($step['desc'] ?? 'Step description goes here.') }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</sectio