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

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

<section class="relative overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    {{-- Decorative Background Effect --}}
    <div class="absolute right-0 top-0 w-[500px] h-[500px] bg-brand-500/5 blur-[120px] rounded-full pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        @php
            $title = $settings['title'] ?? ($section->title ?? null);
            $subtitle = $settings['subtitle'] ?? ($section->subtitle ?? null);
        @endphp
        @if($title || $subtitle)
        <div class="text-{{ $titleAlignment }} {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto' : 'mr-auto') }} mb-20 md:mb-24 max-w-4xl">
            @if($title)
            <h2 class="text-4xl md:text-6xl font-display font-900 text-text-base uppercase tracking-tight mb-6">
                {{ $title }}
            </h2>
            @endif
            @if($subtitle)
            <p class="text-lg md:text-xl text-text-dim max-w-2xl {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto mr-0' : 'mr-auto ml-0') }} font-600 uppercase tracking-widest">
                {{ $subtitle }}
            </p>
            @endif
        </div>
        @endif

        <div class="max-w-4xl mx-auto space-y-6" x-data="{ active: null }">
            @foreach ($section->settings['items'] ?? [] as $index => $item)
            <div class="group border border-border-subtle rounded-[2rem] overflow-hidden bg-surface-secondary/50 backdrop-blur-xl transition-all duration-500 hover:border-brand-500/40 hover:shadow-2xl hover:shadow-brand-500/5">
                <button @click="active = (active === {{ $index }} ? null : {{ $index }})"
                    class="w-full px-10 py-8 flex items-center justify-between text-left transition-all">
                    <span class="text-xl font-800 text-text-base group-hover:text-brand-500 transition-colors uppercase tracking-tight">
                        {{ $item['question'] ?? '' }}
                    </span>
                    <div class="w-10 h-10 rounded-xl bg-surface-primary border border-border-subtle flex items-center justify-center text-text-dim transition-all duration-500"
                         :class="active === {{ $index }} ? 'rotate-180 bg-brand-500 text-white border-brand-500 shadow-lg shadow-brand-500/20' : 'group-hover:border-brand-500/30'">
                        <i data-lucide="chevron-down" class="w-5 h-5 stroke-[3]"></i>
                    </div>
                </button>
                <div x-show="active === {{ $index }}" x-collapse x-cloak>
                    <div class="px-10 pb-8 pt-2">
                        <div class="h-px w-full bg-border-subtle mb-8"></div>
                        <p class="text-text-muted leading-relaxed font-600 text-[15px] uppercase tracking-wide">
                            {{ $item['answer'] ?? '' }}
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</sectio