@extends('layouts.app')

@section('title', 'Home')
@section('meta_description', 'AIT Broadcasting Network — Ghana\'s Technology & Education Intelligence Platform')

@section('content')
<div class="px-6 py-5">
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-6 items-start">

        {{-- MAIN COLUMN --}}
        <div class="min-w-0">

            {{-- HERO SLIDER --}}
            @if($heroSlides->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-[1fr_200px] border border-[#e2e2dc] rounded overflow-hidden bg-white mb-6">

                {{-- HERO LEAD SLIDER --}}
                <div class="md:border-r border-[#e2e2dc] relative" x-data="{ active: 0, count: {{ $heroSlides->count() }} }" x-init="setInterval(() => active = (active + 1) % count, 6000)">
                    @foreach($heroSlides as $index => $slide)
                        <a href="{{ route('article.show', $slide->slug) }}"
                           x-show="active === {{ $index }}"
                           x-transition:enter="transition ease-out duration-500"
                           x-transition:enter-start="opacity-0"
                           x-transition:enter-end="opacity-100"
                           class="block relative"
                           @if(!$loop->first) style="display:none;" @endif>

                            <div class="bg-[#071f17] relative overflow-hidden" style="height:380px;">
                                @if($slide->featured_image_url)
                                    <img src="{{ asset('storage/' . $slide->featured_image_url) }}"
                                         alt="{{ $slide->title }}"
                                         class="w-full h-full object-cover object-center">
                                @else
                                    <div class="w-full h-full flex items-center justify-center">
                                        <svg class="w-16 h-16 text-white/10" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/>
                                        </svg>
                                    </div>
                                @endif

                                <div class="absolute inset-0" style="background:linear-gradient(to top, rgba(7,31,23,0.92) 0%, rgba(7,31,23,0.55) 35%, rgba(7,31,23,0) 65%);"></div>

                                <div class="absolute top-3 left-3 flex items-center gap-2">
                                    @if($slide->is_breaking)
                                        <span class="bg-red-600 text-white text-[8px] font-bold px-2 py-0.5 rounded tracking-wider">BREAKING</span>
                                    @endif
                                    @if($slide->region)
                                        <span class="bg-[#0a3828]/90 text-[#d4af50] text-[8px] font-bold px-2 py-0.5 rounded tracking-wider">
                                            {{ $slide->region->flag_emoji }} {{ strtoupper($slide->region->name) }}
                                        </span>
                                    @endif
                                </div>

                                <div class="absolute bottom-0 left-0 right-0 p-5">
                                    @if($slide->category)
                                        <div class="text-[9px] font-bold text-[#d4af50] tracking-widest uppercase mb-2">
                                            {{ $slide->category->name }}
                                        </div>
                                    @endif
                                    <h1 class="text-2xl font-bold text-white font-serif leading-tight mb-2">
                                        {{ $slide->title }}
                                    </h1>
                                    @if($slide->subtitle)
                                        <p class="text-sm text-white/80 mb-2 leading-snug">{{ Str::limit($slide->subtitle, 120) }}</p>
                                    @endif
                                    <div class="text-[10px] text-white/60">
                                        <span class="font-bold text-white/80">{{ $slide->author?->name ?? 'AIT Newsroom' }}</span>
                                        · {{ $slide->published_at_human }}
                                        · {{ $slide->reading_time_label }}
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach

                    <div class="absolute bottom-3 right-4 flex items-center gap-1.5 z-10">
                        @foreach($heroSlides as $index => $slide)
                            <button
                                @click="active = {{ $index }}"
                                class="rounded-full transition-all"
                                :class="active === {{ $index }} ? 'bg-[#b8962e] w-5 h-1.5' : 'bg-white/40 w-1.5 h-1.5 hover:bg-white/70'">
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- HERO STACK --}}
                <div class="flex flex-col divide-y divide-[#e2e2dc]">
                    @forelse($heroStack as $item)
                        <a href="{{ route('article.show', $item->slug) }}" class="flex-1 p-3 hover:bg-[#fafaf7] transition block">
                            <div class="h-16 rounded mb-2 bg-[#071f17] flex items-center justify-center overflow-hidden">
                                @if($item->featured_image_url)
                                    <img src="{{ asset('storage/' . $item->featured_image_url) }}"
                                         alt="{{ $item->title }}"
                                         class="w-full h-full object-cover object-center">
                                @else
                                    <svg class="w-5 h-5 text-white/10" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>
                                @endif
                            </div>
                            @if($item->region)
                                <div class="text-[8px] font-bold tracking-widest uppercase mb-1 text-[#0a3828]">
                                    {{ $item->region->flag_emoji }} {{ $item->region->name }}
                                </div>
                            @endif
                            <div class="text-xs font-bold text-[#111110] font-serif leading-tight">
                                {{ Str::limit($item->title, 80) }}
                            </div>
                            <div class="text-[9px] text-[#767670] mt-1">
                                {{ $item->published_at_human }}
                            </div>
                        </a>
                    @empty
                        <div class="flex-1 p-4 text-xs text-gray-400 text-center flex items-center justify-center">
                            More stories coming soon
                        </div>
                    @endforelse
                </div>

            </div>
            @endif

            {{-- AD STRIP --}}
            <div class="bg-white border border-[#e2e2dc] rounded p-2.5 flex items-center gap-3 mb-6">
                <span class="text-[8px] text-gray-300 tracking-widest uppercase flex-shrink-0">Advertisement</span>
                <div class="flex-1 text-xs text-gray-500">
                    <strong class="text-gray-800">Advertise with AIT Broadcasting Network</strong>
                    — Reach Ghana's technology and education audience
                </div>
                <a href="#" class="text-[10px] font-bold text-[#0a3828] border border-[#0a3828] px-3 py-1 rounded hover:bg-[#0a3828] hover:text-white transition whitespace-nowrap">
                    Learn more
                </a>
            </div>

            {{-- GHANA NEWS --}}
            @if($ghanaNews->count() > 0)
            <div class="mb-6">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#0a3828] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        🇬🇭 Ghana
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3 hidden sm:inline">Politics · Economy · Society</span>
                    <a href="{{ route('region.show', 'gh') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">More Ghana →</a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($ghanaNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}" class="bg-white border border-[#e2e2dc] rounded overflow-hidden hover:border-[#0a3828] transition block">
                            <div class="h-32 bg-[#071f17] flex items-center justify-center overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}" alt="{{ $article->title }}" class="w-full h-full object-cover object-center">
                                @else
                                    <svg class="w-8 h-8 text-white/10" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>
                                @endif
                            </div>
                            <div class="p-3">
                                <div class="text-[8.5px] font-bold text-[#0a3828] tracking-widest uppercase mb-1">
                                    🇬🇭 {{ $article->category?->name ?? 'Ghana' }}
                                </div>
                                <div class="text-sm font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 90) }}
                                </div>
                                <div class="text-[9.5px] text-[#767670] mt-2">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- AFRICA NEWS --}}
            @if($africaNews->count() > 0)
            <div class="mb-6">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t text-white" style="background:#8a6a10">
                        Africa
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3 hidden sm:inline">West · East · Southern · Continental</span>
                    <a href="{{ route('region.show', 'af') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">More Africa →</a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    @foreach($africaNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}" class="bg-white border border-[#e2e2dc] rounded overflow-hidden flex hover:border-[#0a3828] transition">
                            <div class="w-24 flex-shrink-0 bg-[#071f17] flex items-center justify-center overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}" alt="{{ $article->title }}" class="w-full h-full object-cover object-center">
                                @else
                                    <svg class="w-6 h-6 text-white/10" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>
                                @endif
                            </div>
                            <div class="p-2.5 flex-1 min-w-0">
                                <div class="text-[8px] font-bold tracking-widest uppercase mb-1" style="color:#8a6a10">
                                    Africa · {{ $article->category?->name ?? '' }}
                                </div>
                                <div class="text-xs font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 80) }}
                                </div>
                                <div class="text-[9px] text-[#767670] mt-1">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- WORLD NEWS --}}
            @if($worldNews->count() > 0)
            <div class="mb-6">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#1a5fa0] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        World
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3 hidden sm:inline">Americas · Europe · Asia · Middle East</span>
                    <a href="{{ route('region.show', 'wo') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">More World →</a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                    @foreach($worldNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}" class="bg-white border border-[#e2e2dc] rounded overflow-hidden hover:border-[#0a3828] transition block">
                            <div class="h-32 bg-[#071f17] flex items-center justify-center overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}" alt="{{ $article->title }}" class="w-full h-full object-cover object-center">
                                @else
                                    <svg class="w-8 h-8 text-white/10" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>
                                @endif
                            </div>
                            <div class="p-3">
                                <div class="text-[8.5px] font-bold text-[#1a5fa0] tracking-widest uppercase mb-1">
                                    World · {{ $article->category?->name ?? '' }}
                                </div>
                                <div class="text-sm font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 90) }}
                                </div>
                                <div class="text-[9.5px] text-[#767670] mt-2">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- TECHNOLOGY NEWS --}}
            @if($techNews->count() > 0)
            <div class="mb-6">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t text-white" style="background:#125050">
                        Technology
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3 hidden sm:inline">AI · Fintech · EdTech · Innovation</span>
                    <a href="{{ route('category.show', 'technology') }}" class="ml-auto text-[10px] font-bold text-[#0a3828] self-end pb-1.5 hover:underline">More Technology →</a>
                </div>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
                    @foreach($techNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}" class="bg-white border border-[#e2e2dc] rounded overflow-hidden hover:border-[#0a3828] transition block">
                            <div class="h-24 bg-[#071f17] flex items-center justify-center overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}" alt="{{ $article->title }}" class="w-full h-full object-cover object-center">
                                @else
                                    <svg class="w-7 h-7 text-white/10" fill="currentColor" viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/></svg>
                                @endif
                            </div>
                            <div class="p-2.5">
                                <div class="text-[8px] font-bold tracking-widest uppercase mb-1" style="color:#125050">
                                    Tech
                                </div>
                                <div class="text-xs font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 70) }}
                                </div>
                                <div class="text-[9px] text-[#767670] mt-1">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- LATEST NEWS — catch-all feed --}}
            @if($latestNews->count() > 0)
            <div class="mb-6">
                <div class="flex items-stretch border-b-2 border-[#0a3828] mb-3">
                    <div class="bg-[#0a3828] text-white text-[10px] font-bold tracking-widest uppercase px-4 py-1.5 rounded-t">
                        Latest News
                    </div>
                    <span class="text-xs text-gray-400 self-end pb-1.5 px-3 hidden sm:inline">The newsroom, updated continuously</span>
                </div>
                <div class="bg-white border border-[#e2e2dc] rounded overflow-hidden">
                    @foreach($latestNews as $article)
                        <a href="{{ route('article.show', $article->slug) }}"
                           class="flex items-start gap-3 px-4 py-3 border-b border-[#f0f0eb] last:border-0 hover:bg-[#fafaf7] transition">
                            @if($article->featured_image_url)
                                <div class="w-16 h-16 flex-shrink-0 bg-[#071f17] rounded overflow-hidden">
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}" alt="{{ $article->title }}" class="w-full h-full object-cover object-center">
                                </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-0.5">
                                    @if($article->category)
                                        <span class="text-[8px] font-bold text-[#0a3828] tracking-widest uppercase">{{ $article->category->name }}</span>
                                    @endif
                                    @if($article->region)
                                        <span class="text-[8px] text-gray-300">·</span>
                                        <span class="text-[8px] font-bold text-gray-400 tracking-widest uppercase">{{ $article->region->flag_emoji }} {{ $article->region->name }}</span>
                                    @endif
                                </div>
                                <div class="text-sm font-bold text-[#111110] font-serif leading-tight">
                                    {{ Str::limit($article->title, 110) }}
                                </div>
                                <div class="text-[9.5px] text-[#767670] mt-1">
                                    {{ $article->published_at_human }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif

        </div>

        {{-- SIDEBAR --}}
        @include('partials.sidebar')

    </div>
</div>
@endsection