<template>
  <div style="min-height: 100vh">
    <div class="container offers-page">
      <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("offers") }}</span>
        </nav>
        <div>
          <h1 class="title">
            {{ $t("offers") }}
          </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 class="offers-boxes">
        <div class="row">
          <div
            v-for="(item, index) in offers"
            class="col-12 col-xl-4 col-lg-6 mb-5"
          >
            <div class="box">
              <div class="image">
                <img :src="item.image" :alt="item.title || 'Special offer'" loading="lazy" />
              </div>
              <div class="text">
                <h4>{{ item.title }}</h4>
                <p>{{ item.description }}</p>
                <nuxt-link :to="localePath(`/offers/${locale === 'ar' ? item.slug_ar : item.slug_en}`)">
                  <button>{{ $t("offerBtn") }}</button>
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading v-if="isLoading" />
  </div>
</template>

<script setup>
import { useOfferStore } from "@/stores/offers";
const localePath = useLocalePath();
let store = useOfferStore();
let isLoading = ref(store.isLoading);
store.getOffers();
let offers = ref([]);
let { locale } = useI18n();

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

setPageSeo({
  title: locale.value === "ar" ? "العروض - خليج أوتو" : "Offers - Khalej Auto",
  description:
    locale.value === "ar"
      ? "عروض خليج أوتو الحصرية - اكتشف أفضل العروض والخصومات على السيارات الجديدة وخدمات التمويل المميزة"
      : "Khalej Auto exclusive offers - Discover the best deals and discounts on new cars and special financing services",
  path: "/offers",
  type: "product",
  breadcrumbs: [
    { name: locale.value === "ar" ? "الرئيسية" : "Home", url: "/" },
    { name: locale.value === "ar" ? "العروض" : "Offers" },
  ],
});

// Build AggregateOffer schema when offers load
watch(
  () => store.offers,
  (offersList) => {
    if (offersList?.length) {
      const offersSchema = {
        "@context": "https://schema.org",
        "@type": "ItemList",
        name: locale.value === "ar" ? "عروض خليج أوتو" : "Khalej Auto Offers",
        numberOfItems: offersList.length,
        itemListElement: offersList.map((item, index) => ({
          "@type": "ListItem",
          position: index + 1,
          item: {
            "@type": "Offer",
            name: item.title,
            description: item.description,
            url: `https://khalejauto.sa/offers/${locale.value === 'ar' ? item.slug_ar : item.slug_en}`,
            image: item.image || undefined,
            seller: {
              "@type": "Organization",
              name: "Khalej Auto",
            },
          },
        })),
      };

      useHead({
        script: [
          {
            key: "schema-offers-list",
            type: "application/ld+json",
            innerHTML: JSON.stringify(offersSchema),
          },
        ],
      });
    }
  },
  { immediate: true }
);

watch([() => store.offers, store.isLoading], ([val1, val2]) => {
  offers.value = val1;
  isLoading.value = val2;
});
</script>
