@extends('layouts.app')

@section('content')
<div class="space-y-12 pb-12">
    <div class="relative h-[70vh] bg-gradient-to-r from-black to-transparent">
        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{ Storage::url($featured->first()->banner ?? '') }}');"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent"></div>
        <div class="relative container mx-auto px-4 h-full flex items-end pb-12">
            <div>
                <h1 class="text-5xl font-bold">{{ $featured->first()->title ?? '' }}</h1>
                <p class="text-gray-300 mt-2 max-w-2xl">{{ Str::limit($featured->first()->description ?? '', 150) }}</p>
                <a href="{{ route('content.show', $featured->first()->slug ?? '#') }}" class="inline-block mt-4 bg-red-600 px-6 py-2 rounded-lg hover:bg-red-700">Watch Now</a>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold mb-4">Featured</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($featured as $item)
                <a href="{{ route('content.show', $item->slug) }}" class="group">
                    <div class="rounded-lg overflow-hidden">
                        <img src="{{ Storage::url($item->poster) }}" class="w-full aspect-[2/3] object-cover group-hover:scale-105 transition duration-300">
                    </div>
                    <p class="mt-1 text-sm truncate">{{ $item->title }}</p>
                </a>
            @endforeach
        </div>
    </div>

    <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold mb-4">Trending Now</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($trending as $item)
                <a href="{{ route('content.show', $item->slug) }}" class="group">
                    <div class="rounded-lg overflow-hidden">
                        <img src="{{ Storage::url($item->poster) }}" class="w-full aspect-[2/3] object-cover group-hover:scale-105 transition duration-300">
                    </div>
                    <p class="mt-1 text-sm truncate">{{ $item->title }}</p>
                </a>
            @endforeach
        </div>
    </div>

    <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold mb-4">Latest Episodes</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($latestEpisodes as $ep)
                <a href="{{ route('watch', ['content' => $ep->season->content->slug, 'episode' => $ep->id]) }}" class="group">
                    <div class="relative rounded-lg overflow-hidden">
                        <img src="{{ Storage::url($ep->thumbnail) }}" class="w-full aspect-video object-cover group-hover:scale-105 transition">
                        <div class="absolute bottom-0 left-0 bg-black/70 px-2 py-1 text-xs">Ep {{ $ep->episode_number }}</div>
                    </div>
                    <p class="mt-1 text-sm truncate">{{ $ep->title }}</p>
                    <p class="text-xs text-gray-400">{{ $ep->season->content->title }}</p>
                </a>
            @endforeach
        </div>
    </div>

    <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold mb-4">Dubbed Anime</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($dubbedAnime as $item)
                <a href="{{ route('content.show', $item->slug) }}" class="group">
                    <div class="rounded-lg overflow-hidden">
                        <img src="{{ Storage::url($item->poster) }}" class="w-full aspect-[2/3] object-cover group-hover:scale-105 transition duration-300">
                    </div>
                    <p class="mt-1 text-sm truncate">{{ $item->title }}</p>
                </a>
            @endforeach
        </div>
    </div>
</div>
@endsection