@php
$title = $section->settings['title'] ?? 'Creator Spotlight';
$mode = $section->settings['mode'] ?? 'dynamic';
$manualKeys = $section->settings['manual_keys'] ?? ''; // store_name or identifier

$vendors = collect();

if ($mode === 'manual' && filled($manualKeys)) {
    $keys = array_map('trim', explode(',', $manualKeys));
    $vendors = \App\Modules\Vendor\Models\VendorProfile::with(['user.products' => fn($q) => $q->published()->visible()])
        ->whereIn('store_slug', $keys)
        ->orWhereIn('store_name', $keys)
        ->where('is_approved', true)
        ->take(3)
        ->get();
} else {
    // Dynamic fallback based on sales/rating
    $vendors = \App\Modules\Vendor\Models\VendorProfile::with(['user.products' => fn($q) => $q->published()->visible()])
        ->where('is_approved', true)
        ->withSum(['user.products as total_sales' => fn($q) => $q->published()->visible()], 'sales_count')
        ->orderByDesc('total_sales')
        ->take(3)
        ->get();
}
@endphp

<section class="py-14 md:py-18 bg-bg-main relative border-b border-border-subtle overflow-hidden">
    {{-- Refined Background Effect --}}
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

    <div class="container mx-auto px-6 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <div class="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full bg-emerald-500/5 border border-emerald-500/10 text-emerald-500/80 text-[10px] font-700 tracking-widest uppercase mb-6 shadow-sm">
                <i data-lucide="award" class="w-3.5 h-3.5 stroke-[2.5]"></i>
                Elite Engineering Authors
            </div>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-display font-800 text-text-base tracking-tight mb-4">{{ $title }}</h2>
            <p class="text-base md:text-lg text-text-muted/80 font-500 max-w-2xl mx-auto leading-relaxed">{{ $subtitle ?? 'Discover the talent powering advanced digital systems.' }}</p>
        </div>

        @if($vendors->isNotEmpty())
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($vendors as $vendor)
                <div class="bg-surface-secondary/40 backdrop-blur-xl border border-border-subtle rounded-2xl p-8 flex flex-col items-center text-center shadow-lg hover:bg-surface-primary hover:border-brand-500/30 transition-all duration-500 md:hover:-translate-y-1 group active:scale-[0.98]">
                    
                    {{-- Avatar & Badge --}}
                    <div class="relative mb-6">
                        <div class="w-20 h-20 rounded-xl overflow-hidden border border-border-subtle shadow-md group-hover:scale-105 transition-transform duration-700 bg-surface-primary p-0.5">
                            <img src="{{ $vendor->logo ? asset('storage/' . $vendor->logo) : 'https://ui-avatars.com/api/?name=' . urlencode($vendor->store_name) . '&background=0a0b1e&color=fff' }}" 
                                 alt="{{ $vendor->store_name }}" 
                                 class="w-full h-full rounded-[0.5rem] object-cover">
                        </div>
                        <div class="absolute -bottom-1.5 -right-1.5 w-7 h-7 rounded-lg bg-emerald-500 border-2 border-bg-main flex items-center justify-center text-white shadow-lg" title="Verified Creator">
                            <i data-lucide="check" class="w-4 h-4 stroke-[4]"></i>
                        </div>
                    </div>

                    {{-- Info --}}
                    <h3 class="text-xl font-800 text-text-base tracking-tight mb-3 group-hover:text-brand-500 transition-colors">{{ $vendor->store_name }}</h3>
                    <p class="text-text-muted/60 text-[13px] font-500 mb-6 leading-relaxed line-clamp-2">
                        {{ $vendor->description ?? 'Premium digital assets and elite architecture.' }}
                    </p>

                    {{-- Stats --}}
                    <div class="flex items-center gap-8 w-full pt-8 border-t border-border-subtle justify-between px-2 mb-10 mt-auto">
                        <div class="flex flex-col items-center group/stat">
                            <span class="text-text-base font-800 text-2xl group-hover/stat:text-brand-500 transition-colors">{{ $vendor->products->count() }}</span>
                            <span class="text-[9px] uppercase tracking-[0.2em] text-text-dim/40 font-700 mt-1">Assets</span>
                        </div>
                        <div class="w-px h-10 bg-border-subtle"></div>
                        <div class="flex flex-col items-center group/stat">
                            <span class="text-text-base font-800 text-2xl group-hover/stat:text-brand-500 transition-colors">{{ number_format($vendor->total_sales ?? 0) }}</span>
                            <span class="text-[9px] uppercase tracking-[0.2em] text-text-dim/40 font-700 mt-1">Sales</span>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <a href="{{ route('storefront.vendor.show', $vendor->store_slug) }}" class="w-full h-14 bg-surface-primary/80 hover:bg-brand-500 text-text-dim hover:text-white rounded-xl flex items-center justify-center text-[11px] font-800 tracking-widest transition-all duration-500 gap-3 border border-border-subtle hover:border-brand-500/50 shadow-sm active:scale-95 uppercase">
                        View Complete Catalog
                        <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1"></i>
                    </a>
                </div>
            @endforeach
        </div>
        @else
        <div class="p-20 text-center border-2 border-dashed border-border-subtle rounded-2xl bg-surface-secondary/30 backdrop-blur-md">
            <h3 class="text-text-dim uppercase font-900 tracking-[0.4em] text-sm">No Elite Engineering Authors Discovered</h3>
        </div>
        @endif
    </div>
</sectio