<x-app-layout>
    <div class="container my-24 mx-auto md:px-6 z-10 relative">
        <section class="mb-32 text-center">
            <div class="flex justify-center pb-10">
                <img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe Logo" />
            </div>
            <div class="grid md:grid-cols-5 lg:gap-x-12">
                <div class="mb-12 md:mb-0">
                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
                        <i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i>
                    </div>
                    <h5 class="text-lg font-medium  dark:text-neutral-300">
                        total views
                    </h5>
                </div>
                <div class="mb-12 md:mb-0">
                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
                        <i class="fa-solid fa-calendar-days text-3xl"> {{ number_format($monthlyCount) }}</i>
                    </div>
                    <h5 class="text-lg font-medium  dark:text-neutral-300">
                        views the last 30 days
                    </h5>
                </div>
                <div class="mb-12 md:mb-0">
                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
                        <i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i>
                    </div>
                    <h5 class="text-lg font-medium  dark:text-neutral-300">
                        episodes on this site
                    </h5>
                </div>
                <div class="mb-12 md:mb-0">
                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
                        <i class="fa-solid fa-list text-3xl"> {{ $hentaiCount }}</i>
                    </div>
                    <h5 class="text-lg font-medium  dark:text-neutral-300">
                        hentais on this site
                    </h5>
                </div>
                <div class="mb-12 md:mb-0">
                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
                        <i class="fa-solid fa-clock text-3xl"> {{ number_format($viewCount * 6) }}</i>
                    </div>
                    <h5 class="text-lg font-medium  dark:text-neutral-300">
                    estimated minutes of watch time
                    </h5>
                </div>
            </div>
        </section>
        <p class="text-center text-black/40 dark:text-white/40">Cached for 60 Minutes</p>
    </div>
</x-app-layout>
