@extends('layouts.app')

@section('title', $appSettings['home_seo_title'] ?: 'Free Content Download')
@section('meta_description', $appSettings['home_seo_description'] ?: 'Browse latest and top downloaded content by category.')
@section('meta_keywords', $appSettings['home_seo_keywords'] ?: 'free ringtone, sound effect, wallpaper, meme download')
@section('canonical', route('frontend.home'))

@section('content')
    @forelse ($latestByType as $section)
        <section class="mb-10">
            <div class="mb-4 flex items-center justify-between gap-3">
                <h1 class="text-2xl font-bold sm:text-3xl">Latest {{ $section['label'] }}</h1>
                <div class="flex items-center gap-3">
                    <span class="rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-600">
                        Showing {{ $section['items']->count() }} items
                    </span>
                    <a href="{{ route('frontend.latest.type', $section['type']) }}" class="text-sm font-medium text-sky-700 hover:text-sky-800">View All</a>
                </div>
            </div>
            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ($section['items'] as $ringtone)
                    @include('frontend.partials.content-card', ['ringtone' => $ringtone])
                @endforeach
            </div>
        </section>
    @empty
        <section class="mb-10">
            <h1 class="text-3xl font-bold mb-4">Latest Content</h1>
            <p class="rounded-xl border border-slate-200 bg-white p-4 text-slate-600">No content yet.</p>
        </section>
    @endforelse

    <section>
        <div class="mb-4 flex items-center justify-between">
            <h2 class="text-2xl font-bold">Categories</h2>
            <a href="{{ route('frontend.categories') }}" class="text-sm font-medium text-sky-700 hover:text-sky-800">View All</a>
        </div>
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @forelse ($parentCategories as $category)
                <a href="{{ route('frontend.category.show', ['path' => $category->slug_path]) }}" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm hover:border-sky-200">
                    <p class="font-semibold">{{ $category->name }}</p>
                </a>
            @empty
                <p class="text-sm text-slate-600">No categories found.</p>
            @endforelse
        </div>
    </section>
@endsection