@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Find the Future of Digital Assets';
    $subtitle = $settings['subtitle'] ?? 'Access over 50,000+ premium scripts, themes, and graphics validated by experts.';
    $badge = $settings['badge'] ?? '✦ TRUSTED BY 10K+ ELITE CREATORS';
    $placeholder = $settings['search_placeholder'] ?? 'Search for anything (e.g. Laravel, React, Dashboard)...';
    $bgImage = $settings['bg_image'] ?? null;
    $defaultBg = asset('assets/images/hero/saas_2030_hero.png');
    
    // Layout
    $paddingTop = $settings['padding_top'] ?? '120px';
    $paddingBottom = $settings['padding_bottom'] ?? '120px';
    
    // Animation
    $animType = $settings['anim_type'] ?? 'fade-in-up';
@endphp

<section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-[#05050f]" 
    id="section-{{ $section->id }}" 
    style="padding-top: {{ $paddingTop }}; padding-bottom: {{ $paddingBottom }};"
    x-data="{ intersected: false }" x-intersect.once="intersected = true">
    
    {{-- High-End Background --}}
    <div class="absolute inset-0 z-0">
        @if($bgImage)
            <img src="{{ $bgImage }}" class="w-full h-full object-cover opacity-30 mix-blend-overlay" alt="Background">
        @endif
        {{-- Deep Gradient Mask --}}
        <div class="absolute inset-0 bg-gradient-to-b from-[#05050f] via-[#05051a]/40 to-[#05050f]"></div>
        
        {{-- Animated Ambient Glows (SaaS 2030 Style) --}}
        <div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-brand-500/10 blur-[180px] rounded-full animate-float opacity-60"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-purple-600/10 blur-[180px] rounded-full animate-float opacity-60" style="animation-delay: -3s;"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40%] h-[40%] bg-indigo-500/5 blur-[150px] rounded-full animate-pulse-slow"></div>

        {{-- Digital Grid Pattern --}}
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(var(--brand-primary) 1px, transparent 1px); background-size: 40px 40px;"></div>
        
        {{-- Bottom Design Break --}}
        <div class="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#05050f] to-transparent pointer-events-none"></div>


    </div>

    <div class="container relative z-10 px-6 mx-auto text-center pt-10 sm:pt-12">
        <div class="max-w-4xl mx-auto flex flex-col items-center">
            {{-- Badge --}}
            @if($badge)
            <div class="reveal-item anim-{{ $animType }} inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 backdrop-blur-xl border border-white/10 mb-10"
                :class="{ 'active': intersected }" style="--anim-delay: 0.1s;">
                <span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></span>
                <span class="text-[10px] font-black text-white/80 uppercase tracking-[0.2em]">{{ $badge }}</span>
            </div>
            @endif

            {{-- Headline --}}
            <div class="reveal-item anim-{{ $animType }} mb-8" :class="{ 'active': intersected }" style="--anim-delay: 0.2s;">
                <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-display font-900 text-white leading-[1.1] tracking-tight">
                    {!! nl2br(str_replace('\n', "\n", e($title))) !!}
                </h1>
            </div>

            {{-- Subtitle --}}
            <div class="reveal-item anim-{{ $animType }} mb-12" :class="{ 'active': intersected }" style="--anim-delay: 0.3s;">
                <p class="text-xs sm:text-sm md:text-base text-white/50 max-w-xl mx-auto leading-relaxed font-500">
                    {{ $subtitle }}
                </p>
            </div>

            {{-- Professional Search Bar (Refined SaaS 2030 Version) --}}
            <div class="reveal-item anim-zoom-in group max-w-4xl mx-auto relative z-20 w-full"
                :class="{ 'active': intersected }" style="--anim-delay: 0.4s;">
                <form action="{{ route('storefront.products') }}" class="relative p-1">
                    {{-- Outer Neon Glow --}}
                    <div class="absolute -inset-1 bg-gradient-to-r from-brand-500/40 via-indigo-500/40 to-purple-600/40 rounded-[2rem] blur-lg opacity-0 group-focus-within:opacity-100 transition duration-1000"></div>
                    
                    {{-- Glass Search Container --}}
                    <div class="relative flex items-center bg-white/[0.02] backdrop-blur-3xl border border-white/10 rounded-2xl sm:rounded-[1.75rem] p-1.5 sm:p-2 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.5)] transition-all duration-700 group-focus-within:border-brand-500/30 group-focus-within:bg-white/[0.04]">
                        <div class="pl-4 sm:pl-8 pr-0 flex items-center shrink-0">
                            <i data-lucide="search" class="w-5 h-5 sm:w-6 sm:h-6 text-white/20 group-focus-within:text-brand-500 transition-all duration-500 stroke-[2.5]"></i>
                        </div>
                        <input type="text" name="search" :placeholder="window.innerWidth < 640 ? 'Search products...' : '{{ $placeholder }}'"
                            class="flex-1 h-12 sm:h-16 bg-transparent border-none focus:ring-0 text-white text-xs sm:text-lg font-700 placeholder:text-white/15 outline-none pl-2 sm:pl-4 min-w-0 pr-16 sm:pr-4">
                        
                        {{-- Vibrant Neon Button --}}
                        <button type="submit" class="absolute sm:relative right-2 sm:right-0 h-10 sm:h-16 px-4 sm:px-10 overflow-hidden group/btn rounded-xl sm:rounded-[1.25rem] transition-all duration-500 active:scale-95 shadow-xl shadow-brand-500/10 cursor-pointer flex items-center justify-center shrink-0">
                            <div class="absolute inset-0 bg-gradient-to-br from-brand-500 via-indigo-600 to-purple-600 transition-all duration-500 group-hover/btn:scale-110"></div>
                            <div class="relative flex items-center justify-center gap-2">
                                <span class="hidden sm:inline text-[11px] font-black uppercase tracking-[0.2em] text-white">Find Assets</span>
                                <i data-lucide="arrow-right" class="w-4 h-4 text-white group-hover/btn:translate-x-1 transition-transform"></i>
                            </div>
                        </button>
                    </div>
                    
                    {{-- Trending Tags --}}
                    @php $tags = $settings['trending_tags'] ?? ['Laravel', 'React', 'SaaS Bundle', 'Admin UI']; @endphp
                    <div class="mt-8 flex flex-wrap items-center justify-center gap-4">
                        <span class="text-[9px] font-900 text-white/15 uppercase tracking-[0.3em]">Quick Search:</span>
                        @foreach($tags as $tag)
                        <a href="{{ route('storefront.products', ['search' => $tag]) }}" 
                           class="px-4 py-1.5 bg-white/[0.01] hover:bg-white/[0.05] border border-white/5 rounded-xl text-[9px] font-black text-white/30 hover:text-brand-400 transition-all duration-500">
                           #{{ $tag }}
                        </a>
                        @endforeach
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<style>
    .animate-pulse-slow {
        animation: pulse-slow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.1); }
    }
</style>