<template>
  <UPage>
    <UPageBody>
      <UContainer>
        <UPageHeader
          title="关于校友会"
          description="永平中学校友会成立的宗旨是连接全球校友，传承母校精神，支持在校学生成长。我们定期举办活动，推动交流与合作，并积极回馈母校。"
        />

        <UPageSection
          title="会徽"
          description="你了解校友会会徽的含义吗"
          :features="logoFeatures"
          orientation="horizontal"
        >
          <img class="size-88" src="/Logo.svg" alt="YPHS Alumni" />
        </UPageSection>

        <UPageSection
          title="永平中学校歌"
          description="这首伴随着我们整个中学生涯的曲子，想必能勾起您不少的青春回忆吧！"
          orientation="horizontal"
          reverse
        >
          <div class="flex flex-col gap-y-8">
            <img class="w-full" src="/about/校歌.webp" alt="YPHS Alumni" />
            <div class="flex items-center gap-x-8">
              <p>伴奏版</p>
              <audio
                controls
                class="flex-1"
                src="/about/永平中学校歌.mp3"
              ></audio>
            </div>
            <div class="flex items-center gap-x-8">
              <p>咏唱版</p>
              <audio
                controls
                class="flex-1"
                src="/about/YongPing_SchoolSong_V2.mp3"
              ></audio>
            </div>
          </div>
        </UPageSection>
      </UContainer>
    </UPageBody>
  </UPage>
</template>

<script lang="ts" setup>
import type { PageFeatureProps } from "@nuxt/ui";

const logoFeatures = ref<PageFeatureProps[]>([
  { title: "九轮", description: "永久随时代齿轮前进" },
  { title: "太阳九条线", description: "久久发出光芒照耀华友" },
  { title: "三个菱形", description: "代表校友、董事会及社会人士团结一致" },
  { title: "两道绿叶", description: "代表组织团结、不断茁壮成长" },
]);
</script>

<style></style>
