<script setup>
import { Link } from "@inertiajs/inertia-vue3";
import LandingLayout from "@/Layouts/LandingLayout";
import Hero from "@/components/Landing/Hero";
import OnDemand from "@/components/Landing/OnDemand";
import HowItWorks from "@/components/Landing/HowItWorks";
import Popular from "@/components/Landing/Popular";
import WhyMuhandisin from "@/components/Landing/WhyMuhandisin";
import Guide from "@/components/Landing/Guide";
import Service from "../components/Landing/Service.vue";
import { nextTick, onMounted } from "@vue/runtime-core";

const props = defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
    content: Object,
    engineerServices: Array,
    firmServices: Array,
});

// on mount add the class "no-magnify" to all images in the page
onMounted(() => {
    // vue 3 next tick
    nextTick(() => {
        const images = document.querySelectorAll("img");
        images.forEach((image) => {
            image.classList.add("no-magnify");
        });
    });
});
</script>

<template>
    <LandingLayout title="Welcome">
        <div class="flex flex-col w-full gap-5 overflow-hidden bg-white">
            <!-- <div
                class="relative flex items-start justify-center min-h-[830px] w-screen h-[400px] overflow-hidden pb-5"
            > -->
            <Hero :content="content" />
            <!-- </div> -->
            <OnDemand :content="content" />
            <Popular
                :content="content"
                :engineerServices="engineerServices"
                :firmServices="firmServices"
            />
            <div
                class="container flex flex-col gap-5 pt-4 overflow-hidden max-w-7xl"
            >
                <WhyMuhandisin :content="content" />
                <Guide :content="content" />
            </div>

            <HowItWorks :content="content" />
        </div>
    </LandingLayout>
</template>

<style scoped></style>
