@extends('theme-News::layouts.base')
@section('title', AleshaSetting::get('site_name', 'Home'))

@php
    $slidersActive = AleshaPlugin::where('slug', 'Sliders')->where('is_active', true)->exists();
    $heroSlider    = $slidersActive
        ? AleshaSlider::with('activeSlides')->get()->first(fn($s) => $s->activeSlides->isNotEmpty())
        : null;

    $allPosts  = AleshaPost::ofType('post')->published()->with('taxonomies', 'author')->latest('published_at')->take(20)->get();
    $lead      = $allPosts->first();
    $secondary = $allPosts->slice(1, 2);
    $more      = $allPosts->slice(3, 4);
    $sidebar   = $allPosts->slice(7, 5);

    $categories = AleshaTaxonomy::where('type', 'category')
        ->withCount(['posts' => fn($q) => $q->ofType('post')->published()])
        ->having('posts_count', '>', 0)->orderBy('posts_count', 'desc')->take(5)->get();

    $homeTags = AleshaTaxonomy::where('type', 'tag')
        ->withCount(['posts' => fn($q) => $q->ofType('post')->published()])
        ->having('posts_count', '>', 0)->orderBy('posts_count', 'desc')->take(20)->get();
@endphp

@section('content')

{{-- Slider --}}
@if($heroSlider)
    @php $slider_id = $heroSlider->id @endphp
    @include('theme-default::components.builder.slider')
@endif

