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

$settings = $section->settings ?? [];
$paddingTop = $settings['padding_top'] ?? '32px';
$paddingBottom = $settings['padding_bottom'] ?? '32px';
$bgColor = $settings['bg_color'] ?? 'transparent';
$textColor = $settings['text_color'] ?? 'inherit';

// Advanced Title Logic: Combine lines if present, or fallback to standard title
$title = $settings['hero_title_line1'] ?? $settings['title'] ?? ($section->name ?? 'The Ultimate Creator Marketplace');
if (!empty($settings['hero_title_line2'])) $title .= "\n" . $settings['hero_title_line2'];
if (!empty($settings['hero_title_line3'])) $title .= "\n" . $settings['hero_title_line3'];

$subtitle = $settings['hero_subtitle'] ?? $settings['subtitle'] ?? 'Discover high-performance digital assets validated by experts.';
$ctaText1 = $settings['hero_btn1_text'] ?? $settings['cta_text_1'] ?? ($settings['cta_text'] ?? 'Explore Hub');
$ctaLink1 = $settings['hero_btn1_url'] ?? $settings['cta_link_1'] ?? ($settings['cta_link'] ?? '/products');
$badgeText = $settings['hero_badge_text'] ?? $settings['badge'] ?? $themeSettings->hero_badge ?? null;

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

// Handle padding classes vs manual values
$pt = $settings['padding_top'] ?? '10px';
$pb = $settings['padding_bottom'] ?? '0px';
$bg = $settings['bg_color'] ?? 'transparent';
$tx = $settings['text_color'] ?? 'inherit';

