@php
$title = $section->settings['title'] ?? 'Global Network';
$imagesInput = $section->settings['images'] ?? '';

$images = is_string($imagesInput) ? json_decode($imagesInput, true) : $imagesInput;

if (empty($images) || !is_array($images)) {
    // Generate realistic placeholders
    $images = [];
    for($i=1; $i<=8; $i++) {
        $images[] = 'https://images.unsplash.com/photo-' . (1500000000000 + $i*1000) . '?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=600&q=80';
    }
} else {
    // Limit to 8 images for grid
    $images = array_slice($images, 0, 8);
}
@endphp

<section class="border-t border-border-subtle bg-bg-main relative overflow-hidden flex flex-col md:flex-row min-h-[600px]">
    {{-- Text Block --}}
    <div class="w-full md:w-1/3 p-12 md:p-20 flex flex-col justify-center items-center md:items-start text-center md:text-left relative z-20 bg-surface-secondary/60 border-r border-border-subtle backdrop-blur-2xl shadow-2xl">
        <div class="w-18 h-18 bg-brand-500 rounded-[1.5rem] flex items-center justify-center text-white mb-10 shadow-2xl shadow-brand-500/30 group hover:scale-110 transition-transform duration-500">
            <i data-lucide="globe" class="w-9 h-9 stroke-[2.5]"></i>
        </div>
        <h2 class="text-4xl md:text-6xl font-display font-900 text-text-base uppercase tracking-tight mb-6 leading-tight">{{ $title }}</h2>
        <p class="text-text-muted font-600 leading-relaxed mb-12 max-w-sm uppercase tracking-widest text-[13px]">
            Join the collective intelligence. Connect with over 150,000 elite developers and engineers building the future of the web.
        </p>
        <a href="#" class="inline-flex items-center gap-4 h-14 px-10 bg-surface-primary hover:bg-brand-500 border border-border-subtle hover:border-brand-500 text-text-base hover:text-white rounded-2xl font-900 text-[11px] uppercase tracking-[0.2em] transition-all duration-500 shadow-xl active:scale-95 shadow-brand-500/5 group/btn">
            Join Fellowship
            <i data-lucide="arrow-right" class="w-4 h-4 transition-transform group-hover/btn:translate-x-1"></i>
        </a>
    </div>

    {{-- Masonry / Grid Block --}}
    <div class="w-full md:w-2/3 grid grid-cols-2 lg:grid-cols-4 gap-2 p-2 bg-surface-primary relative z-10 shadow-inner">
        @foreach($images as $img)
            <a href="#" class="relative aspect-square overflow-hidden group block bg-surface-secondary rounded-2xl border border-border-subtle hover:border-brand-500/40 transition-all duration-700">
                <img src="{{ str_starts_with($img, 'http') ? $img : asset('storage/' . $img) }}" alt="Community" class="w-full h-full object-cover transition-all duration-1000 group-hover:scale-110 opacity-70 group-hover:opacity-100 filter grayscale group-hover:grayscale-0">
                <div class="absolute inset-0 bg-brand-500/20 opacity-0 group-hover:opacity-100 transition-all duration-700 pointer-events-none flex items-center justify-center backdrop-blur-[2px]">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30 transform scale-50 group-hover:scale-100 transition-all duration-700 shadow-2xl">
                        <i data-lucide="instagram" class="w-6 h-6 text-white drop-shadow-2xl"></i>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    {{-- Decorative Glow --}}
    <div class="absolute top-0 right-0 w-[600px] h-full bg-brand-500/5 blur-[140px] rounded-full pointer-events-none opacity-50"></div>
</sectio