@php
$pt = $section->settings['padding_top'] ?? 'section-nm';
$pb = $section->settings['padding_bottom'] ?? 'section-nm';
$title = $section->settings['title'] ?? 'Top Rated Engineering Authors';
$limit = $section->settings['limit'] ?? 6;

$vendors = \App\Modules\Vendor\Models\VendorProfile::with('user')
->where('is_approved', true)
->take($limit)
->get();
@endphp

<section class="py-24 bg-bg-main border-y border-border-subtle relative overflow-hidden">
    {{-- Decorative Background Effect --}}
    <div class="absolute left-0 top-0 w-[500px] h-[500px] bg-brand-500/5 blur-[120px] rounded-full pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-20">
            <h2 class="text-4xl md:text-6xl font-display font-900 text-text-base mb-6 tracking-tight uppercase">
                {{ $title }}
            </h2>
            <p class="text-lg md:text-xl text-text-muted max-w-2xl mx-auto font-600 uppercase tracking-widest">
                Discover the elite performing creators and engineering studios in our ecosystem.
            </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
            @forelse ($vendors as $vendor)
            <div
                class="group relative bg-surface-secondary/50 backdrop-blur-xl border border-border-subtle rounded-[2.5rem] p-10 hover:border-brand-500/40 transition-all duration-700 hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.15)] active:scale-[0.98] shadow-xl">
                <div class="flex items-center gap-8">
                    <div
                        class="relative w-24 h-24 rounded-3xl overflow-hidden bg-surface-primary border-2 border-border-subtle flex-shrink-0 group-hover:scale-105 transition-transform duration-700 p-1 shadow-inner">
                        <img src="{{ $vendor->logo_url ?? 'https://ui-avatars.com/api/?name=' . urlencode($vendor->store_name) . '&background=6366f1&color=fff' }}"
                            alt="{{ $vendor->store_name }}" class="w-full h-full rounded-[1.2rem] object-cover">
                    </div>
                    <div class="flex-1">
                        <h3 class="text-2xl font-800 text-text-base mb-2 group-hover:text-brand-500 transition-colors uppercase tracking-tight">
                            {{ $vendor->store_name }}
                        </h3>
                        <div class="flex items-center gap-3 mb-4">
                            <div class="flex text-brand-500">
                                @for($i=0; $i<5; $i++)
                                    <i data-lucide="star" class="w-3.5 h-3.5 fill-current shadow-[0_0_10px_rgba(var(--primary-rgb),0.3)]"></i>
                                @endfor
                            </div>
                            <span class="text-[10px] font-900 text-text-dim/50 uppercase tracking-[0.2em]">Top
                                Seller</span>
                        </div>
                    </div>
                </div>

                <p class="text-[14px] text-text-muted line-clamp-2 mb-8 mt-10 font-600 uppercase tracking-wide leading-relaxed">
                    {{ $vendor->bio ?? $vendor->description ?? 'Premium digital asset author and elite software architect.' }}
                </p>

                <div class="pt-8 border-t border-border-subtle flex items-center justify-between">
                    <div class="flex gap-6">
                        <div class="text-center group/stat">
                            <div class="text-xl font-900 text-text-base group-hover/stat:text-brand-500 transition-colors">2.5k</div>
                            <div class="text-[9px] uppercase font-900 text-text-dim/40 tracking-widest mt-1">Sales</div>
                        </div>
                        <div class="w-px h-10 bg-border-subtle"></div>
                        <div class="text-center group/stat">
                            <div class="text-xl font-900 text-text-base group-hover/stat:text-brand-500 transition-colors">48</div>
                            <div class="text-[9px] uppercase font-900 text-text-dim/40 tracking-widest mt-1">Items</div>
                        </div>
                    </div>
                    <div class="flex-1 pl-10">
                        <a href="{{ route('storefront.vendor.show', $vendor->store_slug) }}"
                            class="w-full h-12 bg-surface-primary hover:bg-brand-500 text-text-dim hover:text-white text-[10px] font-900 uppercase tracking-widest rounded-xl transition-all duration-700 flex items-center justify-center border border-border-subtle hover:border-brand-500/50 shadow-inner group-hover:shadow-brand-500/20 active:scale-95">
                            Catalog
                            <i data-lucide="arrow-right" class="w-3 h-3 ml-2 transition-transform group-hover:translate-x-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full py-20 text-center border-2 border-dashed border-border-subtle rounded-[3rem] bg-surface-secondary/20">
                <p class="text-text-dim font-900 uppercase tracking-[0.3em] text-sm">No engineering authors discovered yet.</p>
            </div>
            @endforelse
        </div>
    </div>
</sectio