<template>
  <div class="home-page">
    <!-- 粒子背景 -->
    <Particles id="tsparticles" :options="particlesOptions" />

    <!-- 页面内容 -->
    <div class="content">
      <div class="title-container">
        <h1 class="title">欢迎来到钓鱼大冒险</h1>
        <p class="subtitle">开启你的海洋探索之旅</p>
      </div>

      <div class="menu-grid">
        <div
          v-for="item in menuItems"
          :key="item.name"
          class="menu-item"
          @click="navigateTo(item.route)"
        >
          <div class="menu-card">
            <div class="menu-icon" v-html="item.icon"></div>
            <h3 class="menu-title">{{ item.label }}</h3>
            <p class="menu-description">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

const menuItems = [
  {
    label: "查看装备",
    route: "equipments",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M20 7h-5V4c0-1.1-.9-2-2-2h-2C9.9 2 9 2.9 9 4v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM9 12c.83 0 1.5.67 1.5 1.5S9.83 15 9 15s-1.5-.67-1.5-1.5S8.17 12 9 12zm6 6H9v-.75c0-1 2-1.5 3-1.5s3 .5 3 1.5V18z"/></svg>`,
    description: "管理你的钓鱼装备和道具",
  },
  {
    label: "拉竿钓鱼",
    route: "fishing",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M12 12.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-7.5V5.7c3.4-.4 6-3.2 6-6.7h-2c0 2.8-2.2 5-5 5S7 1.8 7 -1H5c0 3.5 2.6 6.3 6 6.7V9H9v2h6V9h-2z"/></svg>`,
    description: "开始一场精彩的钓鱼冒险",
  },
  {
    label: "查看鱼篓",
    route: "fishbaskets",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M18.5 11c.17 0 .34.01.5.03V7c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v2H7c-1.1 0-2 .9-2 2v4.03c.16-.02.33-.03.5-.03.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88M9 4h6v1H9zm10 16H5c-.55 0-1-.45-1-1v-8.51c.42-.34.75-.77.93-1.27.18-.5.19-1.03.03-1.53-.22-.67-.74-1.19-1.41-1.41-.21-.07-.43-.11-.65-.13V7c0-.55.45-1 1-1h1v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V6h1c.55 0 1 .45 1 1v.14c-.22.02-.44.06-.65.13-.67.22-1.19.74-1.41 1.41-.16.5-.15 1.03.03 1.53.18.5.51.93.93 1.27V19c0 .55-.45 1-1 1z"/></svg>`,
    description: "查看你的渔获和战利品",
  },
  {
    label: "道具商店",
    route: "shop",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>`,
    description: "购买钓鱼装备和特殊道具",
  },
  {
    label: "市场信息",
    route: "market",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>`,
    description: "了解最新的市场行情和价格",
  },
  {
    label: "游戏排名",
    route: "ranking",
    icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>`,
    description: "查看玩家排行榜和成就",
  },
];

const navigateTo = (page) => {
  router.push({ name: page });
};

const particlesOptions = {
  background: {
    color: { value: "transparent" },
  },
  particles: {
    number: { value: 50, density: { enable: true, area: 800 } },
    color: {
      value: [
        "var(--primary-color)",
        "var(--primary-dark)",
        "var(--text-primary)",
      ],
    },
    shape: { type: ["circle", "star"] },
    opacity: {
      value: 0.6,
      random: true,
      anim: {
        enable: true,
        speed: 0.3,
        opacity_min: 0.2,
        sync: false,
      },
    },
    size: {
      value: 4,
      random: true,
      anim: {
        enable: true,
        speed: 1,
        size_min: 0.2,
        sync: false,
      },
    },
    move: {
      enable: true,
      speed: 1,
      direction: "none",
      random: true,
      straight: false,
      outModes: { default: "bounce" },
      attract: {
        enable: true,
        rotateX: 600,
        rotateY: 1200,
      },
    },
    links: {
      enable: true,
      distance: 150,
      color: "var(--primary-color)",
      opacity: 0.2,
      width: 1,
    },
  },
  interactivity: {
    events: {
      onHover: { enable: true, mode: ["grab", "bubble"] },
      onClick: { enable: true, mode: "push" },
      resize: true,
    },
    modes: {
      grab: {
        distance: 200,
        links: { opacity: 0.8 },
      },
      bubble: {
        distance: 200,
        size: 6,
        duration: 2,
        opacity: 0.8,
        speed: 3,
      },
      push: {
        quantity: 4,
      },
    },
  },
  detectRetina: true,
};
</script>

<style scoped>
.home-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#tsparticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px;
}

.title-container {
  text-align: center;
  margin-bottom: 60px;
}

.title {
  font-size: 3rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 15px;
  text-shadow: var(--glow-primary);
  animation: glow 2s ease-in-out infinite alternate;
}

.subtitle {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-top: -10px;
  text-shadow: var(--glow-secondary);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 8px;
  max-width: 100%;
}

.menu-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px 16px;
  height: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.menu-icon {
  margin-bottom: 12px;
  color: var(--primary-color);
  transition: all 0.3s ease;
  padding: 10px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 50%;
}

.menu-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.menu-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-color);
  box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.2);
}

.menu-card:hover .menu-icon {
  transform: scale(1.1);
  color: var(--primary-dark);
  background: rgba(var(--primary-rgb), 0.2);
}

.menu-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-description {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.menu-card:hover .menu-description {
  opacity: 1;
}

@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    padding: 6px;
    gap: 10px;
  }

  .menu-card {
    min-height: 140px;
    padding: 16px 10px;
  }

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

  .menu-description {
    font-size: 0.85rem;
  }
}
</style>
