@page "/"
@inject ProductAPIConsumer productService
@inject CategoryAPIConsumer categoryService


<!-- Carousel Section -->
<div class="h-screen w-full">
    @if (CarouselData != null && CarouselData.Any())
    {
        <Carousal Data="CarouselData"></Carousal>
    }
</div>

<!-- Random Products Section -->

<section class="flex flex-col container px-6 py-20 mx-auto gap-20 dark:bg-gray-900">

    <h1 class=" font-semibold text-center capitalize dark:text-white text-white text-6xl">@Loc["Production_Lines"]
    </h1>

    <div class="grid grid-cols-2 gap-5 flex-wrap overflow-x-scroll">
        @foreach (var bundle in RandomBundles)
        {
            <BundleComp Bundle="bundle"></BundleComp>
        }
    </div>

    <div class="flex flex-row w-full mx-auto ">
        <a href="/shop?IsBundle=true" class="btn btn-primary mx-auto">@Loc["See_More"]</a>
    </div>

</section>




<section class=" flex flex-col container px-6 py-20 mx-auto gap-20 dark:bg-gray-900 ">

    <h1 class=" font-semibold text-center capitalize dark:text-white text-white text-6xl">@Loc["Our_Categories"]
    </h1>

    <div class="grid grid-cols-4 gap-3 xl:gap-12 lg:grid-cols-4">
        @foreach (var category in RandomCategories.Take(4))
        {
            <CategoryComp Category="category"></CategoryComp>
        }
    </div>

    <div class="flex flex-row w-full mx-auto ">
        <a href="/shop/categories" class="btn btn-primary mx-auto">@Loc["See_More"]</a>
    </div>

</section>



<section class="flex flex-col gap-1">
    <h2 class="text-center text-5xl text-white ">@Loc["Our_Products"]</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-between gap-8 flex-wrap p-7 md:p-14 lg:p-20">
        @foreach (var product in RandomProducts.Take(3))
        {
            <ProductComp4 Product="product"></ProductComp4>
        }
    </div>

    <div class="flex flex-row w-full text-center ">
        <a href="/shop" class="btn btn-primary mx-auto">@Loc["See_More"]</a>
    </div>

</section>




<style>
    ::-webkit-scrollbar {
        width: 0;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-thumb {
        background-color: transparent;
        outline: 1px solid transparent;
    }
</style>

@code {
    List<ProductVM> RandomProducts = new();
    List<ProductVM> RandomBundles = new();
    List<CategoryVM> RandomCategories = new();
    List<(string Text, string ImageUrl)> CarouselData = new();

    protected override async Task OnInitializedAsync()
    {
        // Populate Carousel with Data
        CarouselData = new List<(string Text, string ImageUrl)>
{
(Loc["Welcome_to_Our_Shop"], "https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp"),
(Loc["Best_Quality_Products"], "https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"),
(Loc["Amazing_Deals"], "https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp")
};

        RandomProducts = (await productService.FetchProduct(new ProductFilter { Random = true }, new Pagination()
        {
            PageSize = 3,
            CurrentPage = 1
        })).Item1;

        // Fetch real bundles
        var bundleResult = (await productService.FetchProduct(new ProductFilter { IsBundle = true, Random = true }, new
        Pagination
        {
            PageSize = 4,
            CurrentPage = 1
        })).Item1;
        RandomBundles = bundleResult;

        RandomCategories = (await categoryService.FetchCategory(new CategoryFilter { Random = true }, new Pagination()
        {
            CurrentPage = 1,
            PageSize = 4
        })).Item1;
    }
}