@extends('components.layout')

@section('title', 'Local News by Location | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Local News by Location</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach($states as $state)
                        <div class="bg-white border border-gray-200 rounded-lg p-6">
                            <h2 class="text-xl font-bold text-gray-900 mb-4">{{ $state->name }}</h2>
                            <div class="space-y-2">
                                @foreach($state->children->take(8) as $city)
                                    <a href="{{ route('locations.show', ['state' => $state->slug, 'city' => $city->slug]) }}" class="flex items-center justify-between p-2 rounded hover:bg-gray-50 group">
                                        <span class="text-sm font-medium text-gray-700 group-hover:text-red-600">{{ $city->name }}</span>
                                        <span class="text-xs text-gray-400">{{ $city->articles_count ?? 0 }} articles</span>
                                    </a>
                                @endforeach
                                @if($state->children->count() > 8)
                                    <p class="text-sm text-gray-500 pt-2">+{{ $state->children->count() - 8 }} more locations</p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <aside class="space-y-6">
                <!-- Featured by Location -->
                @if($featuredArticles->isNotEmpty())
                    <div class="bg-white border border-gray-200 rounded-lg p-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-4">Featured Stories</h3>
                        <div class="space-y-4">
                            @foreach($featuredArticles->take(5) as $article)
                                <a href="{{ route('articles.show', $article->slug) }}" class="block group">
                                    <h4 class="text-sm font-semibold text-gray-900 group-hover:text-red-600 transition-colors line-clamp-2">{{ $article->title }}</h4>
                                    <span class="text-xs text-gray-500">{{ $article->published_at?->format('d M Y') }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Popular Locations -->
                @if($popularLocations->isNotEmpty())
                    <div class="bg-white border border-gray-200 rounded-lg p-6">
                        <h3 class="text-lg font-bold text-gray-900 mb-4">Popular Locations</h3>
                        <div class="space-y-2">
                            @foreach($popularLocations as $location)
                                <a href="{{ route('locations.show', ['state' => $location->parent->slug ?? 'unknown', 'city' => $location->slug]) }}" class="flex items-center justify-between p-2 rounded hover:bg-gray-50">
                                    <span class="text-sm text-gray-700">{{ $location->name }}</span>
                                    <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">{{ $location->articles_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <x-newsletter-card />
            </aside>
        </div>
    </div>
@endsection