@php
if (!isset($homepage)) $homepage = (object) [];
if (!isset($themeSettings)) $themeSettings = (object) [];

$settings = $section->settings ?? [];
$paddingTop = $settings['padding_top'] ?? '64px';
$paddingBottom = $settings['padding_bottom'] ?? '64px';

// Fallbacks for legacy keys
$title = $settings['title'] ?? ($section->name ?? 'Next-Gen Digital Assets');
$subtitle = $settings['subtitle'] ?? 'Premium scripts, themes and plugins for modern creators.';
$ctaText1 = $settings['cta_text_1'] ?? ($settings['cta_text'] ?? 'Browse Catalog');
$ctaLink1 = $settings['cta_link_1'] ?? ($settings['cta_link'] ?? '/products');

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

$pt = $settings['padding_top'] ?? '40px';
$pb = $settings['padding_bottom'] ?? '40px';

$ptStyle = "padding-top: $pt;";
$pbStyle = "padding-bottom: $pb;";

$titleAlignment = $settings['title_alignment'] ?? 'center';
@endphp

<section class="relative z-0 overflow-hidden mb-0! flex flex-col bg-[#050816]"
    style="{{ $ptStyle }} {{ $pbStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: true }">

    {{-- Cinematic Background Elements --}}
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-brand-500/10 blur-[150px] rounded-full"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-brand-600/10 blur-[150px] rounded-full"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[1px] bg-gradient-to-r from-transparent via-brand-500/20 to-transparent opacity-50"></div>
    </div>

    <div class="container relative z-10 px-6 mx-auto pt-16 pb-20 md:pt-32 md:pb-40">
        <div class="flex flex-col items-center text-center max-w-5xl mx-auto">
            
            {{-- Elite Badge --}}
            <div class="reveal-item anim-{{ $animType }} inline-flex items-center gap-3 px-4 py-2 rounded-2xl bg-white/05 backdrop-blur-3xl border border-white/10 mb-10 shadow-2xl"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: 0s;">
                <span class="w-2 h-2 rounded-full bg-brand-500 shadow-[0_0_12px_rgba(var(--primary-rgb),1)] animate-pulse"></span>
                <span class="text-[11px] font-black text-white uppercase tracking-[0.3em]">{{ $settings['badge'] ?? 'Cinema Glass Elite' }}</span>
            </div>

            <h1 class="reveal-item anim-{{ $animType }} text-4xl md:text-7xl lg:text-9xl font-display font-black text-white leading-[0.95] tracking-tighter mb-10"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                <span class="relative">
                    {!! nl2br(e($title)) !!}
                    <span class="absolute -bottom-4 left-0 w-full h-2 bg-brand-500/20 blur-xl"></span>
                </span>
            </h1>

            <p class="reveal-item anim-{{ $animType }} text-lg md:text-xl lg:text-3xl text-white/60 max-w-3xl leading-relaxed font-medium mb-16 px-4"
                :class="{ 'active': intersected }"
                style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.2s);">
                {{ $subtitle }}
            </p>

            {{-- Action Area: Search & Buttons --}}
            <div class="reveal-item anim-zoom-in w-full max-w-[700px] flex flex-col items-center gap-6" 
                :class="{ 'active': intersected }"
                style="--anim-duration: 0.6s; --anim-delay: 0.4s;">
                
                @if(($settings['show_search'] ?? true))
                <form action="{{ route('storefront.products') }}" class="w-full">
                    <div class="group relative flex flex-col md:flex-row items-stretch md:items-center bg-white/[0.03] backdrop-blur-4xl border border-white/10 rounded-3xl md:rounded-[2.5rem] p-2 md:p-3 shadow-[0_40px_100px_rgba(0,0,0,0.6)] transition-all duration-700 hover:border-brand-500/40 hover:bg-white/[0.06] focus-within:border-brand-500/60 focus-within:ring-4 ring-brand-500/10">
                        <div class="flex items-center flex-1 px-4 md:px-0">
                            <div class="md:pl-6 flex items-center shrink-0">
                                <i data-lucide="search" class="w-5 h-5 md:w-6 md:h-6 text-white/30 group-focus-within:text-brand-500 transition-colors stroke-[2.5]"></i>
                            </div>
                            <input type="text" name="search" placeholder="{{ $settings['search_placeholder'] ?? 'Search assets...' }}"
                                class="flex-1 h-12 md:h-14 bg-transparent border-none focus:ring-0 text-white text-lg md:text-xl font-bold placeholder:text-white/20 outline-none pl-3 md:pl-5">
                        </div>
                        <button type="submit" class="mt-2 md:mt-0 h-12 md:h-14 px-8 md:px-12 bg-brand-500 hover:bg-brand-400 text-white rounded-2xl md:rounded-[1.8rem] text-[12px] md:text-[13px] font-black shadow-[0_15px_30px_rgba(var(--primary-rgb),0.3)] transition-all uppercase tracking-widest active:scale-95 whitespace-nowrap">
                            Explore
                        </button>
                    </div>
                </form>
                @else
                <div class="flex flex-wrap items-center justify-center gap-4 md:gap-6 w-full px-4">
                    <a href="{{ $ctaLink1 }}" class="w-full md:w-auto h-14 md:h-16 px-10 md:px-14 bg-brand-500 text-white rounded-2xl md:rounded-[2rem] font-black text-[11px] md:text-[12px] uppercase tracking-[0.3em] flex items-center justify-center shadow-2xl shadow-brand-500/30 hover:scale-105 hover:bg-brand-400 active:scale-95 transition-all">
                        {{ $ctaText1 }}
                    </a>
                    @if($themeSettings->hero_secondary_button_text)
                    <a href="{{ $themeSettings->hero_secondary_button_link ?? '#' }}" class="w-full md:w-auto h-14 md:h-16 px-10 md:px-14 bg-white/05 text-white border border-white/10 rounded-2xl md:rounded-[2rem] font-black text-[11px] md:text-[12px] uppercase tracking-[0.3em] flex items-center justify-center hover:bg-white/10 transition-all backdrop-blur-3xl">
                        {{ $themeSettings->hero_secondary_button_text }}
                    </a>
                    @endif
                </div>
                @endif
            </div>

            {{-- Floating Decorative Elements --}}
            @if(($settings['show_stats'] ?? true))
            <div class="reveal-item anim-fade-in mt-16 md:mt-20 flex flex-wrap items-center justify-center gap-x-8 md:gap-x-24 gap-y-6"
                :class="{ 'active': intersected }" style="--anim-duration: 1s; --anim-delay: 0.8s;">
                @foreach (['Validated Assets' => '24.5k', 'Global Creators' => '1.2k', 'Total Transactions' => '8.9M'] as $label => $val)
                <div class="flex flex-col items-center">
                    <span class="text-2xl md:text-4xl font-black text-white tracking-tighter shadow-brand-500/10">{{ $val }}</span>
                    <span class="text-[9px] md:text-[10px] font-black text-white/30 uppercase tracking-[0.2em] md:tracking-[0.3em] mt-1 md:mt-2">{{ $label }}</span>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</section>