@extends('frontend.layouts.app')

@section('title', __t('home.meta_title', 'BrigataFolgore.net — Le notizie sui Paracadutisti militari italiani'))

@section('content')

{{-- 1. PRIMO PIANO --}}
@if($primoPiano->isNotEmpty())
<section class="container mx-auto px-4 pt-6 md:pt-10">
    <x-site.section-heading
        :title="__t('home.featured', 'Primo Piano')"
        :href="url('/articoli')" />

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 md:gap-5">
        @if($primoPiano[0] ?? null)
            <div class="lg:col-span-7">
                <x-site.article-card :article="$primoPiano[0]" variant="large" />
            </div>
        @endif
        <div class="lg:col-span-5 grid grid-cols-2 gap-4">
            @foreach($primoPiano->slice(1, 4) as $a)
                <x-site.article-card :article="$a" variant="overlay" />
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- 2. IN EVIDENZA + PIÙ LETTI --}}
<section class="container mx-auto px-4 py-10 md:py-14">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12">
        @if($inEvidenza->isNotEmpty())
        <div class="lg:col-span-5">
            <x-site.section-heading :title="__t('home.evidenza', 'In Evidenza')" />
            <div class="space-y-4">
                @foreach($inEvidenza as $a)
                    <x-site.article-card :article="$a" variant="horizontal" />
                @endforeach
            </div>
        </div>
        @endif

        @if($mostRead->isNotEmpty())
        <div class="lg:col-span-7">
            <x-site.section-heading :title="__t('home.most_read', 'Articoli più letti')" />
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                @foreach($mostRead as $a)
                    <x-site.article-card :article="$a" variant="overlay" />
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>

{{-- 3. SEZIONI ARTICOLI con World Monitor inserito dopo la 2ª riga --}}
@foreach($articleSections as $row)
<section class="container mx-auto px-4 py-8 md:py-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
        @foreach($row as $col)
            <div>
                <x-site.section-heading :title="$col['name']" :href="$col['url']" />
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @foreach($col['articles']->take(2) as $a)
                        <x-site.article-card :article="$a" variant="overlay" :show-category="false" />
                    @endforeach
                </div>
                @if($col['articles']->count() > 2)
                    <div class="grid grid-cols-3 gap-3 mt-3">
                        @foreach($col['articles']->slice(2, 3) as $a)
                            <x-site.article-card :article="$a" variant="overlay" :show-category="false" />
                        @endforeach
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</section>

{{-- World Monitor dopo Nazionali+Internazionali (iter 2) --}}
@if($loop->iteration === 2)
    @include('frontend.partials.world-monitor')
@endif
@endforeach

{{-- 4. YOUTUBE --}}
@if(!empty($youtubeVideos) && count($youtubeVideos) > 0)
@php
    $bigVideos = array_slice($youtubeVideos, 0, 3);
    $smallVideos = array_slice($youtubeVideos, 3, 5);
@endphp
<section class="bg-black text-white py-12 md:py-16">
    <div class="container mx-auto px-4">
        <div class="flex items-end justify-between mb-8 pb-2 border-b border-white/20 relative">
            <div class="absolute -bottom-px left-0 w-20 h-0.5 bg-folgore"></div>
            <div>
                <p class="text-[11px] uppercase tracking-widest text-folgore-light font-semibold mb-1 flex items-center gap-2">
                    <span class="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                    {{ __t('home.live_label', 'Dirette') }}
                </p>
                <h2 class="text-xl md:text-2xl font-semibold tracking-tight-2">{{ __t('home.live_videos', 'Le Nostre Dirette Video') }}</h2>
            </div>
            <a href="https://www.youtube.com/@BrigataFolgoreNet" target="_blank" rel="noopener"
               class="text-xs font-semibold uppercase tracking-wider text-folgore-light hover:text-white transition flex items-center gap-1 mb-1">
                {{ __t('home.youtube_subscribe', 'Iscriviti al canale') }}
                <svg class="w-3.5 h-3.5" 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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($bigVideos as $v)
                <a href="https://www.youtube.com/watch?v={{ $v['id'] }}" target="_blank" rel="noopener"
                   class="group block rounded-md overflow-hidden bg-gray-800 hover:bg-gray-700 transition">
                    <div class="relative aspect-video bg-gray-700">
                        <img src="{{ $v['thumbnail'] }}" alt="{{ $v['title'] }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition">
                            <div class="w-14 h-14 bg-red-600/95 rounded-full flex items-center justify-center group-hover:scale-110 transition">
                                <svg class="w-6 h-6 ml-1 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-white text-sm line-clamp-2 group-hover:text-folgore-light transition">{{ $v['title'] }}</h3>
                        @if(!empty($v['published_at']) || !empty($v['published_relative']))
                            <p class="text-xs text-gray-400 mt-2 font-medium">
                                {{ $v['published_relative'] ?? \Carbon\Carbon::parse($v['published_at'])->translatedFormat('d F Y') }}
                            </p>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>

        @if(!empty($smallVideos))
        <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
            @foreach($smallVideos as $v)
                <a href="https://www.youtube.com/watch?v={{ $v['id'] }}" target="_blank" rel="noopener"
                   class="group block rounded-md overflow-hidden bg-gray-800 hover:bg-gray-700 transition">
                    <div class="relative aspect-video bg-gray-700">
                        <img src="{{ $v['thumbnail'] }}" alt="{{ $v['title'] }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition">
                            <div class="w-10 h-10 bg-red-600/95 rounded-full flex items-center justify-center group-hover:scale-110 transition">
                                <svg class="w-4 h-4 ml-0.5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium text-white text-xs line-clamp-2 group-hover:text-folgore-light transition leading-snug">{{ $v['title'] }}</h3>
                        @if(!empty($v['published_at']) || !empty($v['published_relative']))
                            <p class="text-[10px] text-gray-400 mt-1.5">
                                {{ $v['published_relative'] ?? \Carbon\Carbon::parse($v['published_at'])->translatedFormat('d M Y') }}
                            </p>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endif

{{-- 5. WIKI --}}
@if($wikiFolgore || $wikiForzeSpeciali)
<section class="bg-gray-50 py-10 md:py-14 border-y border-gray-200">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">

            @if($wikiFolgore)
            <div class="lg:col-span-8">
                <x-site.section-heading :title="$wikiFolgore['name']" />
                @php $tiles = $wikiFolgore['tiles']->values(); @endphp
                <div class="grid grid-cols-12 gap-2 md:gap-3">
                    @foreach($tiles as $i => $tile)
                        @php
                            $pos = $i % 7;
                            $classes = match($pos) {
                                0,1 => 'col-span-12 sm:col-span-6 h-[360px]',
                                2,3,4 => 'col-span-6 sm:col-span-4 h-[200px]',
                                5,6 => 'col-span-12 sm:col-span-6 h-[360px]',
                                default => 'col-span-6 h-[200px]',
                            };
                            $size = in_array($pos, [0,1,5,6]) ? 'large' : 'normal';
                        @endphp
                        <div class="{{ $classes }}">
                            <x-site.wiki-tile :item="$tile" :size="$size" />
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if($wikiForzeSpeciali)
            <div class="lg:col-span-4">
                <x-site.section-heading :title="$wikiForzeSpeciali['name']" />
                <div class="space-y-3">
                    @foreach($wikiForzeSpeciali['tiles']->take(8) as $tile)
                        <div class="aspect-[3/2]">
                            <x-site.wiki-tile :item="$tile" size="large" />
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

        </div>
    </div>
</section>
@endif

@endsection