@extends('layouts.app')

@section('title', __('messages.app_name') . ' - ' . __('messages.tagline'))
@section('description', __('messages.home_meta_description'))

@section('content')
@php use App\Services\Translator; @endphp
<div class="max-w-[1200px] mx-auto">

    @php $lang = app()->getLocale(); @endphp

    {{-- ===== LEAGUE MATCHES (horizontal scroll of 160px cards) ===== --}}
    @if(!empty($matches))
    <div class="overflow-x-auto scrollbar-hide py-2">
        <div class="flex items-center gap-2 px-2">
            @foreach($matches as $match)
                <a href="{{ isset($match['fixture_id']) ? route('match.show', $match['fixture_id']) : '#' }}" class="flex-shrink-0 block" style="width: 160px;">
                    <div class="card px-1.5 py-1 flex items-center {{ ($match['status'] ?? '') === 'LIVE' ? 'border-[1.5px] border-[#E53E3E]' : 'border border-[#E8E8E8]' }}" style="border-radius: 12px; height: 60px;">
                        <div class="flex items-center gap-0.5 w-full">
                            {{-- Home team --}}
                            <div class="flex-1 flex flex-col items-center">
                                <div class="w-6 h-6 rounded-full bg-[#F5F5F5] flex items-center justify-center overflow-hidden">
                                    @if(!empty($match['home_logo']))
                                        <img src="{{ $match['home_logo'] }}" alt="" class="w-[18px] h-[18px] object-contain" loading="lazy">
                                    @else
                                        <svg class="w-3.5 h-3.5 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/></svg>
                                    @endif
                                </div>
                                <span class="font-semibold text-[#1A1A2E]/80 text-center line-clamp-1 px-0.5" style="font-size: 6.3px; line-height: 1.1; margin-top: 2px;">{{ Translator::team($match['home_name'] ?? '') }}</span>
                            </div>

                            {{-- Center: score/time + league (fixed height for uniform layout) --}}
                            <div class="flex flex-col items-center justify-center px-0.5" style="min-height: 48px; min-width: 50px;">
                                <div class="flex flex-col items-center justify-center flex-1">
                                    @if(($match['status'] ?? '') === 'LIVE')
                                        <div class="px-1 bg-[#E53E3E] text-white font-bold" style="font-size: 7px; border-radius: 3px; padding: 1px 4px;">{{ $match['elapsed'] ?? '' }}'</div>
                                        <div class="text-[#E53E3E] font-bold" style="font-size: 14px;">{{ $match['home_score'] ?? 0 }} - {{ $match['away_score'] ?? 0 }}</div>
                                    @elseif(isset($match['home_score']) && isset($match['away_score']) && $match['home_score'] !== null)
                                        <div class="bg-[#4CAF50] text-white font-bold" style="font-size: 7px; border-radius: 3px; padding: 1px 4px;">{{ __('messages.finished') }}</div>
                                        <div class="text-[#1A1A2E] font-bold" style="font-size: 14px;">{{ $match['home_score'] }} - {{ $match['away_score'] }}</div>
                                    @else
                                        {{-- Upcoming: date ABOVE time --}}
                                        @if(!empty($match['date_short']))
                                            <div class="text-[#2e8b6b] font-semibold" style="font-size: 8px;">{{ $match['date_short'] }}</div>
                                        @endif
                                        <div class="text-[#1A1A2E]/80 font-semibold" style="font-size: 11px;">{{ $match['time'] ?? '--:--' }}</div>
                                    @endif
                                </div>
                                <div class="flex items-center gap-0.5 mt-0.5" style="max-width: 50px;">
                                    @if(!empty($match['league_logo']))
                                        <img src="{{ $match['league_logo'] }}" alt="" class="w-2.5 h-2.5 object-contain" loading="lazy">
                                    @endif
                                    @if(!empty($match['league_name']))
                                        <span class="text-[#9E9E9E] line-clamp-1 overflow-hidden" style="font-size: 6px;">{{ Translator::league($match['league_name'], $match['league_country'] ?? null) }}</span>
                                    @endif
                                </div>
                            </div>

                            {{-- Away team --}}
                            <div class="flex-1 flex flex-col items-center">
                                <div class="w-6 h-6 rounded-full bg-[#F5F5F5] flex items-center justify-center overflow-hidden">
                                    @if(!empty($match['away_logo']))
                                        <img src="{{ $match['away_logo'] }}" alt="" class="w-[18px] h-[18px] object-contain" loading="lazy">
                                    @else
                                        <svg class="w-3.5 h-3.5 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/></svg>
                                    @endif
                                </div>
                                <span class="font-semibold text-[#1A1A2E]/80 text-center line-clamp-1 px-0.5" style="font-size: 6.3px; line-height: 1.1; margin-top: 2px;">{{ Translator::team($match['away_name'] ?? '') }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ===== NEWS SECTION ===== --}}
    @if(!empty($news) && count($news) > 0)
        @php
            $featured = $news[0] ?? null;
            $otherNews = array_slice($news, 1, 5);
            $moreNews = array_slice($news, 6);
        @endphp

        {{-- Mobile: featured large + horizontal scroll --}}
        <div class="md:hidden">
            @if($featured)
                <div class="px-3 pt-0.5">
                    <a href="{{ route('news.show', $featured['id']) }}" class="block rounded-xl overflow-hidden relative shadow-md" style="aspect-ratio: 2/1;">
                        @if(!empty($featured['image']))
                            <img src="{{ $featured['image'] }}" alt="{{ $featured['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                        @else
                            <div class="w-full h-full bg-[#1A1A2E] flex items-center justify-center">
                                <svg class="w-12 h-12 text-white/40" fill="currentColor" viewBox="0 0 24 24"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 5h6v6H5V5zm0 14v-6h14v6H5zm14-8h-6V9h6v2zm0-4h-6V5h6v2z"/></svg>
                            </div>
                        @endif
                        <div class="absolute inset-x-0 bottom-0 px-3 pt-6 pb-2.5" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                            <h2 class="text-white font-medium line-clamp-2" style="font-size: 13.5px;">{{ $featured['title'] ?? '' }}</h2>
                        </div>
                    </a>
                </div>
            @endif

            @if(!empty($otherNews))
                <div class="overflow-x-auto scrollbar-hide mt-2.5">
                    <div class="flex gap-2 px-3">
                        @foreach($otherNews as $article)
                            <a href="{{ route('news.show', $article['id']) }}" class="flex-shrink-0 block rounded-[10px] overflow-hidden relative shadow-md" style="width: 42vw; max-width: 180px; height: 150px;">
                                @if(!empty($article['image']))
                                    <img src="{{ $article['image'] }}" alt="{{ $article['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                                @else
                                    <div class="w-full h-full bg-[#1A1A2E] flex items-center justify-center">
                                        <svg class="w-8 h-8 text-white/40" fill="currentColor" viewBox="0 0 24 24"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
                                    </div>
                                @endif
                                <div class="absolute inset-x-0 bottom-0 px-2 pt-5 pb-2" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                                    <h3 class="text-white font-medium line-clamp-1" style="font-size: 12.5px;">{{ $article['title'] ?? '' }}</h3>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        {{-- Desktop: featured left (60%) + other news right (40%) --}}
        <div class="hidden md:block px-4 pt-2">
            <div class="flex gap-4">
                @if($featured)
                    <a href="{{ route('news.show', $featured['id']) }}" class="block rounded-xl overflow-hidden relative shadow-md flex-[3]" style="aspect-ratio: 4/3;">
                        @if(!empty($featured['image']))
                            <img src="{{ $featured['image'] }}" alt="{{ $featured['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                        @else
                            <div class="w-full h-full bg-[#1A1A2E] flex items-center justify-center">
                                <svg class="w-16 h-16 text-white/40" fill="currentColor" viewBox="0 0 24 24"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
                            </div>
                        @endif
                        <div class="absolute inset-x-0 bottom-0 px-3 pt-6 pb-2.5" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                            <h2 class="text-white font-medium line-clamp-2" style="font-size: 13.5px;">{{ $featured['title'] ?? '' }}</h2>
                        </div>
                    </a>
                @endif

                @if(!empty($otherNews))
                    <div class="flex-[2] flex flex-col gap-2">
                        @foreach($otherNews as $article)
                            <a href="{{ route('news.show', $article['id']) }}" class="card flex rounded-[10px] overflow-hidden hover:shadow-lg transition-shadow" style="height: 70px;">
                                <div class="w-[100px] h-[70px] flex-shrink-0 bg-[#1A1A2E]">
                                    @if(!empty($article['image']))
                                        <img src="{{ $article['image'] }}" alt="" class="w-full h-full object-cover" loading="lazy">
                                    @endif
                                </div>
                                <div class="flex-1 px-3 py-2 flex items-center">
                                    <p class="line-clamp-2 font-medium text-gray-900" style="font-size: 10px; line-height: 1.3;">{{ $article['title'] ?? '' }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    @endif

    {{-- ===== POPULAR TEAMS (horizontal scroll of circle logos) ===== --}}
    @php
        $popularTeams = [
            ['id' => 28, 'nameAr' => 'تونس', 'nameFr' => 'Tunisie', 'nameEn' => 'Tunisia', 'logo' => 'https://media.api-sports.io/football/teams/28.png'],
            ['id' => 980, 'nameAr' => 'الترجي الرياضي', 'nameFr' => 'Espérance de Tunis', 'nameEn' => 'ES Tunis', 'logo' => 'https://media.api-sports.io/football/teams/980.png'],
            ['id' => 988, 'nameAr' => 'النادي الإفريقي', 'nameFr' => 'Club Africain', 'nameEn' => 'Club Africain', 'logo' => 'https://media.api-sports.io/football/teams/988.png'],
            ['id' => 990, 'nameAr' => 'النجم الساحلي', 'nameFr' => 'Étoile du Sahel', 'nameEn' => 'ES Sahel', 'logo' => 'https://media.api-sports.io/football/teams/990.png'],
            ['id' => 991, 'nameAr' => 'الملعب التونسي', 'nameFr' => 'Stade Tunisien', 'nameEn' => 'Stade Tunisien', 'logo' => 'https://media.api-sports.io/football/teams/991.png'],
            ['id' => 983, 'nameAr' => 'النادي الصفاقسي', 'nameFr' => 'CS Sfaxien', 'nameEn' => 'CS Sfaxien', 'logo' => 'https://media.api-sports.io/football/teams/983.png'],
            ['id' => 992, 'nameAr' => 'الاتحاد المنستيري', 'nameFr' => 'US Monastir', 'nameEn' => 'US Monastir', 'logo' => 'https://media.api-sports.io/football/teams/992.png'],
            ['id' => 989, 'nameAr' => 'الترجي الجرجيسي', 'nameFr' => 'ES Zarzis', 'nameEn' => 'ES Zarzis', 'logo' => 'https://media.api-sports.io/football/teams/989.png'],
            ['id' => 541, 'nameAr' => 'ريال مدريد', 'nameFr' => 'Real Madrid', 'nameEn' => 'Real Madrid', 'logo' => 'https://media.api-sports.io/football/teams/541.png'],
            ['id' => 529, 'nameAr' => 'برشلونة', 'nameFr' => 'FC Barcelone', 'nameEn' => 'FC Barcelona', 'logo' => 'https://media.api-sports.io/football/teams/529.png'],
            ['id' => 40, 'nameAr' => 'ليفربول', 'nameFr' => 'Liverpool', 'nameEn' => 'Liverpool', 'logo' => 'https://media.api-sports.io/football/teams/40.png'],
            ['id' => 85, 'nameAr' => 'باريس سان جيرمان', 'nameFr' => 'Paris Saint-Germain', 'nameEn' => 'Paris Saint-Germain', 'logo' => 'https://media.api-sports.io/football/teams/85.png'],
            ['id' => 157, 'nameAr' => 'بايرن ميونخ', 'nameFr' => 'Bayern Munich', 'nameEn' => 'Bayern Munich', 'logo' => 'https://media.api-sports.io/football/teams/157.png'],
            ['id' => 50, 'nameAr' => 'مانشستر سيتي', 'nameFr' => 'Manchester City', 'nameEn' => 'Manchester City', 'logo' => 'https://media.api-sports.io/football/teams/50.png'],
            ['id' => 33, 'nameAr' => 'مانشستر يونايتد', 'nameFr' => 'Manchester United', 'nameEn' => 'Manchester United', 'logo' => 'https://media.api-sports.io/football/teams/33.png'],
            ['id' => 42, 'nameAr' => 'أرسنال', 'nameFr' => 'Arsenal', 'nameEn' => 'Arsenal', 'logo' => 'https://media.api-sports.io/football/teams/42.png'],
        ];
        $nameKey = $lang === 'ar' ? 'nameAr' : ($lang === 'fr' ? 'nameFr' : 'nameEn');
    @endphp

    <div class="mt-4">
        <div class="md:hidden overflow-x-auto scrollbar-hide">
            <div class="flex gap-2 px-3" style="height: 90px;">
                @foreach($popularTeams as $team)
                    <a href="{{ route('team.show', $team['id']) }}" class="flex flex-col items-center justify-center" style="width: 70px;">
                        <div class="w-[50px] h-[50px] rounded-full bg-[#F1F2F7] border border-[#E4E6F2] flex items-center justify-center p-1.5">
                            <img src="{{ $team['logo'] }}" alt="{{ $team[$nameKey] }}" class="w-full h-full object-contain" loading="lazy">
                        </div>
                        <span class="text-[10px] font-medium text-[#1A1A2E] text-center mt-1.5 line-clamp-1">{{ $team[$nameKey] }}</span>
                    </a>
                @endforeach
            </div>
        </div>
        <div class="hidden md:flex flex-wrap gap-3 px-4">
            @foreach($popularTeams as $team)
                <a href="{{ route('team.show', $team['id']) }}" class="flex flex-col items-center" style="width: 70px;">
                    <div class="w-[50px] h-[50px] rounded-full bg-[#F1F2F7] border border-[#E4E6F2] flex items-center justify-center p-1.5">
                        <img src="{{ $team['logo'] }}" alt="{{ $team[$nameKey] }}" class="w-full h-full object-contain" loading="lazy">
                    </div>
                    <span class="text-[10px] font-medium text-[#1A1A2E] text-center mt-1.5 line-clamp-1 w-full">{{ $team[$nameKey] }}</span>
                </a>
            @endforeach
        </div>
    </div>

    {{-- ===== NATIVE AD SLOT ===== --}}
    <div class="px-3 my-4 flex justify-center">
        <ins class="adsbygoogle block w-full max-w-2xl"
             style="display:block"
             data-ad-client="ca-pub-4583524398114996"
             data-ad-slot="7534798714"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>

    {{-- ===== MORE NEWS ===== --}}
    @if(!empty($moreNews))
        {{-- Mobile: vertical list --}}
        <div class="md:hidden px-3 space-y-2.5">
            @foreach($moreNews as $article)
                <a href="{{ route('news.show', $article['id']) }}" class="block rounded-xl overflow-hidden relative shadow-md" style="aspect-ratio: 2/1;">
                    @if(!empty($article['image']))
                        <img src="{{ $article['image'] }}" alt="{{ $article['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                    @else
                        <div class="w-full h-full bg-[#1A1A2E] flex items-center justify-center">
                            <svg class="w-12 h-12 text-white/40" fill="currentColor" viewBox="0 0 24 24"><path d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
                        </div>
                    @endif
                    <div class="absolute inset-x-0 bottom-0 px-3 pt-6 pb-2.5" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                        <h3 class="text-white font-medium line-clamp-2" style="font-size: 13.5px;">{{ $article['title'] ?? '' }}</h3>
                    </div>
                </a>
            @endforeach
        </div>

        {{-- Desktop: grid 3 columns --}}
        <div class="hidden md:grid grid-cols-2 lg:grid-cols-3 gap-4 px-4">
            @foreach($moreNews as $article)
                <a href="{{ route('news.show', $article['id']) }}" class="block rounded-xl overflow-hidden relative shadow-md" style="aspect-ratio: 2/1;">
                    @if(!empty($article['image']))
                        <img src="{{ $article['image'] }}" alt="{{ $article['title'] ?? '' }}" class="w-full h-full object-cover" loading="lazy">
                    @else
                        <div class="w-full h-full bg-[#1A1A2E]"></div>
                    @endif
                    <div class="absolute inset-x-0 bottom-0 px-3 pt-6 pb-2.5" style="background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.87));">
                        <h3 class="text-white font-medium line-clamp-2" style="font-size: 11px;">{{ $article['title'] ?? '' }}</h3>
                    </div>
                </a>
            @endforeach
        </div>
    @endif

    <div class="h-6"></div>
</div>
@endsection