<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
let setting = computed(() => store.state.settings)
let data = computed(() => store.state.mainPage)
let loader = computed(() => store.state.mainPageLoader)
const normal = async()=>{
    store.dispatch('mainPageLoader', true)
    return
    if(data.value.length == 0){
        axios.post('/api/all-page/contacts').then(response => {
            let d = response.data.data
            store.dispatch('mainPage', d)
            store.dispatch('mainPageLoader', false)
        })
    }else{
        axios.post('/api/all-page/contacts').then(response => {
            let d = response.data.data
            store.dispatch('mainPage', d)
            store.dispatch('mainPageLoader', false)
        })
    }
}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})
let form = reactive({
    'name':'',
    'email':'',
    'phone':'',
    'message':'',
    'subject':'',
})
const sendMessage = async()=>{
    axios.post('/api/contactpagesendmessage', form).then(response => {
        form.name = ''
        form.email = ''
        form.phone = ''
        form.message = ''
    })
}
const COntactUs = async()=>{
    route.push('contact-us')
}
</script>
<template>
<main class="main">
    <div class="page-content">
        <div class="container">
             <div class="contact-top-section mt-5">
                <h1>Terms of Service</h1>
                <p class="top-paragraph mb-2">Last Updated : 29th April 2025</p>
                <div class="message-text">
                    <div class="contact-gradient left">
                    </div>
                    <div class="contact-gradient right">
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-10 mt-5">
                            <div class="all-text">
                                <ul type="1">
                                    <li>
                                        <h2>1. Payment Terms</h2>
                                        <p>We accept payments via Cash, Bank Transfer, Cheque and Credit Card.<br>
                                        All bank details will be provided in the quotation document.</p>
                                    </li>
                                    <li>
                                        <h2>2. Order Confirmation</h2>
                                        <p>Orders are confirmed upon submission of a Purchase Order (PO) or written approval.<br>
                                        Customized or bulk orders may require a 50% - 75% advance deposit before production begins.
                                        </p>
                                    </li>
                                    <li>
                                        <h2>3. Advance Deposit Policy</h2>
                                        <p>To begin processing your order, an advance deposit is mandatory.<br>
                                            This helps us cover material, labour and production costs for your customized requirements.
                                        </p>
                                    </li>
                                    <li>
                                        <h2>4. Order Cancellation & Refund</h2>
                                        <p>
                                            <ul>
                                                <li>Cancellation after confirmation may incur a charge of up to 25% of the total order value.</li>
                                                <li>Custom orders are non-refundable and non-cancellable once production begins.</li>
                                                <li>Due to the personalized nature of most products, refunds are not applicable.</li>
                                            </ul>
                                        </p>
                                    </li>
                                    <li>
                                        <h2>5. Return & Replacement Policy</h2>
                                        <p>
                                            <ul>
                                                <li>We after a 7 day replacement guarantee for eligable items.</li>
                                                <li>If a product is found to be defective upon delivery, please notify us within 24 hours to request a replacement.</li>
                                                <li>Products must be unused and in their original packaging.</li>
                                            </ul>
                                        </p>
                                    </li>
                                    <li>
                                        <h2>6. Shipping & Delivery</h2>
                                        <p>
                                            <ul>
                                                <li>We ship through trusted logistics partners unless otherwise requested.</li>
                                                <li>Delivery timeliness are estimated and may vary due to unforeseen circumstances.</li>
                                                <li>Shipping charges will be included in the final invoice unless agreed upon separately.</li>
                                            </ul>
                                        </p>
                                    </li>
                                    <li class="mt-10 text-center">
                                        <h2 class="text-center">Questions?</h2>
                                        <p>Need support or clarification? <span class="cursor-pointer" @click="COntactUs">Contact Us</span></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
        </div><!-- End .container -->
    </div><!-- End .page-content -->
