<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const router = useRouter();
const localePath = useLocalePath();
const { t, locale } = useI18n();
</script>

<template>
  <div class="site-map">
    <section
      class="site-map-intro"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h1 class="section-titles">{{ t("site_map.title") }}</h1>
      <div class="content-block">
        <p class="intro-text">{{ t("site_map.intro") }}</p>
      </div>
    </section>

    <section
      class="site-map-corporate"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h3 class="section-title">
        {{ t("site_map.sections.corporate.title") }}
      </h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push(localePath('/companyoverview'))">
            {{ t("site_map.sections.corporate.links.company_overview") }}
          </li>
          <li @click="router.push(localePath('/businessservices'))">
            {{ t("site_map.sections.corporate.links.business_introduction") }}
          </li>
          <li @click="router.push(localePath('/manage'))">
            {{ t("site_map.sections.corporate.links.management") }}
          </li>
          <li @click="router.push(localePath('/boarddirectors'))">
            {{ t("site_map.sections.corporate.links.board_of_directors") }}
          </li>
          <li @click="router.push(localePath('/committeeappointment'))">
            {{ t("site_map.sections.corporate.links.committee_appointments") }}
          </li>
          <li @click="router.push(localePath('/govern'))">
            {{ t("site_map.sections.corporate.links.governance") }}
          </li>
        </ul>
      </div>
    </section>

    <section
      class="site-map-financial"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h3 class="section-title">
        {{ t("site_map.sections.financial.title") }}
      </h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push(localePath('/secfilings'))">
            {{ t("site_map.sections.financial.links.sec_filings") }}
          </li>
          <li @click="router.push(localePath('/annualreports'))">
            {{ t("site_map.sections.financial.links.annual_reports") }}
          </li>
          <li @click="router.push(localePath('/quarterlyreports'))">
            {{ t("site_map.sections.financial.links.quarterly_reports") }}
          </li>
        </ul>
      </div>
    </section>

    <section
      class="site-map-stock"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h3 class="section-title">{{ t("site_map.sections.stock.title") }}</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push(localePath('/stock-quote'))">
            {{ t("site_map.sections.stock.links.stock_quote") }}
          </li>
          <li @click="router.push(localePath('/historic-stock'))">
            {{ t("site_map.sections.stock.links.historic_stock_price") }}
          </li>
        </ul>
      </div>
    </section>

    <section
      class="site-map-news"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h3 class="section-title">{{ t("site_map.sections.news.title") }}</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push(localePath('/press-releases'))">
            {{ t("site_map.sections.news.links.press_releases") }}
          </li>
          <li @click="router.push(localePath('/events-calendar'))">
            {{ t("site_map.sections.news.links.events_calendar") }}
          </li>
        </ul>
      </div>
    </section>

    <section
      class="site-map-investor"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h3 class="section-title">{{ t("site_map.sections.investor.title") }}</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push(localePath('/contacts'))">
            {{ t("site_map.sections.investor.links.contacts") }}
          </li>
          <li @click="router.push(localePath('/email-alerts'))">
            {{ t("site_map.sections.investor.links.email_alerts") }}
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<style scoped>
.site-map {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.section-titles {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: black;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #895bff;
}

.content-block {
  font-size: 1.1rem;
  line-height: 1.8;
}

.intro-text {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin-bottom: 12px;
  cursor: pointer;
  transition: color 0.3s ease;
  text-decoration: underline;
  text-decoration-color: rgba(255, 123, 172, 0.5);
  text-underline-offset: 4px;
}

.link-list li:hover {
  color: #895bff;
  text-decoration-color: #895bff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .section-titles {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .content-block {
    font-size: 1rem;
  }

  .intro-text {
    font-size: 1.1rem;
  }
}
</style>
