@extends('layouts.public')

@section('content')

    <!-- ردیف ۰: نوار خبر -->
    @if(isset($tickerPosts) && $tickerPosts->isNotEmpty())
        <div class="mb-4">
            <div class="news-ticker-wrapper">
                <span class="ticker-label">آخرین عناوین</span>
                <div class="ticker-text"><span id="typed-strings"></span></div>
            </div>
        </div>
        @php
            $headlines = $tickerPosts->map(function($post) {
                return '<a href="' . route('public.posts.show', $post->slug) . '">' . e($post->title) . '</a>';
            })->all();
        @endphp
    @endif


    <!-- ردیف ۱: گرید اصلی و پربیننده‌ها -->
    <div class="row g-4 mb-4">
        <!-- ستون سمت راست: گرید اصلی اخبار (۹ واحد) -->
        <div class="col-lg-9">
            @if(isset($topGridPosts) && $topGridPosts->count() >= 5)
                <div class="row g-3">
                    <div class="col-lg-8">
                        @include('components.post-card-hero', ['post' => $topGridPosts->first()])
                    </div>
                    <div class="col-lg-4 d-flex flex-column gap-3">
                        @foreach($topGridPosts->slice(1, 2) as $post)
                            @include('components.post-card-medium', ['post' => $post])
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
        <!-- ستون سمت چپ: پربیننده‌ترین‌ها (۳ واحد) -->
        <div class="col-lg-3">
            @if(isset($mostViewedPosts))
                <div class="most-viewed-widget">
                    <h3 class="most-viewed-widget-header">پربیننده‌ترین‌ها</h3>
                    <ul class="most-viewed-widget-list">
                        @foreach($mostViewedPosts as $post)
                            <li class="most-viewed-item">
                                <a href="{{ route('public.posts.show', $post->slug) }}">
                                    <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}">
                                    <span class="title">{{ $post->title }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>


    <!-- ردیف ۲: بخش برگزیده‌ها داخل کادر سفید -->
    @if(isset($trendingPosts) && $trendingPosts->isNotEmpty())
        <div class="content-section-wrapper mb-4">
            <div class="section-heading-horizontal">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>
                </div>
                <h2 class="title mb-0">برگزیده‌ها</h2>
            </div>
            <div class="row g-3">
                @foreach($trendingPosts as $post)
                    <div class="col-lg-2 col-md-4 col-6">
                        @include('components.post-card-horizontal', ['post' => $post])
                    </div>
                @endforeach
            </div>
        </div>
    @endif


    <!-- ردیف ۳: اخبار داغ و آخرین اخبار در یک خط -->
    <div class="row g-4">
        <!-- ستون سمت راست: اخبار داغ -->
        <div class="col-lg-8">
            <div class="content-section-wrapper h-100">
                @if(isset($hotNewsPosts) && $hotNewsPosts->isNotEmpty())
                    <div>
                        <div class="section-heading-horizontal">
                            <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16"><path d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.312 2.5 1 4 1 4-1 0-2 2-2 4 0 2.5 2 5.5 5 5.5zM1 11.5c0 2.5 2 4.5 4 4.5s4-2 4-4.5c0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C6 4 4 .5 2 0c.312 2.5 1 4 1 4-1 0-2 2-2 4z"/></svg></div>
                            <h2 class="title mb-0">اخبار داغ</h2>
                        </div>
                        <div>
                            @foreach($hotNewsPosts as $post)
                                @include('components.post-card-large-list', ['post' => $post])
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <!-- ستون سمت چپ: آخرین اخبار -->
        <div class="col-lg-4">
            <div class="content-section-wrapper h-100">
                @if(isset($latestPosts) && $latestPosts->isNotEmpty())
                    <div>
                        <div class="section-heading-horizontal">
                            <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-newspaper" viewBox="0 0 16 16"><path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z"/><path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z"/></svg></div>
                            <h2 class="title mb-0">آخرین اخبار</h2>
                        </div>
                        <ul class="news-list">
                            @foreach($latestPosts as $post)
                                <li class="news-list-item">
                                    <a href="{{ route('public.posts.show', $post->slug) }}">
                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0z"/></svg>
                                        {{ $post->title }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @push('scripts')
        {{-- ... اسکریپت نوار خبر بدون تغییر ... --}}
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                @if(isset($headlines) && !empty($headlines))
                var options = {
                    strings: @json($headlines),
                    typeSpeed: 60, backSpeed: 30, backDelay: 2500,
                    startDelay: 500, loop: true, smartBackspace: true,
                };
                new Typed('#typed-strings', options);
                @endif
            });
        </script>
    @endpush

@endsection