@extends('components.layout')

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

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex items-center gap-3 mb-8">
            <span class="w-4 h-4 bg-red-600 rounded-full animate-pulse"></span>
            <h1 class="text-3xl font-bold text-gray-900">Breaking News</h1>
        </div>

        @if($activeBreakingAlert)
            <div class="bg-red-600 text-white p-6 rounded-lg mb-8">
                <div class="flex items-center gap-2 mb-2">
                    <span class="inline-flex items-center justify-center w-6 h-6 bg-white text-red-600 text-xs font-bold rounded-full animate-pulse">LIVE</span>
                    <span class="text-sm font-bold uppercase tracking-wider">Active Alert</span>
                </div>
                <h2 class="text-xl font-bold">{{ $activeBreakingAlert->title }}</h2>
                @if($activeBreakingAlert->description)
                    <p class="text-red-100 mt-2">{{ $activeBreakingAlert->description }}</p>
                @endif
            </div>
        @endif

        @if($articles->isNotEmpty())
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                @foreach($articles as $article)
                    <x-article-card :article="$article" />
                @endforeach
            </div>
            <x-pagination :paginator="$articles" />
        @else
            <div class="text-center py-12">
                <p class="text-gray-500">No breaking news at this time.</p>
            </div>
        @endif

        @if($developingArticles->isNotEmpty())
            <div class="mt-12">
                <h2 class="text-xl font-bold text-gray-900 mb-6">Developing Stories</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach($developingArticles as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
            </div>
        @endif
    </div>
@endsection