<script setup lang="ts">
// 项目 logo:波普贴纸,双款式跟随 app store(burst 星爆 / seal 波浪封印,
// 设置 · 关于点击 logo 切换)。固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
import { computed } from 'vue'

import { useAppStore } from '@/stores/app'

withDefaults(defineProps<{ size?: number }>(), { size: 48 })

const BURST =
  'M24 5 L27.9 9.5 L33.5 7.5 L34.6 13.4 L40.5 14.5 L38.5 20.1 L43 24 L38.5 27.9 ' +
  'L40.5 33.5 L34.6 34.6 L33.5 40.5 L27.9 38.5 L24 43 L20.1 38.5 L14.5 40.5 L13.4 34.6 ' +
  'L7.5 33.5 L9.5 27.9 L5 24 L9.5 20.1 L7.5 14.5 L13.4 13.4 L14.5 7.5 L20.1 9.5 Z'
// 十二瓣扇贝圆(经典价签贴纸),内圈虚线封印
const SEAL =
  'M39.5 19.9 A5.8 5.8 0 0 0 35.3 12.7 A5.8 5.8 0 0 0 28.1 8.5 A5.8 5.8 0 0 0 19.9 8.5 ' +
  'A5.8 5.8 0 0 0 12.7 12.7 A5.8 5.8 0 0 0 8.5 19.9 A5.8 5.8 0 0 0 8.5 28.1 ' +
  'A5.8 5.8 0 0 0 12.7 35.3 A5.8 5.8 0 0 0 19.9 39.5 A5.8 5.8 0 0 0 28.1 39.5 ' +
  'A5.8 5.8 0 0 0 35.3 35.3 A5.8 5.8 0 0 0 39.5 28.1 A5.8 5.8 0 0 0 39.5 19.9 Z'

const VARIANTS = {
  burst: { d: BURST, strokeWidth: 2.6, textY: 28.8, fontSize: 13, ring: false },
  seal: { d: SEAL, strokeWidth: 2.4, textY: 28.6, fontSize: 12.5, ring: true },
} as const

const app = useAppStore()
const v = computed(() => VARIANTS[app.logoVariant])
</script>

<template>
  <span class="logo-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
    <Transition name="logo-slide">
      <svg :key="app.logoVariant" :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
        <g transform="rotate(-8 24 24)">
          <path :d="v.d" fill="#3A2418" transform="translate(1.9,2.4)"></path>
          <path :d="v.d" fill="#C96442" stroke="#FFFDF7" :stroke-width="v.strokeWidth" stroke-linejoin="round"></path>
          <circle
            v-if="v.ring"
            cx="24"
            cy="24"
            r="12.5"
            fill="none"
            stroke="#FAF3E3"
            stroke-width="1"
            stroke-dasharray="2.4 2.6"
            opacity="0.7"
          ></circle>
          <text
            x="24"
            :y="v.textY"
            text-anchor="middle"
            font-family="Georgia,'Times New Roman',serif"
            :font-size="v.fontSize"
            font-weight="900"
            fill="#FAF3E3"
          >
            O!
          </text>
        </g>
      </svg>
    </Transition>
  </span>
</template>

<style scoped>
/* 款式切换:旧款右滑淡出、新款自左滑入(整体从左到右);
   离开元素绝对定位避免过渡期双元素撑开布局 */
.logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.logo-slide-enter-active,
.logo-slide-leave-active {
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}
.logo-slide-leave-active {
  position: absolute;
  left: 0;
  top: 0;
}
.logo-slide-enter-from {
  transform: translateX(-45%);
  opacity: 0;
}
.logo-slide-leave-to {
  transform: translateX(45%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .logo-slide-enter-active,
  .logo-slide-leave-active {
    transition: none;
  }
}
</style>
