@php
$title = $section->settings['title'] ?? 'Start Selling Your Digital Assets';
$subtitle = $section->settings['subtitle'] ?? 'Join the marketplace and share your creations with our growing community. Keep 90% of your earnings.';
$buttonText = $section->settings['button_text'] ?? 'Become a Vendor';
@endphp

<section class="py-14 md:py-18 bg-bg-main relative border-t border-border-subtle overflow-hidden" id="section-{{ $section->id }}">
    <div class="container mx-auto px-6">
        <div class="relative rounded-[3rem] overflow-hidden bg-surface-secondary/40 backdrop-blur-3xl border border-border-subtle p-10 md:p-14 flex flex-col items-center text-center shadow-xl group">
            
            {{-- Refined Background Effect --}}
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(var(--primary-rgb),0.05)_0%,transparent_70%)] pointer-events-none z-0"></div>
            <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-brand-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

            <div class="relative z-10 max-w-4xl mx-auto w-full">
                <div class="w-16 h-16 mx-auto bg-surface-primary border border-border-subtle rounded-2xl flex items-center justify-center text-brand-500/60 mb-8 shadow-inner group-hover:scale-110 group-hover:text-brand-500 transition-all duration-700">
                    <i data-lucide="rocket" class="w-8 h-8 stroke-[2.5]"></i>
                </div>
                
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base mb-6 tracking-tight leading-tight max-w-3xl mx-auto">
                    {{ $title }}
                </h2>
                
                <p class="text-base md:text-lg text-text-muted/80 font-500 mb-10 max-w-2xl mx-auto leading-relaxed">
                    {{ $subtitle }}
                </p>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="{{ route('register') }}" class="w-full sm:w-auto h-14 px-10 bg-brand-600 dark:bg-brand-500 hover:bg-brand-700 dark:hover:bg-brand-600 text-white rounded-xl font-800 text-[11px] uppercase tracking-widest transition-all duration-500 shadow-lg shadow-brand-500/20 active:scale-95 flex items-center justify-center">
                        {{ $buttonText }}
                        <i data-lucide="zap" class="w-4 h-4 ml-2.5 stroke-[2.5]"></i>
                    </a>
                    
                    <a href="{{ route('pages.show', 'sell-with-us') }}" class="w-full sm:w-auto h-14 px-10 bg-surface-primary hover:bg-surface-secondary border border-border-subtle text-text-base rounded-xl font-800 text-[11px] uppercase tracking-widest transition-all duration-500 flex items-center justify-center shadow-sm group/btn active:scale-95">
                        Learn More
                        <i data-lucide="arrow-right" class="w-4 h-4 ml-2.5 transition-transform group-hover/btn:translate-x-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</sectio