<template>
  <div>
    <div class="container mb-5" style="min-height: 100vh">
      <div class="text-page">
        <nav class="breadline" aria-label="Breadcrumb">
          <nuxt-link to="/">{{ $t("home") }}</nuxt-link>
          <svg
            class="arrowDir"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M9.99998 13.28L5.65331 8.9333C5.13998 8.41997 5.13998 7.57997 5.65331 7.06664L9.99998 2.71997"
              stroke="#A7B9D0"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span aria-current="page">{{ $t("policy") }}</span>
        </nav>
        <div>
          <h1 class="title mobileHead">{{ $t("policy") }}</h1>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="50"
            height="3"
            viewBox="0 0 50 3"
            fill="none"
          >
            <rect
              x="11.9048"
              width="38.0952"
              height="3.00022"
              rx="1.50011"
              fill="#2D9596"
            />
            <rect
              opacity="0.9"
              width="7.14286"
              height="3.00022"
              rx="1.50011"
              fill="#2D9596"
            />
          </svg>
        </div>
      </div>

      <div v-html="store.terms?.description"></div>
    </div>
    <loading v-if="store.loading2" />
  </div>
</template>
<script setup>
const { t, locale, setLocale } = useI18n();
import { useHomeStore } from "@/stores/home";

// SEO Configuration
const { setPageSeo } = useSeoConfig();

// WebPage schema for terms and conditions
const termsSchema = {
  "@context": "https://schema.org",
  "@type": "WebPage",
  name: locale.value === "ar" ? "الشروط والأحكام" : "Terms and Conditions",
  description:
    locale.value === "ar"
      ? "الشروط والأحكام لموقع خليج أوتو"
      : "Terms and conditions for Khalej Auto website",
  url: "https://khalejauto.sa/terms",
  inLanguage: locale.value === "ar" ? "ar-SA" : "en-US",
  isPartOf: {
    "@type": "WebSite",
    name: "Khalej Auto",
    url: "https://khalejauto.sa",
  },
  about: {
    "@type": "Thing",
    name: locale.value === "ar" ? "شروط الخدمة والاستخدام" : "Terms of Service and Use",
  },
};

setPageSeo({
  title:
    locale.value === "ar"
      ? "الشروط والأحكام - خليج أوتو"
      : "Terms and Conditions - Khalej Auto",
  description:
    locale.value === "ar"
      ? "الشروط والأحكام الخاصة باستخدام موقع خليج أوتو وخدماتنا في بيع وتمويل السيارات"
      : "Terms and conditions for using Khalej Auto website and our car sales and financing services",
  path: "/terms",
  breadcrumbs: [
    { name: locale.value === "ar" ? "الرئيسية" : "Home", url: "/" },
    { name: locale.value === "ar" ? "الشروط والأحكام" : "Terms and Conditions", url: "/terms" },
  ],
  additionalSchemas: [termsSchema],
});

let store = useHomeStore();
store.getTerms();
</script>
<style lang=""></style>
