<template>
    <section class="product-brand">
        <img :src="image" :alt="title" />
        <div>
            <h1>{{ title }}</h1>
            <h2>{{ name }}</h2>
            <h3>
                <i class="isax isax-verify"></i>
                <span>{{ category }}</span>
            </h3>
            <p>{{ desc }}</p>
        </div>
        <div>
            <Button v-for="(btn, i) in navigation" :key="i" v-bind="btn" />
            <Swiper v-bind="swiper">
                <SwiperSlide v-for="(item, i) in images" :key="i">
                    <img :src="item.src" />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

<script setup>
import init from "../../initialize/brand";
const { swiper, navigation } = init;

defineProps({
    image: { type: String, default: "/images/verity.svg" },
    title: { type: String, default: "VERITY" },
    name: { type: String, default: "وریتی" },
    category: { type: String, default: "محصولات الکترونیکی و دیجیتال" },
    desc: {
        type: String,
        default:
            "برند وریتی مارکی آشنا و شناخته شده در بازار IT کشور است که با در نظر گرفتن نیاز افراد مختلف جامعه همواره تلاش کرده محصولاتی با قیمت مناسب و سطح کیفی بالا را روانه بازار کند. این موضوع باعث استقبال خوب توزیع کنندگان و کاربران لوازم جانبی کامپیوتر و موبایل، از محصولات برند Verity شده است و این امر موجب شده تا بازار فروش خوبی را در داخل کشور به دست آورد. تنوع محصولات وریتی در سه زمینه راهکارهای ذخیره سازی، لوازم جانبی کامپیوتر و لوازم جانبی موبایل است.",
    },
    images: {
        type: Array,
        default: [
            { src: "/images/verity-banner.svg" },
            { src: "/images/verity-banner.svg" },
            { src: "/images/verity-banner.svg" },
            { src: "/images/verity-banner.svg" },
            { src: "/images/verity-banner.svg" },
        ],
    },
});
</script>

<style lang="scss">
.product-brand {
    @apply w-full lg:h-[31.5rem] bg-[#FAFAFA] flex flex-col lg:flex-row gap-2 lg:gap-12 justify-center lg:pt-20 border-b-2 border-[#E5E5E5];

    & > img {
        @apply w-28 h-28 object-contain object-center max-lg:hidden;
    }

    & > div:nth-of-type(1) {
        @apply flex flex-col gap-1 lg:gap-3 max-lg:items-center max-lg:p-6;

        h1 {
            @apply text-[#333333] text-[2em] leading-7 mt-3 font-bold font-vazir;
        }

        h2 {
            @apply text-[#999999] text-xl font-medium font-vazir;
        }

        h3 {
            @apply flex items-center gap-2 text-primary-600;

            i {
                @apply text-2xl;
            }

            span {
                @apply font-medium font-vazir leading-normal;
            }
        }

        p {
            @apply w-full lg:w-[47.9rem] text-right text-[#333333] text-sm leading-5 max-lg:text-justify lg:text-lg font-normal font-vazir lg:leading-[2.3rem] mt-4;
        }
    }

    & > div:nth-of-type(2) {
        @apply flex gap-3 h-max w-full lg:w-max max-w-full max-lg:order-first;

        .swiper {
            @apply w-full max-w-[25rem] h-60 lg:h-[22rem] mx-0;

            .swiper-wrapper {
                @apply w-full lg:w-max h-max;
                .swiper-slide {
                    @apply w-max h-max lg:rounded-[0.6rem] overflow-hidden;
                    img {
                        @apply w-full h-60 lg:w-[25rem] lg:h-80 object-cover;
                    }
                }
            }

            .swiper-pagination {
                @apply -bottom-1.5 max-lg:hidden;

                .swiper-pagination-bullet {
                    @apply w-7 rounded-full mx-1.5 bg-[#E5E5E5] opacity-100;
                }

                .swiper-pagination-bullet-active {
                    @apply bg-[#47B556];
                }
            }
        }

        button {
            @apply self-center -mt-3 text-[2.5em] last-of-type:order-last max-lg:hidden;
        }
    }
}
</style>
