@extends('components.layout')

@section('title', 'Politics | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Politics</h1>
            <p class="text-sm text-gray-500 mt-1">Australian federal, state and local politics coverage.</p>
        </div>

        @if($featured)
            <section class="mb-8">
                <x-featured-article :article="$featured" />
            </section>
        @endif

        @if($breaking->isNotEmpty())
            <section class="bg-red-50 border border-red-100 rounded-xl p-5 mb-8">
                <h2 class="text-lg font-bold text-red-600 uppercase tracking-wider mb-4 flex items-center gap-2">
                    <span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
                    Breaking Politics
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    @foreach($breaking->take(4) as $article)
                        <a href="{{ route('articles.show', $article->slug) }}" class="bg-white p-4 rounded-lg border border-red-100 hover:border-red-300 transition-colors group">
                            <h3 class="text-sm font-bold text-gray-900 group-hover:text-red-600 transition-colors line-clamp-2">{{ $article->title }}</h3>
                            <span class="text-xs text-gray-500 mt-1 block">{{ $article->published_at?->diffForHumans() }}</span>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <div class="lg:col-span-3">
                <div class="bg-white border border-gray-200 rounded-xl p-5 mb-6">
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="text-xs font-semibold text-gray-500 uppercase">Scope</span>
                        <a href="{{ route('politics') }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $scope === 'all' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">All</a>
                        <a href="{{ route('politics', ['scope' => 'local']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $scope === 'local' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Local</a>
                        <a href="{{ route('politics', ['scope' => 'international']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ $scope === 'international' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">International</a>
                    </div>
                </div>

                @if($articles->isEmpty())
                    <div class="bg-white border border-gray-200 rounded-xl p-12 text-center text-sm text-gray-500">
                        No politics stories yet.
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach($articles as $article)
                            <x-article-card :article="$article" />
                        @endforeach
                    </div>
                    <div class="mt-6">{{ $articles->links() }}</div>
                @endif
            </div>

            <aside class="space-y-6">
                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Related sections</h3>
                    <nav class="space-y-1">
                        <a href="{{ route('latest') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Australia</a>
                        <a href="{{ route('international') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">World</a>
                        <a href="{{ route('locations.index') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Local</a>
                        <a href="{{ route('breaking') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Breaking</a>
                        <a href="{{ route('events.index') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Events</a>
                        <a href="{{ route('weather') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Weather</a>
                        <a href="{{ route('traffic') }}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md">Traffic</a>
                    </nav>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Latest politics</h3>
                    <div class="space-y-3">
                        @foreach($articles->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?->diffForHumans() }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <!-- Subscribe - full width centered -->
    <section class="relative py-16 md:py-24 bg-gradient-to-br from-red-700 via-red-600 to-red-800 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid2" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid2)"/></svg>
        </div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full mb-6">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            </div>
            <h2 class="text-3xl md:text-5xl font-extrabold text-white mb-4 tracking-tight">Stay in the loop</h2>
            <p class="text-red-100 text-lg md:text-xl max-w-2xl mx-auto mb-8">Get the day's most important local politics delivered to your inbox every morning.</p>
            <form action="{{ route('newsletter.subscribe') }}" method="POST" class="max-w-md mx-auto flex flex-col sm:flex-row gap-3">
                @csrf
                <input type="email" name="email" placeholder="you@email.com" required class="flex-1 border-0 rounded-lg px-4 py-3 text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-red-600">
                <button type="submit" class="bg-gray-900 text-white font-bold py-3 px-8 rounded-lg hover:bg-gray-800 transition-all hover:shadow-lg whitespace-nowrap">Subscribe Now</button>
            </form>
            <p class="text-red-200 text-xs mt-4">No spam, ever. One email a morning, straight from the newsroom.</p>
        </div>
    </section>
@endsection