<template>
    <section class="amazing-offers">
        <div>
            <aside>
                <h2>
                    <span>{{ $t("amazingOffers") }}</span>
                    <span>{{ $t("asanMarket") }}</span>
                </h2>
                <img src="/images/amazing.svg" />
            </aside>
            <Swiper :slides-per-view="'auto'">
                <SwiperSlide v-for="(product, i) in amazingOffers" :key="i">
                    <ProductCard :data="product" type="main" />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

<script setup>
const { amazingOffers } = inject('data')
</script>

<style lang="scss">
.amazing-offers {
    @apply w-full flex justify-center;
    @apply mt-[2.6rem] lg:mt-[11.3rem];

    &>div {
        @apply max-w-full w-full flex shrink-0 bg-[#F2F2F2] overflow-hidden;
        @apply gap-2.5 pr-2.5 h-max;
        @apply lg:container lg:rounded-2xl lg:pr-[2.6rem] lg:gap-[2.4rem];

        aside {
            @apply bg-[linear-gradient(to_bottom,_#47B556_0%,_#F2F2F200_60%)];
            @apply flex flex-col items-center justify-between;
            @apply relative rounded-[0.6rem] shrink-0 mt-2;
            @apply w-[6.2rem] h-[11.5rem] pt-4 px-2.5;
            @apply lg:w-[11.6rem] lg:h-[20.1rem] lg:my-7 lg:px-5;

            &::before {
                @apply content-['_'] absolute inset-[0.2rem] bg-[#F2F2F2] rounded-lg;
            }

            h2 {
                @apply flex flex-col items-center justify-center z-0 gap-2;

                span {
                    @apply text-center first:text-[#163D22] last:text-primary-600;
                    @apply font-vazir font-black text-base lg:text-3xl;
                }
            }

            img {
                @apply w-[3.4rem] h-[4.3rem] lg:w-[9.6rem] lg:h-[12rem] self-start lg:-mb-20 z-0;
            }
        }

        .swiper {
            @apply w-full h-full rounded-xl relative rtl lg:ltr lg:px-6;

            .swiper-wrapper {
                @apply mt-2 mb-3 lg:my-6 z-0;

                .swiper-slide {
                    @apply h-max w-max ml-[0.3rem] lg:ml-6 first:ml-0 rtl;
                }
            }

            &::before {
                @apply content-['_'] w-6 absolute inset-y-0 -right-6 z-10;
                @apply shadow-[-5px_0px_23px_0px_#00000040] max-lg:hidden;
            }

            &::after {
                @apply content-['_'] w-6 absolute inset-y-0 -left-6 z-10;
                @apply shadow-[5px_0px_23px_0px_#00000040] max-lg:hidden;
            }
        }
    }
}
</style>
