@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Launch Faster with Ready-to-Use Digital Products';
    $subtitle = $settings['subtitle'] ?? 'Premium templates, scripts, and UI protocols built for high-performance creators and developers.';
    $ctaText1 = $settings['cta_text_1'] ?? 'Browse Products';
    $ctaLink1 = $settings['cta_link_1'] ?? '/products';
    $ctaText2 = $settings['cta_text_2'] ?? 'View Best Sellers';
    $ctaLink2 = $settings['cta_link_2'] ?? '/products?sort=sales';
@endphp

<section class="relative min-h-[90vh] flex items-center pt-20 pb-20 overflow-hidden bg-[#0B0F19]">
    {{-- Global Theme Styles Override for this theme --}}
    <style>
        :root {
            --brand-500: #7C3AED;
            --brand-600: #6D28D9;
            --brand-400: #A78BFA;
            --highlight: #22C55E;
            --bg-main: #0B0F19;
            --surface-primary: #111827;
            --surface-secondary: #1F2937;
        }
        .text-gradient-purple {
            background: linear-gradient(135deg, #fff 0%, #A78BFA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>

    {{-- Background Decorative Elements --}}
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-purple-600/10 blur-[120px] rounded-full opacity-50"></div>
        <div class="absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] bg-emerald-600/5 blur-[100px] rounded-full opacity-30"></div>
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-[0.03] mix-blend-overlay"></div>
    </div>

    <div class="container mx-auto px-6 relative z-10">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            {{-- Left Content --}}
            <div class="space-y-8" x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 100)">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/5 border border-white/10 rounded-full backdrop-blur-md"
                     x-show="loaded" x-transition:enter="transition ease-out duration-700 delay-100" x-transition:enter-start="opacity-0 -translate-y-4">
                    <div class="flex -space-x-2">
                        @for($i=1; $i<=3; $i++)
                            <img src="https://i.pravatar.cc/100?u=user{{ $i }}" class="w-5 h-5 rounded-full border border-[#0B0F19]">
                        @endfor
                    </div>
                    <span class="text-[10px] font-bold text-white/50 uppercase tracking-widest pl-1">Trusted by 25k+ Architects</span>
                    <div class="w-px h-3 bg-white/10 mx-2"></div>
                    <div class="flex items-center gap-1">
                        <i data-lucide="star" class="w-3 h-3 text-yellow-500 fill-yellow-500"></i>
                        <span class="text-[10px] font-black text-white">4.9/5</span>
                    </div>
                </div>

                <h1 class="text-4xl md:text-6xl lg:text-7xl font-display font-900 text-white leading-[1.05] tracking-tight"
                    x-show="loaded" x-transition:enter="transition ease-out duration-1000 delay-300" x-transition:enter-start="opacity-0 translate-y-8">
                    {!! str_replace(['Digital Products', 'Creators'], ['<span class="text-gradient-purple">Digital Products</span>', '<span class="text-brand-400">Creators</span>'], e($title)) !!}
                </h1>

                <p class="text-lg md:text-xl text-slate-400 font-medium leading-relaxed max-w-xl"
                   x-show="loaded" x-transition:enter="transition ease-out duration-1000 delay-500" x-transition:enter-start="opacity-0 translate-y-8">
                    {{ $subtitle }}
                </p>

                <div class="flex flex-wrap gap-4 pt-4"
                     x-show="loaded" x-transition:enter="transition ease-out duration-1000 delay-700" x-transition:enter-start="opacity-0 translate-y-8">
                    <a href="{{ $ctaLink1 }}" class="h-14 px-10 bg-brand-500 text-white rounded-2xl font-bold text-sm flex items-center justify-center shadow-2xl shadow-brand-500/20 hover:bg-brand-600 transition-all hover:-translate-y-1 active:scale-95">
                        {{ $ctaText1 }}
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i>
                    </a>
                    <a href="{{ $ctaLink2 }}" class="h-14 px-10 bg-white/5 border border-white/10 text-white rounded-2xl font-bold text-sm flex items-center justify-center backdrop-blur-md hover:bg-white/10 transition-all active:scale-95">
                        {{ $ctaText2 }}
                    </a>
                </div>
            </div>

            {{-- Right Visual --}}
            <div class="relative lg:block" x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 300)">
                <div class="relative z-10 transition-all duration-1000"
                     :class="loaded ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-12'">
                    <img src="{{ asset('saas_hero_visual_ecosystem_1775700511982.png') }}" 
                         alt="Marketplace Ecosystem"
                         class="w-full h-auto rounded-[2rem] shadow-[0_40px_100px_-20px_rgba(124,58,237,0.3)] border border-white/10 animate-float">
                    
                    {{-- Floating Badges --}}
                    <div class="absolute -top-10 -left-10 bg-white dark:bg-[#111827] p-4 rounded-2xl shadow-2xl border border-white/10 flex items-center gap-4 animate-float-slow">
                        <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                            <i data-lucide="check-circle" class="w-6 h-6 text-emerald-500"></i>
                        </div>
                        <div>
                            <div class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Status</div>
                            <div class="text-sm font-black text-white">Protocol Verified</div>
                        </div>
                    </div>

                    <div class="absolute -bottom-10 -right-10 bg-white dark:bg-[#111827] p-4 rounded-2xl shadow-2xl border border-white/10 flex items-center gap-4 animate-float-alt">
                        <div class="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center">
                            <i data-lucide="zap" class="w-6 h-6 text-purple-500"></i>
                        </div>
                        <div>
                            <div class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Speed</div>
                            <div class="text-sm font-black text-white">Instant Deployment</div>
                        </div>
                    </div>
                </div>

                {{-- Decorative Backglow --}}
                <div class="absolute inset-0 bg-brand-500/20 blur-[100px] rounded-full scale-75 opacity-50 z-0"></div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes float {
        0%, 100% { transform: translateY(0) scale(1.02); }
        50% { transform: translateY(-20px) scale(1.05); }
    }
    @keyframes float-slow {
        0%, 100% { transform: translateY(0) rotate(-2deg); }
        50% { transform: translateY(-15px) rotate(2deg); }
    }
    @keyframes float-alt {
        0%, 100% { transform: translateY(0) rotate(2deg); }
        50% { transform: translateY(15px) rotate(-2deg); }
    }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
    .animate-float-alt { animation: float-alt 7s ease-in-out infinite; }
</style>