<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>{{ Lang.message('zhiXiaoHong') }}</h1>
      </el-header>

      <ElDivider />

      <el-main>
        <div class="sub-caption">
          <el-image :src="guzhangUrl" />
          <span>
            {{ Lang.message('welcomeMessage') }}
          </span>
        </div>

        <div class="sub-caption">
          <el-image :src="xiangxiaUrl" />
          <span>
            {{ Lang.message('mainFeatures') }}
          </span>
        </div>

        <div class="cells">
          <ul>
            <li>
              <a href="https://www.xiaohongshu.com/" target="_blank">
                {{ Lang.message('littleRedBookKeywordSearch') }}
              </a>
            </li>
            <li>
              <a href="https://www.xiaohongshu.com/" target="_blank">
                {{ Lang.message('littleRedBookBloggerAnalysis') }}
              </a>
            </li>
            <li>
              <a href="https://www.xiaohongshu.com/" target="_blank">
                {{ Lang.message('littleRedBookNoteCommentAnalysis') }}
              </a>
            </li>
            <li>
              <a href="https://www.xiaohongshu.com/" target="_blank">
                {{ Lang.message('littleRedBookMaterialDownload') }}
              </a>
            </li>
          </ul>
        </div>

        <p>
          {{ Lang.message('helpDocumentation') }}
          <a href="https://ocnlo9x7cg5e.feishu.cn/wiki/YsKuwQkNAiqQ8akDV8CczUnynWg"
            target="_blank">
            {{ Lang.message('helpDoc') }}
          </a>
        </p>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ElContainer, ElHeader, ElMain, ElDivider, ElImage } from 'element-plus'
import xiangxiaUrl from "url:~assets/xiangxia.png"
import guzhangUrl from "url:~assets/guzhang.png"
import { Lang } from "~constants/locale"
</script>

<style lang="scss">
#app {
  padding: 0 6px;

  >.el-container {
    width: 318px;

    >.el-main {
      margin-block-start: 5px;

      .sub-caption {
        display: flex;
        align-items: center;
        margin-top: 13px;

        .el-image {
          width: 20px;
          height: 20px;
        }

        span {
          margin-left: 5px;
          color: #000000;
          font-weight: bold;
          font-size: 15px;
        }
      }

      .cells {
        background-color: #F9F9FB;
        border-radius: 8px;
        padding: 4px 0;
        margin-top: 13px;

        ul {
          color: #FF4800;

          li {
            margin-block-start: 10px;

            a {
              text-decoration: none;
              color: inherit;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}
</style>