<script setup>
const route = useRoute();

definePageMeta({
  layout: false,
  name: "hadithaPublicPage",
});
useHead({
  name: "hadithaPublicPage",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | در باره حدیثا`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
    {
      name: "msapplication-TileImage",
      content: "/img/haditha/fav-icons/ms-icon-144x144.png",
    },
    { name: "theme-color", content: "#ffffff" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
  link: [
    {
      rel: "icon",
      type: "image/x-icon",
      href: "/img/haditha/fav-icons/favicon.ico",
    },
    { rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
    // rel: icon
    {
      rel: "icon",
      type: "image/png",
      sizes: "16x16",
      href: "/img/haditha/fav-icons/favicon-16x16.png",
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "32x32",
      href: "/img/haditha/fav-icons/favicon-32x32.png",
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "96x96",
      href: "/img/haditha/fav-icons/favicon-96x96.png",
    },
    {
      rel: "icon",
      sizes: "192x192",
      type: "image/png",
      href: "/img/haditha/fav-icons/android-icon-192x192.png",
    },
    // rel: apple
    {
      rel: "apple-touch-icon",
      sizes: "57x57",
      href: "/img/haditha/fav-icons/apple-icon-57x57.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "60x60",
      href: "/img/haditha/fav-icons/android-icon-60x60.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "72x72",
      href: "/img/haditha/fav-icons/android-icon-72x72.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "76x76",
      href: "/img/haditha/fav-icons/android-icon-76x76.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "114x114",
      href: "/img/haditha/fav-icons/android-icon-114x114.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "120x120",
      href: "/img/haditha/fav-icons/android-icon-120x120.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "144x144",
      href: "/img/haditha/fav-icons/android-icon-144x144.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "152x152",
      href: "/img/haditha/fav-icons/android-icon-152x152.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "180x180",
      href: "/img/haditha/fav-icons/android-icon-180x180.png",
    },
  ],
});
const componentName = ref("");

// components declaration
const HadithaLayout = defineAsyncComponent(() =>
  import("@haditha/layouts/HadithaLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
  import("@haditha/components/haditha/NavigationMenu.vue")
);
const AboutUs = defineAsyncComponent(() =>
  import("@haditha/pages/haditha/public-pages/about-us.vue")
);
const ContactUs = defineAsyncComponent(() =>
  import("@haditha/pages/haditha/public-pages/contactus.vue")
);
const Rules = defineAsyncComponent(() =>
  import("@haditha/pages/haditha/public-pages/rules.vue")
);

onMounted(() => {
  // if (route.path == "/haditha/about-us") componentName.value = "AboutUs";
  // if (route.path == "/haditha/contact-us") componentName.value = "ContactUs";
  // if (route.path == "/haditha/rules") componentName.value = "Rules";
});
</script>

<template>
  <HadithaLayout>
    <div class="page-container h-full">
      <!-- max-w-[var(--ui-container-two)] -->
      <UContainer
      class="page-inner-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4">      
        <navigation-menu></navigation-menu>

        <div class="page-header pt-38 pb-4 flex justify-between items-center">
          <div class="flex items-center">
            <h1 class="m-0 title">درباره</h1>
            <img
              fit="auto"
              quality="80"
              placeholder
              src="/img/haditha/haditha-title.svg"
            />
          </div>
        </div>

        <div class="page-content p-6">
          <ContactUs v-if="route.path == '/haditha/contact-us'"></ContactUs>
          <AboutUs v-if="route.path == '/haditha/about-us'"></AboutUs>
          <Rules v-else-if="route.path == '/haditha/rules'"></Rules>
        </div>
      </UContainer>
    </div>
  </HadithaLayout>
</template>

<style scoped>
.page-container {
  background: #f7fffd;

  .page-inner-container {
    .page-header {
      color: var(--ui-color-two);

      .title {
        font-family: var(--font);
        font-weight: 300;
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 0%;
        text-align: center;
      }
    }

    .page-content {
      color: var(--ui-color-two);

      p {
        font-family: var(--font);
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: right;
      }
    }
  }
}
</style>
