<template>
  <div style="min-height: 100vh">
    <div class="containe services-page"></div>
    <div class="main-container">
      <div class="row-container">
        <div class="container">
          <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">{{ serviceStore.service?.title }}</span>
            </nav>
            <div>
              <h1 class="title mobileHead">{{ serviceStore.service?.title }}</h1>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="150"
                height="3"
                viewBox="0 0 50 3"
                fill="none"
              >
                <rect
                  x="11.9048"
                  width="78.0952"
                  height="3.00022"
                  rx="1.50011"
                  fill="#2D9596"
                />
                <rect
                  opacity="0.9"
                  width="5.14286"
                  height="3.00022"
                  rx="1.50011"
                  fill="#2D9596"
                />
              </svg>
            </div>
          </div>
          <div class="img-container w-100">
            <img
              v-if="serviceStore.service?.image"
              :src="serviceStore.service.image"
              :alt="serviceStore.service?.title"
              class="img-fluid w-100 h-100 rounded-3 object-fit-cover"
              loading="lazy"
            />
            <div class="layer">
              <h2 class="text-white text-capitalize">
                {{ serviceStore.service?.title }}
              </h2>
            </div>
          </div>
          <div class="text-container">
            <h2 class="mb-3 fs-5">{{ $t("description") }}</h2>
            <p class="mb-5 service-description">
              {{ serviceStore.service?.description }}
            </p>
            <div class="features mb-5">
              <h3 class="mb-3 fs-5">{{ $t("features") }}</h3>
              <div class="items">
                <div
                  v-for="(i, index) in serviceStore.service?.advantage"
                  :key="i"
                  class="item mb-2"
                >
                  {{ index + 1 }} - {{ i.title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <loading v-if="serviceStore.isLoading" />
</template>

<script setup>
import { useServiceStore } from "@/stores/services";
const route = useRoute();
const slug = ref(route.params.slug);
const { locale } = useI18n();
const { setPageSeo } = useSeoConfig();
let serviceStore = useServiceStore();

watch(
  () => route.params.slug,
  async (newSlug) => {
    await serviceStore.getServiceBySlug(newSlug);

    if (!serviceStore.service) {
      throw showError({
        statusCode: 404,
        statusMessage: "Service not found",
      });
    }

    setPageSeo({
      title:
        locale.value === "ar"
          ? serviceStore.service?.title || "الخدمات - خليج أوتو"
          : serviceStore.service?.title || "Services - Khalej Auto",
      description:
        locale.value === "ar"
          ? serviceStore.service?.description ||
            "اكتشف خدمات خليج أوتو المتنوعة في مجال السيارات بالمملكة العربية السعودية"
          : serviceStore.service?.description ||
            "Discover Khalej Auto's diverse car services in Saudi Arabia",
      path: `/services/${route.params.slug}`,
    });
  },
  { immediate: true }
);
</script>

<style scoped>
.service-description {
  width: 800px;
}
.img-container {
  position: relative;
  height: 400px;
  margin-bottom: 40px;
}
.img-container .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-container .layer h2 {
  letter-spacing: -1px;
}
@media screen and (max-width: 992px) {
  .service-description {
    width: 100%;
  }
  @media screen and (max-width: 768px) {
    .text-container {
      padding-inline: 15px;
    }
  }
}
</style>
