<script setup>
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px

const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};

// Attach event listener on component mount
onMounted(() => {
    window.addEventListener('resize', checkIfMobile);
});

// Detach event listener on component unmount
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
});
</script>

<template>
    <VRow>
        <VCol cols="12" md="12">
            <VCard>
                <VContainer>
                    <VRow class="mb-4 mt-4">
                        <VCol cols="12" md="6" :class="{ 'border-r': !isMobile }">
                            <h4>Get in touch with us</h4>
                            <VRow class="mt-3" :class="{ 'border-b': isMobile }">
                                <VCol cols="12" md="3" class="pb-0">
                                    <p class="mb-0 text-black">Text:</p>
                                </VCol>
                                <VCol cols="12" md="9" class="pb-0">
                                    <tel href="sms:+1241231324" class="float-right text-red"><b>(124)
                                            123-1324</b></tel>
                                </VCol>
                                <VCol cols="12" md="3" class="pb-0">
                                    <p class="mb-0 text-black">Phone:</p>
                                </VCol>
                                <VCol cols="12" md="9" class="pb-0">
                                    <a href="tel:+1241231324" class="float-right text-red"><b>(124) 123-1324</b></a>
                                </VCol>
                                <VCol cols="12" md="12">
                                    <p>Business hours are</p>
                                    <p>Monday - Sunday, 8AM - 8PM EST</p>
                                </VCol>
                            </VRow>
                        </VCol>
                        <VCol cols="12" md="6">

                            <h4>Address</h4>
                            <VRow class="mt-3">
                                <VCol cols="12" md="12">
                                    <p class="mb-0">
                                        809 Westmere Ave, Suite A <br>Charlotte, NC 28208
                                    </p>
                                </VCol>
                            </VRow>
                        </VCol>
                    </VRow>
                    <VRow class="pt-4 border-t">
                        <VCol cols="12" md="4"></VCol>
                        <VCol cols="12" md="4">
                            <p>
                                <RouterLink class="text-primary" to="/">
                                    <span class="text-black">Terms And Conditions</span>
                                </RouterLink>
                                <RouterLink class="text-primary ml-4" to="/">
                                    <span class="text-black">Privacy Policy</span>
                                </RouterLink>
                            </p>
                            <p>
                                <RouterLink class="text-primary" to="/">
                                    <span class="text-black"> Refund Practices</span>
                                </RouterLink>
                            </p>
                            <p>
                                <RouterLink class="text-primary " to="/">
                                    <span class="text-black">Refund Policy</span>
                                </RouterLink>
                            </p>

                        </VCol>
                        <VCol cols="12" md="4">
                            <p class="text-black">809 Westmere Ave, Suite A, Charlotte, NC 28208</p>
                            <p>
                                <span><b>Phone: </b></span> &nbsp;
                                <span>
                                    <a href="tel:+1241231324" class="text-red">
                                        <b>(124) 123-1324</b>
                                    </a>
                                </span>
                            </p>
                            <p>
                                <span><b>Text: </b></span> &nbsp;
                                <span>
                                    <a href="tel:+1241231324" class="text-red">
                                        <b>(124) 123-1324</b>
                                    </a>
                                </span>
                            </p>
                        </VCol>
                    </VRow>
                </VContainer>
            </VCard>
        </VCol>
    </VRow>
</template>
<style>
.border-r {
    border-right: 1px solid silver;
}
</style>