</main><!-- End .main -->
</template>
<style scoped>
ul li{
    margin-bottom:30px;
}
ul li ul li{
    position:relative;
    padding-left:15px;
    margin-bottom:0;
    font-size:20px;
}
ul li ul li:before{
    position:absolute;
    content:'';
    width:6px;
    height:6px;
    background:#454545;
    top:50%;
    left:0px;
    border-radius:50%;
}
ul li h2{
    color:#1a1a1a;
    font-size:46px;
    font-weight:600;
}
ul li p{
    color:#454545;
    font-size:20px;
    font-weight:400;
}
.contact-gradient{
    margin: 0;
        width:200px;
      height: 200px;
      background: #26A9E0;
      filter: blur(160px);
    position:absolute;
}
.contact-gradient.left{
    top:-120px;
    left:-50px;
}
.text-center p span{
    color:v-bind(setting.color);
}
.contact-gradient.right{
    top:-120px;
    right:-50px;
}
h1{
    text-align: center;
    font-size:50px;
    font-weight:600;
    color:#1a1a1a;
}
h1 span{
    color:v-bind(setting.color);
}
.text-1, .text-2{
     color:#1a1a1a;
     font-size:20px;
     font-weight:400;
     margin-bottom:30px;
     line-height: 1.3;
}
p.text{
    font-size:16px;
    font-weight:300;
    color:#3d3d3d
}
.top-paragraph{
    font-size:16px;
    text-align:center;
    font-weight:400;
    color:#6d6d6d
}
.message-templae{
    background-color: #fff;
    padding: 30px;
    border-radius:12px;
}
.contact-left{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:3;
    order:0;
}
.message-text{
    background:#ffffff;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    position:relative;
}
.form-group label{
    margin : 0 0 0;
    font-size:14px;
    font-weight:400;
    color:#1a1a1a;
}
.form-group input, .form-group textarea{
    font-size:12px;
    font-weight:400;
    color:#888888;
    border:1px solid v-bind(setting.color);
    background:#F8F8F8;
    padding:25px 15px;
}
.loader{
    width: 100%;
    display:flex;
    justify-content: center;
    margin-bottom: 100px;
}
.router-link-active.router-link-exact-active{
    border-bottom: 2px solid v-bind(setting.color);
}
.page-img{
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
}
.page-content{
    padding-bottom:0;
}
.page-background-image{
    position: relative;
}
.page-background-image .page-img {
    min-height: 350px;
    transition: .5s ease-in-out;
    background-color: #ccc;
}
.page-background-image .page-title {
    font-size: 28px;
    font-weight: 700;
    position: absolute;
    text-align: center;
    color: #fff;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}
.link{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 25px;
}


.pl {
	display: block;
	width: 6.25em;
	height: 6.25em;
}
.pl__ring, .pl__ball {
	animation: ring 2s ease-out infinite;
}
.pl__ball {
	animation-name: ball;
}

/* Dark theme  */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
}

/* Animation */
@keyframes ring {
	from {
		stroke-dasharray: 0 257 0 0 1 0 0 258;
	}
	25% {
		stroke-dasharray: 0 0 0 0 257 0 258 0;
	}
	50%, to {
		stroke-dasharray: 0 0 0 0 0 515 0 0;
	}
}
@keyframes ball {
	from, 50% {
		animation-timing-function: ease-in;
		stroke-dashoffset: 1;
	}
	64% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -109;
	}
	78% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -145;
	}
	92% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -157;
	}
	57%, 71%, 85%, 99%, to {
		animation-timing-function: ease-out;
		stroke-dashoffset: -163;
	}
}
input.send-message{
    background: v-bind(setting.color);
    color: #fff;
}
@media screen and (max-width: 768px) {
.contact-left{
    order:1;
}
h1{
    font-size:24px;
}
.top-paragraph{
    font-size:10 px;
}
.form-group label{
    font-size:12px;
}
.form-group input, .form-group textarea{
    font-size:10px;
    padding: 10px
}
.message-templae{
    padding:10px;
    background:none;
}
.by-reaching{
    font-size:10px!important
}
.text-1, .text-2{
    font-size:16px;
}
/* Contact Page */
ul li{
    margin-bottom:30px;
}
ul li ul li{
    padding-left:10px;
    font-size:10px;
}
ul li h2{
    font-size:18px;
    font-weight:500;
}
ul li p{
    font-size:10px;
}
ul li ul li:before{
    position:absolute;
    content:'';
    width:4px;
    height:4px;
    top:5px;
    left:0px;
}
.mb-10{
    margin-bottom:20px!important
}
}
</style>