$ptStyle = "padding-top: $pt;";
$pbStyle = "padding-bottom: $pb;";
$bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
$txStyle = $tx !== 'inherit' ? "color: $tx;" : '';

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

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

    {{-- Refined Background Gradient --}}
    <div class="absolute top-0 left-1/4 -translate-x-1/2 w-[600px] h-[500px] bg-brand-500/[0.04] blur-[150px] rounded-full pointer-events-none"></div>

    <div class="container relative z-10 px-6 mx-auto pt-14 pb-12 md:pt-24 md:pb-20">
        <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
            
            {{-- Left Content: Heavy-Duty Typography --}}
            <div class="w-full lg:w-[58%] text-left">
                @if($badgeText)
                <div class="reveal-item anim-{{ $animType }} inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/20 mb-8"
                    :class="{ 'active': intersected }"
                    style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} - 0.2s);">
                    <span class="w-1.5 h-1.5 rounded-full bg-brand-500 animate-pulse"></span>
                    <span class="text-[10px] font-900 text-brand-500 uppercase tracking-widest">{{ $badgeText }}</span>
                </div>
                @endif

                <h1 class="reveal-item anim-{{ $animType }} text-4xl md:text-5xl lg:text-7xl font-display font-900 text-text-base leading-[1.05] tracking-tight mb-8"
                    :class="{ 'active': intersected }"
                    style="--anim-duration: {{ $animDuration }}; --anim-delay: {{ $animDelay }};">
                    {!! nl2br(e($title)) !!}
                </h1>

                <p class="reveal-item anim-{{ $animType }} text-base md:text-lg lg:text-2xl text-text-muted/80 max-w-2xl leading-relaxed font-500 mb-12"
                    :class="{ 'active': intersected }"
                    style="--anim-duration: {{ $animDuration }}; --anim-delay: calc({{ $animDelay }} + 0.15s);">
                    {{ $subtitle }}
                </p>

                {{-- Action Area: Original Elite Search Block --}}
                <div class="reveal-item anim-zoom-in w-full max-w-[580px] group mb-12" 
                    :class="{ 'active': intersected }"
                    style="--anim-duration: 0.5s; --anim-delay: 0.4s;">
                    @if(($settings['show_search'] ?? false) || ($homepage->hero_search_enabled ?? false))
                    <form action="{{ route('storefront.products') }}">
                        <div class="relative flex items-center bg-surface-primary/60 backdrop-blur-3xl border border-border-subtle rounded-2xl p-2 shadow-2xl transition-all duration-500 group-focus-within:border-brand-500/40 group-focus-within:shadow-[0_20px_50px_-20px_rgba(var(--primary-rgb),0.15)] group-focus-within:scale-[1.01]">
                            <div class="pl-5 pr-0 flex items-center shrink-0">
                                <i data-lucide="search" class="w-5 h-5 text-text-dim/40 group-focus-within:text-brand-500 transition-colors stroke-[2.5]"></i>
                            </div>
                            <input type="text" name="search" placeholder="{{ $settings['search_placeholder'] ?? 'Search premium assets...' }}"
                                class="flex-1 h-14 bg-transparent border-none focus:ring-0 text-text-base text-lg font-700 placeholder:text-text-dim/30 outline-none pl-4">
                            <button type="submit" class="h-12 px-10 bg-brand-500 hover:bg-brand-600 text-white rounded-xl text-[11px] font-900 shadow-lg shadow-brand-500/20 transition-all uppercase tracking-widest active:scale-95 whitespace-nowrap">
                                Browse
                            </button>
                        </div>
                    </form>
                    @else
                    <div class="flex flex-wrap gap-4">
                        <a href="{{ $ctaLink1 }}" class="h-14 px-10 bg-brand-500 text-white rounded-2xl font-900 text-[10px] uppercase tracking-[0.3em] flex items-center shadow-xl shadow-brand-500/20 hover:scale-105 active:scale-95 transition-all">
                            {{ $ctaText1 }}
                        </a>
                        @if($themeSettings->hero_secondary_button_text)
                        <a href="{{ $themeSettings->hero_secondary_button_link ?? '#' }}" class="h-14 px-10 bg-surface-primary/50 text-text-base border border-border-subtle rounded-2xl font-900 text-[10px] uppercase tracking-[0.3em] flex items-center hover:bg-surface-primary transition-all">
                            {{ $themeSettings->hero_secondary_button_text }}
                        </a>
                        @endif
                    </div>
                    @endif
                </div>
            </div>

            {{-- Right Column: Single Professional 3D Graphic --}}
            <div class="w-full lg:w-[42%] relative flex justify-center items-center">
                <!-- Glossy Composition (Safe but Professional) -->
                <div class="relative w-full max-w-[420px] animate-float">
                    <!-- Subtle Glows behind asset -->
                    <div class="absolute inset-0 z-0 bg-brand-500/10 blur-[80px] rounded-full scale-125"></div>
                    
                    {{-- Premium Asset Card (Professional "Google-Style" Banner Graphics) --}}
                    <div class="relative z-10 p-1 rounded-[40px] bg-gradient-to-br from-brand-500/30 via-purple-500/20 to-indigo-500/30 backdrop-blur-3xl border border-white/20 shadow-2xl shadow-brand-500/20 rotate-3">
                        <div class="bg-white/80 dark:bg-[#0d0d1a]/80 p-10 rounded-[38px] border border-white/40 dark:border-border-subtle relative overflow-hidden group/card">
                            <!-- High-End Color Blobs (SaaS Style) -->
                            <div class="absolute -top-20 -right-20 w-64 h-64 bg-indigo-500/15 blur-[80px] rounded-full pointer-events-none transition-transform group-hover/card:scale-110"></div>
                            <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-purple-500/15 blur-[80px] rounded-full pointer-events-none transition-transform group-hover/card:scale-110"></div>
                            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-brand-500/10 blur-[60px] rounded-full pointer-events-none"></div>

                            <!-- Background Pattern in card -->
                            <div class="absolute inset-0 opacity-[0.08] pointer-events-none" style="background-image: radial-gradient(var(--brand-primary) 1px, transparent 1px); background-size: 15px 15px;"></div>
                            
                            <div class="flex flex-col gap-10 relative z-10">
                                <div class="flex items-center justify-between">
                                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-500/20 to-indigo-500/10 flex items-center justify-center border border-brand-500/30 shadow-xl shadow-brand-500/10 group/icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#icon-gradient-v3)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-10 h-10 drop-shadow-[0_4px_12px_rgba(var(--primary-rgb),0.5)] group-hover/icon:scale-110 transition-transform">
                                            <defs>
                                                <linearGradient id="icon-gradient-v3" x1="0%" y1="0%" x2="100%" y2="100%">
                                                    <stop offset="0%" style="stop-color:var(--brand-primary);stop-opacity:1" />
                                                    <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
                                                </linearGradient>
                                            </defs>
                                            <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>
                                        </svg>
                                    </div>
                                    <div class="flex items-center gap-1.5 px-3 py-1 bg-gradient-to-r from-brand-500/10 to-indigo-500/10 rounded-full border border-brand-500/20">
                                        <span class="w-1.5 h-1.5 rounded-full bg-brand-500 shadow-[0_0_8px_rgba(var(--primary-rgb),0.5)]"></span>
                                        <span class="text-[9px] font-black text-brand-500 uppercase tracking-widest">Verified Platform</span>
                                    </div>
                                </div>
                                
                                <div class="space-y-4">
                                    <h3 class="text-2xl lg:text-3xl font-black text-text-base leading-tight tracking-tight">Access the Elite Digital Hub<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 to-indigo-500">.</span></h3>
                                    <p class="text-[12px] text-text-muted font-bold leading-relaxed px-3 py-1 bg-surface-secondary/30 rounded-lg inline-block">Secure. Transparent. Scalable.</p>
                                </div>
                                
                                <div class="flex items-center justify-between pt-4 border-t border-border-subtle">
                                    <div class="flex items-center gap-3">
                                        <div class="flex -space-x-3">
                                            @for($i=0;$i<3;$i++)
                                            <div class="w-8 h-8 rounded-full border-2 border-white dark:border-surface-primary bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center text-[8px] font-black shadow-sm">AI</div>
                                            @endfor
                                        </div>
                                        <span class="text-[10px] font-bold text-text-dim uppercase tracking-wider">Top Authors</span>
                                    </div>
                                    <div class="text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-text-base to-indigo-600">$9,480.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Secondary Floating Info --}}
                    <div class="absolute -top-10 -right-4 md:-right-10 w-[180px] p-5 rounded-3xl bg-surface-primary/80 dark:bg-[#0d0d1a]/90 backdrop-blur-3xl shadow-2xl border border-border-subtle animate-pulse-slow">
                        <div class="flex items-center gap-3 mb-2">
                             <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                             <span class="text-[9px] font-black uppercase tracking-widest text-emerald-500">Real-time Sales</span>
                        </div>
                        <div class="text-xl font-black text-text-base">+ $1,248</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Centered Global Stats Row --}}
        @if(($settings['show_stats'] ?? false) && isset($settings['metrics']))
        <div class="reveal-item anim-fade-in flex flex-wrap items-center justify-center gap-x-8 md:gap-x-16 gap-y-6 opacity-60 hover:opacity-100 transition-opacity w-full mt-2 md:mt-4 pt-0"
            :class="{ 'active': intersected }" style="--anim-duration: 0.8s; --anim-delay: 0.75s;">
            @foreach ($settings['metrics'] ?? [] as $metric)
            <div class="flex flex-col md:flex-row items-center md:items-baseline gap-2 md:gap-4 text-center md:text-left">
                <span class="text-2xl md:text-3xl font-900 text-text-base tracking-tighter">{{ $metric['value'] ?? $metric['val'] ?? '' }}</span>
                <span class="text-[10px] font-700 text-text-dim uppercase tracking-[0.2em]">{{ $metric['label'] ?? '' }}</span>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>