@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Access the Matrix';
    $subtitle = $settings['subtitle'] ?? 'Join 25,000+ architects and get the latest protocols delivered to your inbox.';
@endphp

<section class="py-24 bg-[#0B0F19]">
    <div class="container mx-auto px-6">
        <div class="relative rounded-[3rem] bg-gradient-to-br from-[#111827] to-[#0B0F19] border border-white/5 p-12 md:p-20 overflow-hidden group">
            {{-- Background Effects --}}
            <div class="absolute top-0 right-0 w-[400px] h-[400px] bg-brand-500/10 blur-[100px] rounded-full group-hover:bg-brand-500/15 transition-colors"></div>
            <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-emerald-500/5 blur-[80px] rounded-full"></div>

            <div class="relative z-10 grid lg:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <div class="inline-flex items-center gap-2 px-3 py-1 bg-brand-500/10 border border-brand-500/20 rounded-full">
                        <i data-lucide="bell" class="w-3.5 h-3.5 text-brand-400"></i>
                        <span class="text-[9px] font-black text-brand-400 uppercase tracking-[0.2em]">Transmission Update</span>
                    </div>
                    <h2 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tight">{{ $title }}</h2>
                    <p class="text-slate-500 font-medium leading-relaxed max-w-sm">{{ $subtitle }}</p>
                </div>

                <div class="space-y-4">
                    <form action="{{ route('newsletter.subscribe') }}" method="POST" class="flex flex-col sm:flex-row gap-4">
                        @csrf
                        <input type="email" name="email" required placeholder="Enter Architect Email..." 
                               class="flex-1 h-14 bg-white/5 border border-white/10 rounded-2xl px-6 text-white font-bold text-sm focus:border-brand-500 transition-all outline-none">
                        <button type="submit" class="h-14 px-8 bg-brand-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-brand-500/20 hover:bg-brand-600 transition-all active:scale-95 whitespace-nowrap">
                            Init Stream
                        </button>
                    </form>
                    <p class="text-[10px] text-slate-600 font-bold uppercase tracking-widest text-center sm:text-left">
                        * NO SPAM. ONLY PURE TECHNICAL UPDATES.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>