<template>
  <footer id="footer" ref="footerRef" class="bg-black">
    <div
      class="inner relative max-w-7xl mx-auto px-10 py-8 text-[12px] text-gray-400 md:px-4 md:py-7 md:text-[12px]"
    >
      <div class="menu-area">
        <ul class="flex items-center flex-wrap md:gap-1.5">
          <li
            v-for="(footerMenuItem, index) in footerLinks"
            :key="index"
            class="text-sm md:text-[11px] md:tracking-[-0.5px] relative flex items-center"
            :class="{
              'before:content-[\'\'] before:inline-block before:bg-gray-500 before:h-2 before:w-px before:mx-1.5 before:mt-1 before:align-top md:before:mt-1':
                index > 0,
              'md:before:hidden': index === 4,
            }"
          >
            <NuxtLink
              :to="footerMenuItem.link"
              :target="footerMenuItem.target"
              :class="[
                footerMenuItem.active === 'y' && 'text-[#e04600]',
                index === 2 && 'text-[#e04600]',
                'hover:text-gray-600 transition-colors',
              ]"
            >
              {{ footerMenuItem.title }}
            </NuxtLink>
          </li>
        </ul>
      </div>

      <div class="flex mt-2.5 md:flex-col md:mt-1.5">
        <img
          :src="footerData.game_rating_image_url"
          alt="게임등급"
          class="w-10 h-14 md:w-10 md:h-12 md:order-1"
        />

        <dl
          class="grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5 border-t border-l border-gray-600 tracking-tight md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5"
        >
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            게임명
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.title }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            상호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.company_name }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            이용등급
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.reg_no }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            등급분류번호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.rating_grade }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            제작년월일
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.prod_date }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            신고(등록)번호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.rating_class_no }}
          </dd>
        </dl>
      </div>

      <div class="address-area mt-6">
        <address class="not-italic text-gray-500">
          <div class="row my-1.5">
            <span
              v-dompurify-html="footerData.footer_info"
              class="[&_a]:cursor-pointer [&_a]:text-blue-500 [&_a]:underline"
            ></span>
          </div>
        </address>
      </div>

      <div class="copyright-area mt-5 text-gray-500 md:mt-4">
        <span>&copy; Smilegate. All rights reserved</span>
      </div>

      <div class="logo-area flex mt-3 md:mt-2.5">
        <a
          :href="
            locale === 'ja'
              ? 'https://www.smilegate.com/jp'
              : 'https://www.smilegate.com/en'
          "
          target="_blank"
          class="smilegate"
        >
          <img
            :src="footerData.dev_ci_url"
            alt="스마일게이트 로고"
            class="w-auto h-auto"
          />
        </a>
        <a
          href="https://www.nx3games.com"
          target="_blank"
          class="nx3 ml-2.5 md:ml-4"
        >
          <img
            :src="footerData.dev_ci_url2"
            alt="NX3 로고"
            class="w-auto h-auto"
          />
        </a>
      </div>

      <div
        class="language-area absolute bottom-7 right-10 text-white md:bottom-5.5 md:right-4"
      >
        <MoleculesLanguageSwitcher />

        <!-- <SelectLanguage /> -->
        <!-- <AtomsLanguageSwitcher /> -->
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
const { locale } = useI18n();
interface FooterMenuType {
  id: string;
  title: string;
  link: string;
  target: string;
  active: string;
  highlight?: string;
}

const footerLinks = ref<FooterMenuType[]>([
  {
    id: "company",
    title: "회사소개",
    link: "#",
    target: "_blank",
    active: "n",
  },
  {
    id: "terms",
    title: "이용약관",
    link: "https://common.game.onstove.com/terms/index?gameType=SG&termsType=1&langCode=@m{Terms_Lang_Code}",
    target: "_blank",
    active: "n",
  },
  {
    id: "privacy",
    title: "개인정보처리방침",
    link: "https://clause.onstove.com/stove/terms?category=privacy",
    target: "_blank",
    active: "y",
  },
  {
    id: "operation",
    title: "운영정책",
    link: "https://common.game.onstove.com/terms/index?gameType=CZN&termsType=3&langCode=@m{Terms_Lang_Code}",
    target: "_blank",
    active: "n",
  },
  {
    id: "fund",
    title: "청소년보호정책",
    link: "https://common.game.onstove.com/terms/index?gameType=CZN&termsType=6&langCode=ja",
    target: "_blank",
    active: "n",
  },
  {
    id: "customerService",
    title: "게임 이용 등급",
    link: "https://cs.onstove.com/@m{Terms_Lang_Code}/service/STOVE_CHAOSZERO",
    target: "_blank",
    active: "n",
  },
] as FooterMenuType[]);

const footerData = ref({
  dev_ci_url:
    "https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png",
  dev_ci_url2:
    "https://static-pubcomm.gate8.com/local/template/l9/common/logo_nx3.png",
  game_rating_image_url:
    "https://static-pubcomm.gate8.com/local/template/l9/common/grades_age/Type15.svg",
  use_dev_ci_url: true,
  fund_display_yn: true,
  use_game_rating: true,
  fund_display_url: "https://testgame.com/law/fund-ko",
  game_rating_info: {
    title: "테스트 게임",
    reg_no: "R-2024-7890",
    prod_date: "2024-05-01",
    rating_type: "15",
    company_name: "테스트엔터테인먼트",
    content_info: "1,2,3,",
    rating_grade: "15세 이용가",
    rating_class_no: "2024-123456",
  },
  footer_info:
    "(주)스마일게이트홀딩스 메가포트지점 대표: 성준호<br>주소: 경기도 성남시 분당구 분당로 55, 7층 (서현동 분당 퍼스트타워)<br>통신판매업 신고번호: 제2023-성남분당A-0145호<br>사업자등록번호: 813-85-02492<br>E-mail: <a href='mailto:help@smilegate.com'>help@smilegate.com</a><br>TEL: 1670-0399",
});
</script>

<style scoped>
/* 태국어 폰트 크기 조정 */
@media (max-width: 411px) {
  :global(.lang-th) .menu-area li {
    font-size: 10px;
  }
}

@media (max-width: 321px) {
  :global(.lang-th) .menu-area li {
    font-size: 9px;
  }
}
</style>
