<script setup>
const img = useImage();

const backgroundImageStyle = computed(() => {
  // Use $img to generate an optimized image URL
  const optimizedImageUrl = img("/img/haditha/background.png", {
    quality: 80,
    fit: "auto",
  });

  return {
    backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
  };
});

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" :style="backgroundImageStyle">
      <navigation-menu></navigation-menu>

      <div class="logo-container flex justify-center flex-col items-center">
        <NuxtImg 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></auto-complation>
    </div>
  </section>
</template>

<style scoped>
.section-one {
  .background-image {
    height: 521px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 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: IRANSansX;
      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 */
  }
}
</style>
