<template>
    <div
        class="relative flex flex-col items-center mb-10 text-center place-items-center"
    >
        <div id="how-it-works" class="absolute -top-40"></div>
        <h2 class="mb-3 text-6xl font-semibold text-gray-300">
            {{ $t("footer.how_it_works") }}!
        </h2>
        <h4 class="text-lg font-medium text-blue-300">
            {{ content["how_subtitle_" + $i18n.locale] }}
        </h4>
        <div class="w-full tabs">
            <TabGroup class="w-full" as="div">
                <TabList
                    class="container flex flex-row justify-center w-full max-w-xl gap-3 px-3 py-3 mt-5 tabBar mb-14"
                >
                    <Tab
                        v-slot="{ selected }"
                        class="flex flex-1 focus:outline-transparent"
                    >
                        <button
                            :class="[
                                'flex-1 h-10 rounded-lg text-center  font-medium focus:outline-transparent',
                                selected ? 'selectedTabButton' : 'tabButton',
                            ]"
                        >
                            {{ $t("landing.engineers") }}
                        </button>
                    </Tab>
                    <Tab
                        v-slot="{ selected }"
                        class="flex flex-1 focus:outline-transparent"
                    >
                        <button
                            :class="[
                                'flex-1 h-10 rounded-lg text-center  font-medium focus:outline-transparent',
                                selected ? 'selectedTabButton' : 'tabButton',
                            ]"
                        >
                            {{ $t("landing.firms") }}
                        </button>
                    </Tab>
                    <Tab
                        v-slot="{ selected }"
                        class="flex flex-1 focus:outline-transparent"
                    >
                        <button
                            :class="[
                                'flex-1 h-10 rounded-lg text-center  font-medium focus:outline-transparent',
                                selected ? 'selectedTabButton' : 'tabButton',
                            ]"
                        >
                            {{ $t("landing.clients") }}
                        </button>
                    </Tab>
                </TabList>
                <TabPanels class="w-full max-w-3xl mx-auto xl:max-w-full">
                    <TabPanel
                        class="grid w-full grid-cols-1 xl:grid-cols-3 gap-7 place-content-center"
                    >
                        <GuidCard
                            v-for="(guide, index) in guides.engineer"
                            :key="index"
                            :cardData="{ ...guide, id: index + 1 }"
                            :last="
                                index === guides.engineer.length - 1 ||
                                index == 2
                            "
                        />
                    </TabPanel>
                    <TabPanel
                        class="grid w-full grid-cols-1 xl:grid-cols-3 gap-7 place-content-center"
                    >
                        <GuidCard
                            v-for="(guide, index) in guides.firm"
                            :key="index"
                            :cardData="{ ...guide, id: index + 1 }"
                            :last="
                                index === guides.firm.length - 1 || index == 2
                            "
                        />
                    </TabPanel>
                    <TabPanel
                        class="grid w-full grid-cols-1 xl:grid-cols-3 gap-7 place-content-center"
                    >
                        <GuidCard
                            v-for="(guide, index) in guides.client"
                            :key="index"
                            :cardData="{ ...guide, id: index + 1 }"
                            :last="
                                index === guides.client.length - 1 || index == 2
                            "
                        />
                    </TabPanel>
                </TabPanels>
            </TabGroup>
        </div>
    </div>
</template>

<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
import GuidCard from "./GuidCard.vue";
defineProps({
    content: Object,
});
const guides = {
    engineer: [
        {
            title: "how_it_works.engineer.1.title",
            subTitle: "how_it_works.engineer.1.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/createProfile.svg",
        },
        {
            title: "how_it_works.engineer.2.title",
            subTitle: "how_it_works.engineer.2.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/addService.svg",
        },
        {
            title: "how_it_works.engineer.3.title",
            subTitle: "how_it_works.engineer.3.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/sendProposal.svg",
        },
        {
            title: "how_it_works.engineer.4.title",
            subTitle: "how_it_works.engineer.2.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/acceptProposal.svg",
        },
        {
            title: "how_it_works.engineer.5.title",
            subTitle: "how_it_works.engineer.3.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/completeMillestone.svg",
        },
    ],
    firm: [
        {
            title: "how_it_works.firm.1.title",
            subTitle: "how_it_works.firm.1.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/createProfile.svg",
        },
        {
            title: "how_it_works.firm.2.title",
            subTitle: "how_it_works.firm.2.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/addEmployee.svg",
        },
        {
            title: "how_it_works.firm.3.title",
            subTitle: "how_it_works.firm.3.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/sendProposal.svg",
        },
        {
            title: "how_it_works.firm.4.title",
            subTitle: "how_it_works.firm.4.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/acceptProposal.svg",
        },
        {
            title: "how_it_works.firm.5.title",
            subTitle: "how_it_works.firm.5.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/completeMillestone.svg",
        },
        {
            title: "how_it_works.firm.6.title",
            subTitle: "how_it_works.firm.6.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/completeMillestone.svg",
        },
    ],
    client: [
        {
            title: "how_it_works.client.1.title",
            subTitle: "how_it_works.client.1.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/createProfile.svg",
        },
        {
            title: "how_it_works.client.2.title",
            subTitle: "how_it_works.client.2.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/addService.svg",
        },
        {
            title: "how_it_works.client.3.title",
            subTitle: "how_it_works.client.3.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/sendProposal.svg",
        },
        {
            title: "how_it_works.client.4.title",
            subTitle: "how_it_works.client.4.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/acceptProposal.svg",
        },
        {
            title: "how_it_works.client.5.title",
            subTitle: "how_it_works.client.5.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/completeMillestone.svg",
        },
        {
            title: "how_it_works.client.6.title",
            subTitle: "how_it_works.client.6.subtitle",
            imgUrl: "https://muhandisin.s3.eu-central-1.amazonaws.com/assets/images/completeMillestone.svg",
        },
    ],
};
</script>

<style>
.tabBar {
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.tabButton {
    background: #ebf0fe;
    color: #29419b;
}
.selectedTabButton {
    background: #29419b;
    color: #ffffff;
}
</style>
