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

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
    
    $title = $settings['title'] ?? 'Join the Creator Inner Circle';
    $subtitle = $settings['subtitle'] ?? 'Get early access to premium drops and exclusive weekly insights.';
@endphp

<section class="relative overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}">
    {{-- Refined Background Effect --}}
    <div class="absolute top-0 right-0 w-96 h-96 bg-brand-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

    <div class="container mx-auto px-6 relative z-10">
        <div class="bg-surface-secondary/40 backdrop-blur-3xl border border-border-subtle p-8 md:p-12 rounded-[2.5rem] relative overflow-hidden shadow-xl shadow-brand-500/[0.02]">
            <div class="relative z-20 flex flex-col lg:flex-row items-{{ $titleAlignment === 'center' ? 'center' : ($titleAlignment === 'right' ? 'end' : 'start') }} lg:items-center gap-10 lg:gap-14">
                <div class="flex-1 text-{{ $titleAlignment }} lg:text-{{ $titleAlignment }}">
                    <span class="text-[10px] font-700 uppercase tracking-widest text-brand-500 mb-3 block">Stay Updated</span>
                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base mb-4 tracking-tight leading-tight {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto' : 'mr-auto') }}">
                        {!! $title !!}
                    </h2>
                    <p class="text-base md:text-lg text-text-muted/80 max-w-xl font-500 leading-relaxed {{ $titleAlignment === 'center' ? 'mx-auto' : ($titleAlignment === 'right' ? 'ml-auto mr-0' : 'mr-auto ml-0') }}">
                        {{ $subtitle }}
                    </p>
                </div>

                <div class="w-full lg:w-[450px]">
                    <form x-data="{ loading: false, success: false }"
                        @submit.prevent="loading = true; setTimeout(() => { loading = false; success = true }, 1000)"
                        class="relative">

                        <div x-show="!success" class="space-y-6">
                            <div class="relative group">
                                <div class="absolute inset-0 bg-brand-500/[0.03] blur-xl group-focus-within:bg-brand-500/10 transition-all rounded-2xl"></div>
                                <div class="relative flex flex-col sm:flex-row gap-3">
                                    <input type="email" required placeholder="name@company.com"
                                        class="flex-1 h-12 bg-surface-primary border border-border-subtle rounded-xl px-6 text-text-base placeholder:text-text-dim/40 focus:border-brand-500/50 transition-all outline-none text-sm shadow-sm">
                                    <button type="submit" :disabled="loading"
                                        class="h-12 px-8 bg-brand-500 hover:bg-brand-600 disabled:opacity-50 text-white font-800 rounded-xl transition-all shadow-lg active:scale-95 uppercase tracking-widest text-[11px] shrink-0">
                                        <span x-show="!loading">Join Hub</span>
                                        <i x-show="loading" data-lucide="loader-2"
                                            class="w-4 h-4 animate-spin mx-auto"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center justify-center lg:justify-start gap-8 opacity-60 mt-4">
                                <div class="flex items-center gap-2">
                                    <i data-lucide="shield-check" class="w-4 h-4 text-brand-500/60"></i>
                                    <span class="text-[10px] font-700 uppercase tracking-widest text-text-base">No Spam</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i data-lucide="zap" class="w-4 h-4 text-brand-500/60"></i>
                                    <span class="text-[10px] font-700 uppercase tracking-widest text-text-base">Weekly Drop</span>
                                </div>
                            </div>
                        </div>

                        <div x-show="success" x-cloak x-transition:enter="transition ease-out duration-500"
                            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                            class="bg-brand-500/5 border border-brand-500/20 rounded-2xl p-8 text-center lg:text-left">
                            <div class="w-12 h-12 bg-brand-500 rounded-full flex items-center justify-center mb-4 mx-auto lg:mx-0 shadow-lg shadow-brand-500/20">
                                <i data-lucide="check" class="w-6 h-6 text-white text-[2px]"></i>
                            </div>
                            <h4 class="text-xl font-800 text-text-base mb-2 tracking-tight">Welcome to the Club</h4>
                            <p class="text-text-muted/80 text-sm font-500">Check your inbox for your exclusive welcome gift.</p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>