<script setup>
const img = useImage();
const router = useRouter();
import { useStorage } from "@vueuse/core";

// const backgroundImageStyle = computed(() => {
//   // // Use $img to generate an optimized image URL
//   // const optimizedImageUrl = img("/img/haditha/background.webp", {
//   //   quality: 80,
//   //   fit: "auto",
//   // });
//   // return {
//   //   backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
//   // };
//   return {
//     backgroundImage: `url(/img/haditha/background.webp), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
//   };
// });

const searchPhrase = useStorage("searchPhrase", "");
searchPhrase.value = "";

const handleResponseReady = (payload) => {
  router.push({
    name: "hadithaSearch",
    query: {
      q: payload.searchQuery,
    },
  });
};

const NavigationMenu = defineAsyncComponent(() =>
  import("@haditha/components/haditha/NavigationMenu.vue")
);
const AutoComplation = defineAsyncComponent(() =>
  import("@haditha/components/haditha/AutoComplation.vue")
);
</script>
<template>
  <section class="section-one flex flex-col justify-center">
    <div class="background-image h-full">
      <navigation-menu></navigation-menu>

      <div class="logo-container flex justify-center flex-col items-center">
        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
        <div class="title">
          کاوش با
          <span class="badge-style me-1"> هوش مصنوعی </span>
          در احادیث اسلامی
        </div>
      </div>
    </div>
    <div class="search-box-container flex justify-center">
      <auto-complation
        :autoRedirection="false"
        @response-ready="handleResponseReady($event)"
      ></auto-complation>
    </div>
  </section>
</template>

<style scoped>
.section-one {
  .background-image {
    height: 32.56em; /*521px;*/
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/img/haditha/background.webp"),
      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%);
    /* background-image: url("/img/haditha/background.svg"),
        linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
  }

  .logo-container {
    padding-top: 10em;
    position: relative;

    .title {
      margin-top: 3.5em;
      font-family: var(--font);
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0%;
      text-align: center;
      color: var(--ui-color-two);
    }
    .badge-style {
      width: 100;
      height: 23;
      border-radius: 40px;
      padding-right: 8px;
      padding-bottom: 2px;
      padding-left: 8px;
      gap: 10px;
      color: #fff;

      background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
    }
  }

  .search-box-container {
    padding-top: 1em;
    padding-bottom: 4em; /*64px */
  }
}

@media screen and (max-width: 719.99px) {
  .section-one {
    .background-image {
      height: 26.875em; /*430px;*/
      background-size: contain;
      background-image: url("/img/haditha/mobile/backgorund.png");
    }

    .logo-container {
      padding-top: 7.5em;

      .title {
        font-weight: 300;
        font-size: 0.75rem;
        line-height: 150%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
      }
      .badge-style {
        width: 100;
        height: 23;
        border-radius: 2.5em; /*40px;*/
        padding-right: 0.65em; /*8px;*/
        padding-bottom: 2px; /*40px;*/
        padding-left: 0.65em; /*8px;*/
        gap: 10px;
        color: #fff;

        font-weight: 500;
        font-size: 0.75rem;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;

        background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
      }
    }
  }
}
</style>