@extends('components.layout')

@section('title', $settings['site_name'] ?? 'LOCAL PULSE - Home')

@section('content')
    <!-- Hero Section -->
    @if($heroArticle)
        <section class="border-b border-gray-200">
            <div class="max-w-7xl mx-auto">
                <x-featured-article :article="$heroArticle" />
            </div>
        </section>
    @else
        <section class="border-b border-gray-200 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
                <p class="text-gray-500 text-sm">No featured story yet. Use the admin dashboard to promote one.</p>
            </div>
        </section>
    @endif

    <!-- Secondary Stories -->
    @if($secondaryArticles->isNotEmpty())
        <section class="py-8 border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-xl font-bold text-gray-900 mb-6">Top Stories</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($secondaryArticles->take(6) as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Politics -->
    @if($politicsArticles->isNotEmpty())
        <section class="py-8 border-b border-gray-200 bg-rose-50/40">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                    <span class="w-1 h-6 bg-rose-700"></span>
                    Politics
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($politicsArticles->take(4) as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
                <div class="mt-6">
                    <a href="{{ route('politics') }}" class="inline-flex items-center gap-2 bg-rose-700 text-white px-5 py-2.5 rounded-md font-semibold hover:bg-rose-600 transition-colors text-sm">
                        View all politics
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
        </section>
    @endif

    <!-- Breaking News Bar -->
    @if($breakingArticles->isNotEmpty())
        <section class="bg-red-50 border-b border-red-100">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                <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 News
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                    @foreach($breakingArticles->take(5) 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">
                            @if($article->featured_image)
                                <img src="{{ asset('storage/' . $article->featured_image) }}" alt="{{ $article->title }}" class="w-full h-32 object-cover rounded mb-2">
                            @endif
                            <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>
                <a href="{{ route('breaking') }}" class="inline-block mt-4 text-red-600 font-semibold text-sm hover:underline">View all breaking news &rarr;</a>
            </div>
        </section>
    @endif

    <!-- Latest News -->
    <section class="py-8 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-xl font-bold text-gray-900 mb-6">Latest News</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($latestArticles->take(8) as $article)
                    <x-article-card :article="$article" />
                @endforeach
            </div>
            <div class="text-center mt-8">
                <a href="{{ route('latest') }}" class="inline-flex items-center gap-2 bg-gray-900 text-white px-6 py-3 rounded-md font-semibold hover:bg-gray-800 transition-colors">
                    View all latest news
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Local / National / International split -->
    <section class="py-8 bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-extrabold text-gray-900 flex items-center gap-2">
                            <span class="w-1.5 h-6 bg-red-600 rounded"></span>
                            Local
                        </h2>
                        <a href="{{ route('locations.index') }}" class="text-xs text-red-600 font-semibold hover:underline">All locations →</a>
                    </div>
                    <div class="space-y-4">
                        @forelse($localNews->take(4) as $article)
                            <a href="{{ route('articles.show', $article->slug) }}" class="flex gap-3 group">
                                @if($article->featured_image)
                                    <img src="{{ asset('storage/' . $article->featured_image) }}" alt="" class="w-20 h-16 object-cover rounded flex-shrink-0">
                                @endif
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-semibold text-gray-900 line-clamp-2 group-hover:text-red-600">{{ $article->title }}</h3>
                                    <div class="text-xs text-gray-500 mt-1">
                                        {{ $article->location?->name ?? 'Local' }} · {{ $article->published_at?->diffForHumans() }}
                                    </div>
                                </div>
                            </a>
                        @empty
                            <p class="text-sm text-gray-500">No local stories yet.</p>
                        @endforelse
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-extrabold text-gray-900 flex items-center gap-2">
                            <span class="w-1.5 h-6 bg-amber-500 rounded"></span>
                            Australia
                        </h2>
                        <a href="{{ route('latest') }}" class="text-xs text-amber-600 font-semibold hover:underline">All Australia →</a>
                    </div>
                    <div class="space-y-4">
                        @forelse($moreLocalNews->take(4) as $article)
                            <a href="{{ route('articles.show', $article->slug) }}" class="flex gap-3 group">
                                @if($article->featured_image)
                                    <img src="{{ asset('storage/' . $article->featured_image) }}" alt="" class="w-20 h-16 object-cover rounded flex-shrink-0">
                                @endif
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-semibold text-gray-900 line-clamp-2 group-hover:text-amber-600">{{ $article->title }}</h3>
                                    <div class="text-xs text-gray-500 mt-1">
                                        {{ $article->source_name ?? 'Australian wire' }} · {{ $article->published_at?->diffForHumans() }}
                                    </div>
                                </div>
                            </a>
                        @empty
                            <p class="text-sm text-gray-500">No stories yet.</p>
                        @endforelse
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-extrabold text-gray-900 flex items-center gap-2">
                            <span class="w-1.5 h-6 bg-blue-600 rounded"></span>
                            International
                        </h2>
                        <a href="{{ route('international') }}" class="text-xs text-blue-600 font-semibold hover:underline">All world →</a>
                    </div>
                    <div class="space-y-4">
                        @forelse($internationalNews->take(4) as $article)
                            <a href="{{ route('articles.show', $article->slug) }}" class="flex gap-3 group">
                                @if($article->featured_image)
                                    <img src="{{ asset('storage/' . $article->featured_image) }}" alt="" class="w-20 h-16 object-cover rounded flex-shrink-0">
                                @endif
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-semibold text-gray-900 line-clamp-2 group-hover:text-blue-600">{{ $article->title }}</h3>
                                    <div class="text-xs text-gray-500 mt-1">
                                        {{ $article->source_name ?? 'Source' }} · {{ $article->published_at?->diffForHumans() }}
                                    </div>
                                </div>
                            </a>
                        @empty
                            <p class="text-sm text-gray-500">No international stories yet.</p>
                        @endforelse
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Topic Sections -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 py-8 border-b border-gray-200">
        <div class="lg:col-span-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Crime -->
                @if($crimeArticles->isNotEmpty())
                    <section>
                        <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <span class="w-1 h-6 bg-red-600"></span>
                            Crime & Courts
                        </h2>
                        <div class="space-y-4">
                            @foreach($crimeArticles->take(4) as $article)
                                <x-article-card :article="$article" />
                            @endforeach
                        </div>
                    </section>
                @endif

                <!-- Traffic -->
                @if($trafficArticles->isNotEmpty())
                    <section>
                        <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <span class="w-1 h-6 bg-yellow-500"></span>
                            Traffic & Transport
                        </h2>
                        <div class="space-y-4">
                            @foreach($trafficArticles->take(4) as $article)
                                <x-article-card :article="$article" />
                            @endforeach
                        </div>
                    </section>
                @endif
            </div>
        </div>

        <aside class="space-y-6">
            <!-- Community -->
            @if($communityArticles->isNotEmpty())
                <section class="bg-white border border-gray-200 rounded-lg p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <span class="w-1 h-6 bg-blue-600"></span>
                        Community
                    </h3>
                    <div class="space-y-3">
                        @foreach($communityArticles->take(4) 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>
                </section>
            @endif

            <!-- Upcoming Events -->
            @if($upcomingEvents->isNotEmpty())
                <section class="bg-white border border-gray-200 rounded-lg p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <span class="w-1 h-6 bg-purple-600"></span>
                        Upcoming Events
                    </h3>
                    <div class="space-y-3">
                        @foreach($upcomingEvents->take(5) as $event)
                            <a href="{{ route('events.show', $event->slug) }}" class="block group">
                                <h4 class="text-sm font-semibold text-gray-900 group-hover:text-red-600 transition-colors line-clamp-2">{{ $event->title }}</h4>
                                <span class="text-xs text-gray-500">{{ $event->start_date?->format('d M Y') }} &middot; {{ $event->venue }}</span>
                            </a>
                        @endforeach
                    </div>
                    <a href="{{ route('events.index') }}" class="inline-block mt-3 text-red-600 text-sm font-semibold hover:underline">View all events &rarr;</a>
                </section>
            @endif
        </aside>
    </div>

    <!-- Subscribe - full width centered bottom -->
    <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="grid" 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(#grid)"/></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 news delivered to your inbox every morning. Free, unsubscribe anytime.</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>

    <!-- Sport, Business, Lifestyle -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 py-8 border-b border-gray-200">
        @if($sportArticles->isNotEmpty())
            <section>
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <span class="w-1 h-6 bg-green-600"></span>
                    Sport
                </h2>
                <div class="space-y-4">
                    @foreach($sportArticles->take(4) as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
            </section>
        @endif

        @if($businessArticles->isNotEmpty())
            <section>
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <span class="w-1 h-6 bg-blue-800"></span>
                    Business
                </h2>
                <div class="space-y-4">
                    @foreach($businessArticles->take(4) as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
            </section>
        @endif

        @if($lifestyleArticles->isNotEmpty())
            <section>
                <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <span class="w-1 h-6 bg-pink-600"></span>
                    Lifestyle
                </h2>
                <div class="space-y-4">
                    @foreach($lifestyleArticles->take(4) as $article)
                        <x-article-card :article="$article" />
                    @endforeach
                </div>
            </section>
        @endif
    </div>
 @endsection