@php
$settings = $section->settings ?? [];
$title = $settings['title'] ?? 'Ready to grow your revenue?';
$subtitle = $settings['subtitle'] ?? 'Join thousands of creators selling their digital items today.';
$alignment = $settings['alignment'] ?? 'center';

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

$paddingTop = $settings['padding_top'] ?? '60px';
$paddingBottom = $settings['padding_bottom'] ?? '60px';
$bgColor = $settings['bg_color'] ?? 'transparent';

$alignClass = [
'left' => 'text-left',
'center' => 'text-center mx-auto',
'right' => 'text-right ml-auto',
][$alignment] ?? 'text-center mx-auto';

$flexAlign = [
'left' => 'justify-start',
'center' => 'justify-center',
'right' => 'justify-end',
][$alignment] ?? 'justify-center';
@endphp

@php
    $ptStyle = "padding-top: $paddingTop;";
    $pbStyle = "padding-bottom: $paddingBottom;";
    $bgStyle = $bgColor !== 'transparent' ? "background-color: $bgColor;" : '';
@endphp

<section class="mt-8 md:mt-16"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">

    <div class="container px-4 mx-auto">
            <div class="relative p-8 md:p-12 rounded-[2.5rem] overflow-hidden group border border-border-subtle shadow-2xl bg-brand-600 dark:bg-brand-500">
                {{-- Refined Background Effects --}}
                <div class="absolute inset-0 transition-transform duration-1000 group-hover:scale-[1.02]"></div>
                <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none opacity-40"></div>
                <div class="absolute -right-20 -top-20 w-80 h-80 bg-white/5 blur-[100px] rounded-full"></div>
                <div class="absolute -left-20 -bottom-20 w-80 h-80 bg-brand-900/20 blur-[100px] rounded-full"></div>

                <div class="relative z-10 {{ $alignClass }} max-w-4xl">
                    <h2 class="reveal-item anim-{{ $animType }} text-2xl md:text-4xl lg:text-5xl font-display font-800 text-white mb-4 tracking-tight leading-[1.2]"
                        :class="{ 'active': intersected }"
                        style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                        {{ $title }}
                    </h2>
                    <p class="reveal-item anim-{{ $animType }} text-white/80 text-sm md:text-base mb-8 max-w-xl {{ $alignment === 'center' ? 'mx-auto' : '' }} font-500 leading-relaxed"
                        :class="{ 'active': intersected }"
                        style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.1s);">
                        {{ $subtitle }}
                    </p>

                    <div class="reveal-item anim-{{ $animType }} flex {{ $flexAlign }}" :class="{ 'active': intersected }"
                        style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.2s);">
                        <a href="{{ $settings['cta_link'] ?? '#' }}"
                            class="px-10 py-4 bg-white text-brand-500 rounded-xl font-800 uppercase tracking-widest text-[10px] hover:bg-neutral-100 transition-all shadow-xl hover:scale-105 active:scale-95">
                            {{ $settings['cta_text'] ?? 'Get Started' }}
                        </a>
                    </div>
                </div>
            </div>
    </div>
</sectio