<template>
  <main>
    <div class="relative items-center">
      <div class="relative">
        <img
          src="/images/hosea-banner.png"
          alt="Kimchi Bone Marrow"
          class="w-full object-cover"
        />
        <div class="lg:relative md:relative lg:px-0 px-5 lg:mt-0 mt-5">
          <div
            class="carousel-item lg:absolute md:absolute lg:w-max lg:bottom-32 md:bottom-8 lg:left-32 md:right-2 md:w-96 w-full bg-white lg:rounded-[50px] rounded-[30px] lg:p-10 p-6 shadow-lg mb-6 mr-6"
          >
            <h2
              class="lg:text-3xl md:text-xl text-2xl text-[#273A97] font-[Header] font-bold"
            >
              {{ translate("House of Arirang") }}
            </h2>
            <div class="max-w-96">
              <p class="mt-4 text-black">
                {{
                  translate(
                    "Discover a welcoming space where authentic hand-pulled noodles and exciting community events come together to create a memorable experience. Find our HOSEA near you."
                  )
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto">
      <CardHosea />
    </div>
  </main>
</template>

<script setup>
import { useFetch } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";
const appConfig = useAppConfig();

const languageStore = useLanguageStore;

function translate(params) {
  return languageStore().translateWords(params);
}
</script>

<style scoped>
.button-cat {
  border: 1px solid #ec1f29;
  border-radius: 50px;
  width: 100%;
  display: block;

  background: linear-gradient(to right, #ec1f29 50%, #ec1f2900 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-cat:hover {
  background-position: left bottom;
}

.text-cat {
  text-align: center;
  font-size: 16px;
  color: black;
  transition: all 0.6s ease-out;
  display: block;
}

.text-cat:hover {
  color: white;
}

.button-highlight-home {
  border-radius: 50px;
  display: block;
  background: linear-gradient(to right, #273a97 50%, #ec1f29 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-highlight-home:hover {
  background-position: left bottom;
}

.text-highlight-home {
  text-align: center;
  font-size: 16px;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}
.text-highlight {
  text-align: center;
  font-size: 16px;
  color: white;
  padding: 2px 6px;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight-home:hover {
  color: white;
}
.hover-scale:hover {
  transform: scale(1.07);
  transition: all 0.5s ease-out;
}
</style>
