@php
$title = $section->settings['title'] ?? 'Trusted by 10,000+ elite creators';
$logosInput = $section->settings['logos'] ?? '';

// Handle array or comma separated string
$logos = is_array($logosInput) ? $logosInput : array_filter(array_map('trim', explode(',', $logosInput)));

// Fallbacks if none provided
if (empty($logos)) {
    $logos = [
        'https://ui-avatars.com/api/?name=Stripe&background=f8f9fa&color=000&rounded=true',
        'https://ui-avatars.com/api/?name=GitHub&background=f8f9fa&color=000&rounded=true',
        'https://ui-avatars.com/api/?name=Vercel&background=f8f9fa&color=000&rounded=true',
        'https://ui-avatars.com/api/?name=AWS&background=f8f9fa&color=000&rounded=true',
        'https://ui-avatars.com/api/?name=Figma&background=f8f9fa&color=000&rounded=true',
    ];
}
@endphp

@php
    $pt = $section->settings['padding_top'] ?? '40px';
    $pb = $section->settings['padding_bottom'] ?? '40px';
    $bg = $section->settings['bg_color'] ?? 'transparent';

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

<section class="relative border-y border-border-subtle overflow-hidden"
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}">
    {{-- Refined Background Effect --}}
    <div class="absolute inset-0 bg-[radial-gradient(rgba(var(--text-dim-rgb),0.02)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none"></div>

    <div class="container mx-auto px-6 text-center relative z-10">
        <p class="text-[10px] font-700 uppercase tracking-widest text-text-dim/40 mb-8">
            {{ $title }}
        </p>

        <div class="flex flex-wrap justify-center items-center gap-10 md:gap-14 opacity-30 hover:opacity-60 transition-opacity duration-700">
            @foreach($logos as $logoUrl)
                <img src="{{ str_starts_with($logoUrl, 'http') ? $logoUrl : asset('storage/' . $logoUrl) }}" 
                     alt="Partner Logo" 
                     class="h-8 md:h-10 object-contain filter grayscale invert brightness-0 dark:invert-0 dark:brightness-100 transition-all duration-500 transform hover:scale-105 active:scale-95 shadow-sm">
            @endforeach
        </div>
    </div>
</sectio