<p class="mb-6 text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
    {{ __('home.latest-comments') }}
</p>

<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
    @foreach ($latestComments as $comment)

        @php
            $isEpisode = $comment->commentable_type == \App\Models\Episode::class;

            if ($isEpisode) {
                $item = cache()->rememberForever(
                    'commentEpisode' . $comment->commentable_id,
                    fn () => \App\Models\Episode::with('gallery')
                        ->find($comment->commentable_id)
                );

                $url = route('hentai.index', ['title' => $item->slug]);
                $title = $item->title . ' - ' . $item->episode;
                $thumbnail = $item->gallery->first()?->thumbnail_url ?? $item->cover_url;
                $cover = $item->cover_url;
                $resolution = $item->getResolution();
            } else {
                $item = cache()->rememberForever(
                    'commentHentai' . $comment->commentable_id,
                    fn () => \App\Models\Hentai::with('gallery', 'episodes')
                        ->find($comment->commentable_id)
                );

                $episode = $item->episodes->first();

                $url = route('hentai.index', ['title' => $item->slug]);
                $title = $episode?->title;
                $thumbnail = $item->gallery->first()?->thumbnail_url ?? $episode?->cover_url;
                $cover = $episode?->cover_url;
                $resolution = $episode?->getResolution();
            }
        @endphp

        <div
            class="group overflow-hidden rounded-2xl border dark:border-neutral-800 border-neutral-300 dark:bg-neutral-900 dark:hover:border-neutral-700 hover:border-neutral-400 hover:shadow-2xl hover:shadow-black/30 shadow-md transition-all duration-300 hover:-translate-y-1">

            <div class="flex flex-col md:flex-row">

                {{-- Thumbnail --}}
                <a href="{{ $url }}"
                    class="relative w-full md:w-72 shrink-0 overflow-hidden">

                    {{-- Desktop Thumbnail --}}
                    <img
                        src="{{ $thumbnail }}"
                        alt="{{ $title }}"
                        loading="lazy"
                        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 aspect-video"
                    >

                    {{-- Resolution Badge --}}
                    <div class="absolute right-2 top-2 rounded-lg bg-black/70 px-2 py-1 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/10">
                        {{ $resolution }}
                    </div>

                    {{-- Gradient Overlay --}}
                    <div
                        class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-4">
                        <p class="line-clamp-1 text-sm font-medium text-white">
                            {{ $title }}
                        </p>
                    </div>
                </a>

                {{-- Comment Content --}}
                <div class="flex-1 p-4 md:p-6 bg-neutral-50 dark:bg-neutral-900">
                    @include('partials.comment', ['comment' => $comment])
                </div>

            </div>
        </div>

    @endforeach
</div>