@extends('layouts.public')

@section('content')

    <!-- Header Section -->
    <div class="mb-8">
        <h2 class="text-4xl font-bold text-gray-900 mb-2">Our Networks</h2>
        <p class="text-lg text-gray-600">Explore the powerful communities connecting professionals worldwide.</p>
    </div>

    <div class="bg-transparent min-h-screen pb-12">
        <div class="max-w-7xl mx-auto space-y-12">
            
            @forelse($networks as $network)
                <!-- Network Wrap -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                    
                    <!-- Network Header -->
                    <!-- Network Header -->
                    <div class="bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 px-8 py-8 flex flex-col sm:flex-row justify-between items-center relative overflow-hidden">
                        <!-- Background Pattern -->
                        <div class="absolute inset-0 opacity-10 pointer-events-none">
                            <svg class="h-full w-full" fill="none" viewBox="0 0 100 100" preserveAspectRatio="none">
                                <path d="M0 100 C 20 0 50 0 100 100 Z" fill="white"/>
                            </svg>
                        </div>
                        
                        <div class="relative z-10 text-center sm:text-left">
                            <h3 class="text-3xl font-extrabold text-white tracking-tight">{{ $network->name }}</h3>
                            @if($network->chamber_name)
                                <p class="text-blue-100 mt-1 font-medium">{{ $network->chamber_name }}</p>
                            @endif
                        </div>
                        <div class="mt-6 sm:mt-0 relative z-10">
                            <a href="{{ route('chapters.index', ['network' => $network->id]) }}" class="inline-flex items-center px-6 py-3 bg-white/10 hover:bg-white/20 text-white border border-white/30 rounded-full font-bold text-sm transition-all shadow-lg backdrop-blur-sm">
                                View All {{ $network->name }} Modules
                                <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                            </a>
                        </div>
                    </div>

                    <!-- Network Chapters Snippet View -->
                    <div class="p-8 bg-gray-50/50">
                        <div class="flex items-center justify-between mb-8">
                            <h4 class="text-xs font-black text-gray-400 uppercase tracking-[0.2em]">Latest Additions</h4>
                            <div class="h-px flex-1 bg-gray-200 ml-4"></div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                            @forelse($network->chapters->take(4) as $chapter)
                                <a href="{{ route('chapters.show', $chapter->id) }}" class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-2">
                                    
                                    <div class="h-32 w-full bg-gray-100 overflow-hidden relative">
                                        @if($chapter->hero_path)
                                            <img src="{{ asset('storage/' . $chapter->hero_path) }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="{{ $chapter->name }} Hero">
                                        @else
                                            <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                                                <span class="text-gray-300 font-black text-2xl tracking-tighter opacity-50 uppercase">{{ substr($chapter->name, 0, 3) }}</span>
                                            </div>
                                        @endif
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
                                    </div>

                                    <div class="p-6 flex-grow relative -mt-8">
                                        <!-- Logo -->
                                        <div class="w-16 h-16 rounded-xl bg-white p-1.5 border border-gray-100 shadow-md mb-4 relative z-10 transition-transform group-hover:scale-105 duration-300">
                                            @if($chapter->logo_path)
                                                <img src="{{ asset('storage/' . $chapter->logo_path) }}" class="w-full h-full object-contain rounded-lg" alt="{{ $chapter->name }} Logo">
                                            @elseif($chapter->photo)
                                                <img src="{{ asset('storage/' . $chapter->photo) }}" class="w-full h-full object-contain rounded-lg" alt="{{ $chapter->name }} Logo">
                                            @else
                                                <div class="w-full h-full bg-blue-50 flex items-center justify-center text-blue-300 rounded-lg">
                                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                                </div>
                                            @endif
                                        </div>
                                        
                                        <h4 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1 mb-1">{{ $chapter->name }}</h4>
                                        <div class="text-sm text-gray-500 flex items-center font-medium">
                                            <svg class="w-4 h-4 mr-1.5 text-blue-500" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                            {{ $chapter->city }}, {{ $chapter->state }}
                                        </div>
                                    </div>
                                    <div class="px-6 pb-6 mt-auto">
                                        <div class="pt-4 border-t border-gray-50 flex items-center justify-between text-blue-600 group-hover:text-blue-700 transition-colors">
                                            <span class="text-sm font-bold uppercase tracking-wider">Explore</span>
                                            <svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                                        </div>
                                    </div>
                                </a>
                            @empty
                                <div class="col-span-4 py-8 text-center text-gray-500 text-sm italic">
                                    No chapters have been mapped into this network yet.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-24 bg-white rounded-2xl shadow-sm border border-gray-100">
                    <svg class="mx-auto h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                    <h3 class="mt-4 text-lg font-medium text-gray-900">No Networks Active</h3>
                    <p class="mt-1 text-gray-500">New networking groups are currently being organized.</p>
                </div>
            @endforelse

        </div>
    </div>
@endsection