<template>
  <div class="">
    <div>
      <div class="relative">
        <img :src="'/images/about_us_banner.png'" class="mb-20 h-full hidden xl:block lg:block md:block" />
        <img :src="'/images/about-mobile.png'" class="mb-20 w-full h-full block md:hidden lg:hidden xl:hidden" />
        <div class="absolute lg:top-72 md:top-72 top-52 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <div data-aos="fade-in" data-aos-offset="-100" class="text-center mx-auto lg:text-5xl md:text-3xl text-3xl w-max md:w-auto lg:w-auto font-bold lg:py-32 md:py-20 py-36 text-white">
            {{ translate("Arirang Philosophy") }}
          </div>
          <div data-aos="fade-up" data-aos-offset="-100">
            <div class="text-center text-lg font-semibold">" {{ translate("Inspired Better Living") }}"</div>
            <div class="flex justify-center mb-10">
              <hr class="border-[#B4281B] border-b-2 w-60" />
            </div>
            <p class="text-center text-gray-700">
              {{ translate("Yesterday is history; we can’t change it anymore. Now let's think about the future and what we can do for a better life and to change your world.") }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="xl:h-20 lg:h-20 md:h-20 h-0"></div>
    <div class="lg:bg-[url('/images/bg-about-us.png')] lg:bg-cover bg-cover bg-center pb-10">
      <div class="lg:bg-none bg-[url('/images/bg_about_us_red.svg')] bg-cover bg-[center_top_7rem] bg-no-repeat pb-10">
        <div class="lg:mt-20 md:mt-20 mt-64 lg:mx-80 md:mx-32 px-5">
          <img data-aos="fade-down" :src="'/images/about-us.webp'" class="lg:py-0 md:py-10 rounded-[30px] mx-auto w-full" />
        </div>

        <div class="text-white mt-12 lg:mt-0 mb-20 md:mt-0 xl:px-48 lg:px-10 md:px-10 px-5">
          <div data-aos="fade-in" class="lg:text-4xl md:text-3xl text-2xl lg:my-10 my-5 font-bold text-center">
            {{ translate("The Journey of ARIRANG") }}
          </div>
          <div class="lg:grid lg:grid-cols-9">
            <div data-aos="fade-right" class="lg:block hidden 2xl:mt-[5rem] xl:mt-[8rem]">
              <img src="/images/line-journey.svg" alt="" />
            </div>
            <div class="lg:grid hidden place-content-between">
              <div data-aos="fade-in" class="font-bold lg:text-4xl md:text-3xl text-2xl 2xl:mt-[6rem] xl:mt-[9rem]">2017</div>
              <div data-aos="fade-in" class="font-bold lg:text-4xl md:text-3xl text-2xl 2xl:mt-[4.5rem] xl:mt-[4rem]">2020</div>
              <div data-aos="fade-in" class="font-bold lg:text-4xl md:text-3xl text-2xl 2xl:mb-[19rem] xl:mb-[19rem]">2024</div>
            </div>
            <div class="lg:col-span-7 grid place-content-between">
              <div data-aos="fade-in" class="lg:hidden text-center font-bold text-2xl mb-3">2017</div>
              <div data-aos="fade-up" class="flex lg:flex-row flex-col items-center lg:px-14 px-5 lg:py-14 py-5 rounded-[20px] border border-2 bg-white/[.1]">
                <div class="rounded-full w-[150px] h-[150px] lg:mr-14 lg:my-0 my-4">
                  <img src="/images/about1.png" class="img-fluid rounded-full w-full h-full" style="object-fit: cover" alt="" />
                </div>
                <div class="flex-1">
                  <p>
                    {{
                      translate(
                        "Since 2017, Arirang has been the first Korean instant noodle brand under PT. Jakarana Tama to receive HALAL certification from MUI (Majelis Ulama Indonesia). We also package the noodles in premium metalized pillow packs with an inner plastic tray to keep the product hygienic and fresh."
                      )
                    }}
                  </p>
                  <br />
                  <p>
                    {{
                      translate(
                        "Arirang noodles launched with a unique range of flavors in its Wheat Series, featuring exciting variants like Extra Hot, Tasty Chicken, Soup Bone Marrow, Soup Spicy Kimchi, Spicy Bibim Ramyun, Black Garlic, and Bolognese Ramyun."
                      )
                    }}
                  </p>
                </div>
              </div>
              <div data-aos="fade-in" class="lg:hidden text-center font-bold text-2xl mb-3 mt-8">2020</div>
              <div data-aos="fade-up" class="flex lg:flex-row flex-col items-center lg:px-14 px-5 lg:py-14 py-5 rounded-[20px] border border-2 bg-white/[.1] 2xl:mt-[2rem] xl:-mt-[0rem]">
                <div class="rounded-full w-[150px] h-[150px] lg:mr-14 lg:my-0 my-4">
                  <img src="/images/about2.png" class="img-fluid rounded-full w-full h-full" style="object-fit: cover" alt="" />
                </div>
                <div class="flex-1">
                  <p>
                    {{
                      translate(
                        "While gaining popularity with Arirang noodles, the brand also launched the Rice Series for Indonesian consumers, featuring Bone Marrow Rice Noodles, Bulgogi Rice Vermicelli, and Curry Rice Vermicelli. Each offers a variety of rich flavors to enhance the dining experience for Arirang fans."
                      )
                    }}
                  </p>
                </div>
              </div>
              <div data-aos="fade-in" class="lg:hidden text-center font-bold text-2xl mb-3 mt-8">2024</div>
              <div data-aos="fade-up" class="flex lg:flex-row flex-col items-center lg:px-14 px-5 lg:py-14 py-5 rounded-[20px] border border-2 bg-white/[.1] 2xl:mb-[12rem] xl:mb-[11rem]">
                <div class="rounded-full w-[150px] h-[150px] lg:mr-14 lg:my-0 my-4">
                  <img src="/images/about3.png" class="img-fluid rounded-full w-full h-full" style="object-fit: cover" alt="" />
                </div>
                <div class="flex-1">
                  <p>
                    {{
                      translate(
                        "In 2024, Arirang brings innovation to the instant noodle market with the launch of Self Cooking Series, offering practical and convenient options. The lineup features Bone Marrow Rice Noodle, Korean Beef Curry Noodle, and Budae Jjigae Noodle. All designed for easy preparation without compromising on authentic taste that fits for noodle enthusiasts."
                      )
                    }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="lg:bg-none bg-[url('/images/bg-mobile-about.png')] bg-top bg-cover -mt-1 lg:mt-0 lg:px-20 md:px-10 px-5 lg:py-20 md:py-10">
        <div data-aos="fade-up" class="section-video py-10">
          <VideoPlayer />
        </div>
        <div data-aos="fade-up" class="grid lg:grid-cols-3 md:grid-cols-2 justify-between lg:gap-8 md:gap-8 gap-5 lg:mt-20 lg:pb-24 md:pb-10 text-white">
          <div class="">
            <div class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer block hover:inline-block">
              {{ translate("South Korean culture is making its way around the world. We refer to this as the Korean Wave, also known as hallyu. Things like kdrama, beauty, and food are all part of the world's rapid growth.") }}
            </div>
          </div>
          <div>
            <div class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer inline-block">
              {{
                translate(
                  "Around the world, traditional Korean food like ramyun and kimchi is becoming more and more famous. Thousands of years of culture and the blending of many generations have created a unique set of rules for Korean food. Sharing food at the table with other people became more common over time."
                )
              }}
            </div>
          </div>
          <div>
            <div class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer inline-block">
              {{ translate("Sharing food means the whole community is on the same side, not just two people. Korean food culture stresses this, drawing on its own history to do so.") }}
            </div>
          </div>
          <div>
            <span class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer inline-block">
              {{
                translate(
                  "We refer to the global dissemination of South Korean culture as the Korean Wave, or hallyu. From kdrama and beauty to cuisine, the world is quickly growing. Traditional Korean dishes, such as ramyun and traditional kimchi, are becoming increasingly popular around the globe."
                )
              }}
            </span>
          </div>
          <div>
            <span class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer inline-block">
              {{
                translate(
                  "Thanks to the influence of Korean culture and the blending of many generations, Korean food has its own distinct set of traditions that have endured over time. Sharing a meal with one's family or other close friends became more commonplace over time."
                )
              }}
            </span>
          </div>
          <div>
            <span class="txt-about hover:bg-white rounded-xl p-5 hover:text-[#273A97] lg:hover:scale-110 hover:scale-[1.05] transition duration-500 cursor-pointer inline-block">
              {{
                translate(
                  "The act of sharing a meal with others represents more than simply dividing up the food; it also represents coming together as a community. This is a central theme in Korean cuisine, which draws on its own historical roots."
                )
              }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container mx-auto lg:px-20 md:px-10 px-5 lg:py-20">
    <div class="grid lg:grid-cols-2 md:grid-cols-2 items-center justify-between lg:gap-10 md:gap-10 gap-8">
      <div data-aos="fade-right">
        <img src="/images/smpl-aboutus.png" />
      </div>
      <div style="overflow-x: hidden">
        <div data-aos="fade-left" class="lg:text-3xl md:text-3xl text-2xl mt-10 font-bold text-[#273A97]">
          {{ translate("K-Food Culture") }}
        </div>
        <p data-aos="fade-left" class="lg:text-base md:text-sm lg:mt-10 md:mt-5">
          {{ translate("Korean cuisine has been shaped by thousands of years of culture and the blending of countless generations, resulting in a unique set of norms around food that have stood the test of time.") }}

          <br /><br />
          {{ translate("Over time, the culture of sharing food at the table with others began to develop.") }}

          <br /><br />
          {{ translate("Sharing food is not just about dividing the meal itself, but also symbolizes sharing solidarity as a broader community. This is emphasized in Korean food culture, rooted in its own historical foundation.") }}
        </p>
      </div>
    </div>
  </div>

  <section class="image-grid-section lg:mt:20 md:mt-10 mt-8">
    <!-- <SectionConnectWithUs /> -->
    <div class="container mx-auto">
      <div class="grid lg:grid-cols-4 md:grid-cols-2 bg-[#fff] lg:py-20 py-10 lg:gap-5 md:gap-8 gap-5 lg:px-10 md:px-10 px-5">
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_1.webp" alt="Food Image 1" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_2.webp" alt="Food Image 2" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_3.webp" alt="Food Image 3" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div style="overflow-x: hidden" class="image-item align-center self-center justify-between">
          <div data-aos="fade-left">
            <div class="flex items-center space-x-2">
              <p class="lg:text-3xl md:text-2xl text-xl font-bold">
                {{ translate("Connect with us on social media") }}
              </p>
            </div>
            <p class="lg:text-base md:text-lg text-sm text-[#959595] mt-3">
              {{ translate("Stay updated to our new products, promos, events, and many more.") }}
            </p>
            <div class="flex mt-10 items-center justify-between">
              <div class="flex text-white">
                <a href="https://www.tiktok.com/@arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#000000] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                  <img :src="'/icon/tiktok_logo.svg'" alt="Tiktok" class="w-5 h-5" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">Tiktok</p>
                </a>
                <a href="https://www.youtube.com/channel/UCULijpXxRqM-JuwLHOpQ8yw" target="_blank" class="flex group cursor-pointer bg-[#E22C45] rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                  <img src="/icon/yt_logo.svg" class="w-5 h-5" alt="YouTube" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:ml-2 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">YouTube</p>
                </a>
                <a href="https://www.instagram.com/arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#363636] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px]">
                  <img src="/icon/ig_connect_logo.svg" alt="Instagram" class="w-5 h-5" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-20 transition-all duration-300 ease-in-out">Instagram</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- <Newsletter /> -->
</template>
<script setup>
import VideoPlayer from "~/components/VideoPlayer.vue";
import { useLanguageStore } from "~/stores/lang";
const appConfig = useAppConfig();

const languageStore = useLanguageStore;

function translate(params) {
  return languageStore().translateWords(params);
}
</script>
<style>
@media only screen and (min-width: 600px) {
  .txt-about {
    &:hover {
      transition: all 0.3s ease-out;
      margin-left: 15px;
      margin-top: 15px;
      margin-right: -15px;
    }
  }
}
.hover-scale:hover {
  transform: scale(1.07);
  transition: all 0.5s ease-out;
}
</style>