<div style="max-width:1280px; margin:0 auto; padding:40px 20px 48px;">

    {{-- Main grid: lead + secondary + sidebar --}}
    @if($allPosts->count())
    <div style="display:grid; grid-template-columns:1fr 340px; gap:24px;" class="news-main-grid">

        {{-- Left: lead + secondary + more --}}
        <div>
            {{-- Lead story --}}
            @if($lead)
            <div style="margin-bottom:24px;">
                <div class="section-title">Top Story</div>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:1px solid #e5e7eb; overflow:hidden; border-radius:10px;" class="news-lead-grid">
                    @if($lead->getFirstMedia('featured'))
                    <div style="overflow:hidden; max-height:320px;">
                        <img src="{{ $lead->getFirstMediaUrl('featured') }}" alt="{{ $lead->title }}"
                             style="width:100%; height:320px; object-fit:cover; display:block; transition:transform 0.3s;"
                             onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                    </div>
                    @endif
                    <div style="padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
                        <div>
                            @php $leadCat = $lead->taxonomies->where('type','category')->first() @endphp
                            @if($leadCat)
                            <a href="/category/{{ $leadCat->slug }}" class="category-badge" style="margin-bottom:12px; display:inline-flex; text-decoration:none;">{{ $leadCat->name }}</a>
                            @endif
                            <a href="/{{ $lead->content_type }}/{{ $lead->slug }}" style="text-decoration:none;">
                                <h2 class="news-headline news-card-title" style="font-size:1.6rem; margin-bottom:12px; margin-top:8px; transition:color 0.15s;">
                                    {{ $lead->title }}
                                </h2>
                            </a>
                            @if($lead->excerpt)
                            <p style="color:#4b5563; font-size:14px; line-height:1.7; margin-bottom:16px;">{{ Str::limit($lead->excerpt, 160) }}</p>
                            @endif
                        </div>
                        <div class="article-meta" style="display:flex; align-items:center; gap:8px; padding-top:12px; border-top:1px solid #f3f4f6;">
                            <span style="font-weight:600; color:#374151;">{{ $lead->author->name ?? 'Editor' }}</span>
                            <span>·</span>
                            <span>{{ $lead->published_at?->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- Secondary stories (2 col) --}}
            @if($secondary->count())
            <div style="margin-bottom:24px;">
                <div class="section-title">Latest News</div>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;" class="news-secondary-grid">
                    @foreach($secondary as $post)
                    <article style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
                        @if($post->getFirstMedia('featured'))
                        <div style="overflow:hidden; height:180px;">
                            <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                                 style="width:100%; height:180px; object-fit:cover; display:block; transition:transform 0.3s;"
                                 onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                        </div>
                        @else
                        <div style="height:8px; background:var(--news-red);"></div>
                        @endif
                        <div style="padding:16px;">
                            @php $cat = $post->taxonomies->where('type','category')->first() @endphp
                            @if($cat)
                            <a href="/category/{{ $cat->slug }}" class="category-badge" style="font-size:10px; margin-bottom:8px; display:inline-flex; text-decoration:none;">{{ $cat->name }}</a>
                            @endif
                            <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                                <h3 class="news-headline news-card-title" style="font-size:1.05rem; margin:8px 0;">{{ $post->title }}</h3>
                            </a>
                            <p class="article-meta">{{ $post->published_at?->diffForHumans() }} · {{ $post->author->name ?? 'Editor' }}</p>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- More news (list style) --}}
            @if($more->count())
            <div>
                <div class="section-title">More News</div>
                <div style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
                    @foreach($more as $i => $post)
                    <article style="display:flex; gap:16px; padding:16px; {{ !$loop->last ? 'border-bottom:1px solid #f3f4f6;' : '' }} align-items:flex-start;">
                        <span style="font-size:28px; font-weight:900; color:#e5e7eb; font-family:'Playfair Display',serif; line-height:1; flex-shrink:0; width:32px; text-align:center;">{{ $loop->iteration }}</span>
                        @if($post->getFirstMedia('featured'))
                        <div style="width:100px; height:72px; flex-shrink:0; overflow:hidden; border-radius:6px;">
                            <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                                 style="width:100%; height:100%; object-fit:cover;">
                        </div>
                        @endif
                        <div style="flex:1; min-width:0;">
                            @php $cat = $post->taxonomies->where('type','category')->first() @endphp
                            @if($cat)
                            <a href="/category/{{ $cat->slug }}" class="category-badge" style="font-size:10px; margin-bottom:6px; display:inline-flex; text-decoration:none;">{{ $cat->name }}</a>
                            @endif
                            <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                                <h4 class="news-card-title" style="font-size:14px; font-weight:700; margin:4px 0;">{{ $post->title }}</h4>
                            </a>
                            <p class="article-meta">{{ $post->published_at?->diffForHumans() }}</p>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        {{-- Right sidebar --}}
        <aside>
            {{-- Categories --}}
            @if($categories->count())
            <div style="margin-bottom:24px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px;">
                <div class="section-title">Topics</div>
                <div style="display:flex; flex-direction:column; gap:2px;">
                    @foreach($categories as $cat)
                    <a href="/category/{{ $cat->slug }}"
                       style="display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:6px; text-decoration:none; color:#374151; font-size:13px; font-weight:600; transition:all 0.15s;"
                       onmouseover="this.style.background='var(--news-red-bg)'; this.style.color='var(--news-red)'" onmouseout="this.style.background='transparent'; this.style.color='#374151'">
                        <span>{{ $cat->name }}</span>
                        <span style="background:#f3f4f6; color:#6b7280; font-size:11px; font-weight:700; padding:2px 7px; border-radius:10px;">{{ $cat->posts_count }}</span>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Tags --}}
            @if($homeTags->count())
            <div style="margin-bottom:24px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px;">
                <div class="section-title">Tags</div>
                <div style="display:flex; flex-wrap:wrap; gap:6px;">
                    @foreach($homeTags as $tag)
                    <a href="/tag/{{ $tag->slug }}"
                       style="display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#f3f4f6; color:#374151; font-size:12px; font-weight:600; border-radius:20px; text-decoration:none; transition:all 0.15s;"
                       onmouseover="this.style.background='var(--news-red)'; this.style.color='#fff'" onmouseout="this.style.background='#f3f4f6'; this.style.color='#374151'">
                        #{{ $tag->name }}
                        <span style="font-size:10px; color:#9ca3af; font-weight:400;">{{ $tag->posts_count }}</span>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Trending (sidebar posts) --}}
            @if($sidebar->count())
            <div style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px;">
                <div class="section-title">Trending</div>
                <div style="display:flex; flex-direction:column; gap:0;">
                    @foreach($sidebar as $i => $post)
                    <article style="display:flex; gap:12px; padding:12px 0; {{ !$loop->last ? 'border-bottom:1px solid #f9fafb;' : '' }} align-items:flex-start;">
                        <span style="font-size:20px; font-weight:900; color:var(--news-red-light); font-family:'Playfair Display',serif; line-height:1; flex-shrink:0; width:24px;">{{ $loop->iteration }}</span>
                        <div style="flex:1; min-width:0;">
                            <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                                <p style="font-size:13px; font-weight:700; color:#111; line-height:1.4; margin:0 0 4px;"
                                   onmouseover="this.style.color='var(--news-red)'" onmouseout="this.style.color='#111'">{{ $post->title }}</p>
                            </a>
                            <p class="article-meta">{{ $post->published_at?->diffForHumans() }}</p>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>
            @endif
        </aside>
    </div>

    {{-- Category sections --}}
    @if($categories->count())
    @foreach($categories->take(3) as $featCat)
    @php
        $catPosts = AleshaPost::ofType('post')->published()
            ->with('taxonomies','author')
            ->whereHas('taxonomies', fn($q) => $q->where('taxonomies.id', $featCat->id))
            ->latest('published_at')->take(4)->get();
    @endphp
    @if($catPosts->count())
    <div style="margin-top:32px;">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
            <div class="section-title" style="margin-bottom:0;">{{ $featCat->name }}</div>
            <a href="/category/{{ $featCat->slug }}" style="font-size:12px; color:var(--news-red); font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em;">See All →</a>
        </div>
        <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px;" class="news-cat-grid">
            @foreach($catPosts as $post)
            <article style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
                @if($post->getFirstMedia('featured'))
                <div style="height:140px; overflow:hidden;">
                    <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                         style="width:100%; height:140px; object-fit:cover; display:block; transition:transform 0.3s;"
                         onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                </div>
                @else
                <div style="height:6px; background:var(--news-red);"></div>
                @endif
                <div style="padding:12px;">
                    <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                        <h4 class="news-card-title" style="font-size:13px; font-weight:700; line-height:1.4; margin:0 0 8px;">{{ $post->title }}</h4>
                    </a>
                    <p class="article-meta">{{ $post->published_at?->diffForHumans() }}</p>
                </div>
            </article>
            @endforeach
        </div>
    </div>
    @endif
    @endforeach
    @endif

    @else
    <div style="text-align:center; padding:80px 0; color:#9ca3af;">
        <p style="font-size:18px; font-weight:600;">No news articles yet.</p>
    </div>
    @endif
</div>

<style>
@media (max-width: 768px) {
    .news-main-grid { grid-template-columns: 1fr !important; }
    .news-lead-grid { grid-template-columns: 1fr !important; }
    .news-lead-grid > div:first-child { max-height: 220px !important; }
    .news-secondary-grid { grid-template-columns: 1fr !important; }
    .news-cat-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .news-cat-grid { grid-template-columns: 1fr !important; }
}
</style>
@endsection
