@extends('layouts.app')

@section('meta_title', 'Streaming Video HD Gratis dan Terbaru')
@section('meta_description', 'Nonton video streaming HD terbaru dan gratis dengan kategori lengkap serta update harian.')
@section('canonical', url('/'))

@push('head')
<style>
    .main-nav ul,
    .footer-nav ul,
    .category-list,
    .footer-categories {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .main-nav a {
        display: inline-block;
        padding: 9px 14px;
        border: 1px solid #203152;
        border-radius: 999px;
        background: #13213b;
        color: #d8e4ff;
        font-size: 0.94rem;
    }

    .main-nav a:hover {
        border-color: #3f6cc8;
        background: #1a2b4b;
    }

    .hero {
        margin: 10px 0 24px;
        padding: 20px;
        border: 1px solid #223356;
        border-radius: 14px;
        background: linear-gradient(120deg, #13213c, #182d51);
    }

    .hero p {
        margin: 8px 0 0;
        color: #9fb0d5;
        max-width: 760px;
    }

    .section-block {
        margin-top: 24px;
        padding: 16px;
        border: 1px solid #1f2f50;
        border-radius: 12px;
        background: #101a2f;
    }

    .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
    }

    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 14px;
    }

    .video-card {
        border: 1px solid #223356;
        border-radius: 10px;
        overflow: hidden;
        background: #16223c;
    }

    .video-card a {
        display: block;
        color: #e7edfa;
    }

    .video-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        background: #0f1a31;
    }

    .video-meta {
        padding: 10px;
    }

    .video-meta h3 {
        margin: 0 0 8px;
        font-size: 0.98rem;
    }

    .duration {
        margin: 0;
        color: #9caacf;
        font-size: 0.88rem;
    }

    .category-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 8px;
    }

    .category-list a {
        display: block;
        border: 1px solid #223356;
        border-radius: 8px;
        background: #15233f;
        padding: 9px 10px;
        color: #dbe6ff;
    }

    .category-list .count {
        color: #9aa9cc;
        font-size: 0.84rem;
    }

    .seo-copy p {
        margin: 0 0 10px;
        color: #b7c3df;
        max-width: 950px;
    }

    .footer-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 14px;
    }

    .footer-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }

    .footer-categories a {
        display: inline-block;
        padding: 7px 10px;
        border: 1px solid #2a3d65;
        border-radius: 999px;
        color: #d0ddfb;
    }

    .copyright {
        margin: 0;
        color: #8fa2ca;
        font-size: 0.9rem;
    }

    .empty-state {
        margin: 0;
        color: #9fb0d4;
    }

    .pagination {
        margin-top: 14px;
    }

    .pagination svg { max-width: 16px; }
</style>
@endpush

@section('header_nav')
    <nav class="main-nav" aria-label="Navigasi utama">
        <ul>
            <li><a href="{{ url('/') }}">Home</a></li>
            <li><a href="{{ url('/terbaru') }}">Video Terbaru</a></li>
            <li><a href="{{ url('/populer') }}">Video Populer</a></li>
            <li><a href="{{ url('/kategori') }}">Kategori</a></li>
            <li><a href="{{ url('/sedang-di-tonton') }}">Sedang Di Tonton</a></li>
            <li><a href="{{ url('/media') }}">Koleksi Foto</a></li>
        </ul>
    </nav>
@endsection

@section('content')
        <section class="hero" aria-label="Hero utama">
        <h1>Streaming Video HD Gratis dan Terbaru</h1>
            <p>Temukan koleksi video streaming HD terbaru dan gratis dengan navigasi cepat, kategori lengkap, serta update konten harian untuk audiens Indonesia dan global.</p>
        </section>

        <section class="section-block" aria-labelledby="latest-videos-heading">
            <div class="section-head">
                <h2 id="latest-videos-heading">Latest Videos</h2>
            </div>
            <div class="video-grid">
                @forelse($latestVideos as $video)
                    <article class="video-card">
                        <a href="{{ route('video.show', $video->slug) }}">
                            <img src="{{ $video->thumbnail }}" alt="{{ $video->title }}" loading="lazy" width="320" height="180">
                        </a>
                        <div class="video-meta">
                            <h3><a href="{{ route('video.show', $video->slug) }}">{{ $video->title }}</a></h3>
                            <p class="duration">Durasi: {{ $video->duration }} detik</p>
                        </div>
                    </article>
                @empty
                    <p class="empty-state">Belum ada video terbaru.</p>
                @endforelse
            </div>

            <div class="pagination">{{ $latestVideos->links() }}</div>
        </section>

        <section class="section-block" aria-labelledby="popular-videos-heading">
            <div class="section-head">
                <h2 id="popular-videos-heading">Popular Videos</h2>
            </div>
            <div class="video-grid">
                @forelse($popularVideos as $video)
                    <article class="video-card">
                        <a href="{{ route('video.show', $video->slug) }}">
                            <img src="{{ $video->thumbnail }}" alt="{{ $video->title }}" loading="lazy" width="320" height="180">
                        </a>
                        <div class="video-meta">
                            <h3><a href="{{ route('video.show', $video->slug) }}">{{ $video->title }}</a></h3>
                            <p class="duration">Durasi: {{ $video->duration }} detik</p>
                        </div>
                    </article>
                @empty
                    <p class="empty-state">Belum ada video populer.</p>
                @endforelse
            </div>
        </section>

        <section class="section-block" aria-labelledby="categories-heading">
            <div class="section-head">
                <h2 id="categories-heading">Categories</h2>
            </div>
            <ul class="category-list">
                @forelse($categories as $category)
                    <li>
                        <a href="{{ route('category.show', $category->slug) }}">
                            {{ $category->name }}
                            <span class="count">({{ $category->videos_count ?? 0 }} video)</span>
                        </a>
                    </li>
                @empty
                    <li>Belum ada kategori.</li>
                @endforelse
            </ul>
        </section>

        <section class="section-block seo-copy" aria-labelledby="seo-text-heading">
            <h2 id="seo-text-heading">Tentang Platform</h2>
            <p>Website ini menyediakan video streaming HD yang bisa ditonton kapan saja dengan akses cepat dan tampilan ringan untuk desktop maupun mobile.</p>
            <p>Kami rutin menghadirkan konten terbaru dari berbagai kategori agar pengguna selalu mendapatkan pilihan tontonan paling update setiap hari.</p>
            <p>Semua video dapat dinikmati gratis dengan struktur halaman yang SEO-friendly sehingga konten lebih mudah ditemukan di mesin pencari.</p>
        </section>
        

    @php
        $footerCategories = $categories instanceof \Illuminate\Pagination\AbstractPaginator
            ? $categories->getCollection()->take(10)
            : collect($categories)->take(10);
    @endphp
@endsection

@section('site_footer')
        <nav class="footer-nav" aria-label="Footer navigation">
            <ul>
                <li><a href="{{ url('/sitemap.xml') }}">Sitemap</a></li>
                <li><a href="{{ url('/privacy-policy') }}">Privacy Policy</a></li>
                <li><a href="{{ url('/dmca') }}">DMCA</a></li>
            </ul>
        </nav>

        <section aria-labelledby="footer-categories-heading">
            <h2 id="footer-categories-heading">Kategori Utama</h2>
            <ul class="footer-categories">
                @foreach($footerCategories as $category)
                    <li>
                        <a href="{{ route('category.show', $category->slug) }}">{{ $category->name }}</a>
                    </li>
                @endforeach
            </ul>
        </section>

        <p class="copyright">&copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
@endsection