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

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

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

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

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const router = useRouter();
const { t } = useI18n();
</script>

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

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

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

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

.intro-text {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

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

.link-list li {
  margin-bottom: 10px;
  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: 1.8rem;
  }

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

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

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