<template>
    <section class="bg-blue-100 py-28">
        <div class="container max-w-[1440px]">
            <div class="max-w-7xl">
                <div class="mb-16">
                    <h2
                        class="text-center text-[42px] md:text-6xl text-gray-300 mb-3 font-semibold"
                    >
                        {{ content["services_header_" + $i18n.locale] }}
                    </h2>
                    <p
                        class="font-medium text-xl text-center text-blue-300 max-w-[660px] mx-auto"
                    >
                        {{ content["services_subtitle_" + $i18n.locale] }}
                    </p>
                </div>
            </div>
            <div
                class="container flex flex-col items-start justify-between gap-2 mb-6 md:items-center max-w-7xl md:flex-row"
            >
                <p class="text-2xl font-semibold text-gray-300">
                    {{ $t("Register.engineer_popular_services") }}
                </p>
                <Button
                    buttonStyle="white"
                    size="md"
                    :href="route('services.index')"
                >
                    <span
                        class="flex items-center justify-center gap-2 text-sm font-medium text-blue-300"
                    >
                        {{ $t("Register.browse_all_services") }}
                        <svg
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            class="rtl:rotate-180"
                        >
                            <path
                                d="M2.83008 9.79565H15.2051"
                                stroke="#29419B"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                            <path
                                d="M10.1426 4.73315L15.2051 9.79565L10.1426 14.8582"
                                stroke="#29419B"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </span>
                </Button>
            </div>
            <swiper
                :navigation="true"
                :breakpoints="breakpoints"
                class="relative mb-20"
                ref="engineer_swiper"
                :dir="'rtl'"
            >
                <swiper-slide
                    v-for="service in engineerServices"
                    :key="service.id"
                >
                    <Service :service="service" />
                </swiper-slide>
                <template v-slot:container-start>
                    <div class="absolute left-0 z-50 h-full"></div>
                </template>
                <template v-slot:container-end>
                    <!-- <div
                        class="absolute top-0 right-0 z-40 hidden h-full md:block"
                    >
                        <div
                            class="w-40 h-full bg-gradient-to-r from-transparent to-blue-100"
                        ></div>
                        
                    </div> -->
                </template>
            </swiper>
            <div
                class="container flex flex-col items-start justify-between gap-2 mb-6 md:items-center max-w-7xl md:flex-row"
            >
                <p class="text-2xl font-semibold text-gray-300">
                    {{ $t("Register.firm_popular_services") }}
                </p>
                <Button
                    buttonStyle="white"
                    size="md"
                    :href="route('services.index')"
                >
                    <span
                        class="flex items-center justify-center gap-2 text-sm font-medium text-blue-300"
                    >
                        {{ $t("Register.browse_all_services") }}
                        <svg
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            class="rtl:rotate-180"
                        >
                            <path
                                d="M2.83008 9.79565H15.2051"
                                stroke="#29419B"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                            <path
                                d="M10.1426 4.73315L15.2051 9.79565L10.1426 14.8582"
                                stroke="#29419B"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </span>
                </Button>
            </div>
            <swiper
                :dir="'rtl'"
                :navigation="true"
                :breakpoints="breakpoints"
                class="relative"
                ref="engineer_swiper"
            >
                <swiper-slide v-for="service in firmServices" :key="service.id">
                    <Service :service="service" />
                </swiper-slide>
                <template v-slot:container-start>
                    <div class="absolute left-0 z-50 h-full"></div>
                </template>
                <template v-slot:container-end>
                    <!-- <div
                        class="absolute top-0 right-0 z-40 hidden h-full md:block"
                    >
                        <div
                            class="w-40 h-full bg-gradient-to-r from-transparent to-blue-100"
                        ></div>
                        
                    </div> -->
                </template>
            </swiper>
        </div>
    </section>
</template>

<script>
import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
import SwiperCore, { Navigation } from "swiper/core";
import Service from "./Service.vue";
import "swiper/css";
import "swiper/css/navigation";
import Button from "@/Jetstream/Button.vue";
SwiperCore.use([Navigation]);

export default {
    props: {
        content: Object,
        engineerServices: Array,
        firmServices: Array,
    },
    components: {
        Swiper,
        SwiperSlide,
        Service,
        Button,
    },
    data() {
        return {
            swiper: null,
            breakpoints: {
                320: {
                    slidesPerView: 1.2,
                    spaceBetween: 10,
                },
                680: {
                    slidesPerView: 2,
                    spaceBetween: 15,
                },
                1000: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                1440: {
                    slidesPerView: 4,
                    spaceBetween: 25,
                },
            },
        };
    },
    methods: {
        next() {
            this.swiper.slideNext();
        },
        prev() {
            this.swiper.slidePrev();
        },
    },
    mounted() {
        this.swiper = this.$refs["engineer_swiper"];
    },
};
</script>

<style></style>
