<template>
  <div class="home-container min-h-screen bg-gray-100 p-4 md:p-8">
    <div class="max-w-7xl mx-auto">
      <h1 class="text-4xl font-bold text-gray-900 mb-8">设计风格</h1>
      <p class="text-gray-900 mb-8">请选择您的设计风格偏好来创建您的原型</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <router-link v-for="style in designStyles" 
          :key="style.path" 
          :to="style.path" 
          :class="style.cardClass">
          <div class="card-content">
            <h3 class="text-xl font-semibold" :class="style.titleClass">{{ style.name }}</h3>
            <p class="text-sm" :class="style.descriptionClass">{{ style.description }}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
const designStyles = [
  { path: '/fluent', name: 'Fluent Design', description: '微软流畅设计系统', cardClass: 'fluent-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
  { path: '/ios', name: 'iOS Design', description: '苹果设计风格', cardClass: 'ios-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
  { path: '/element', name: 'Element UI', description: '饿了么设计系统', cardClass: 'element-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
  { path: '/ant', name: 'Ant Design', description: '蚂蚁设计系统', cardClass: 'ant-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
  { path: '/morphism', name: 'Morphism', description: '变形设计风格', cardClass: 'morphism-card', titleClass: 'text-purple-900', descriptionClass: 'text-purple-700' },
  { path: '/holographic', name: 'Holographic', description: '全息设计风格', cardClass: 'holographic-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
  { path: '/gradient', name: 'Gradient', description: '渐变设计风格', cardClass: 'gradient-card', titleClass: 'text-white', descriptionClass: 'text-pink-100' },
  { path: '/neon', name: 'Neon', description: '霓虹设计风格', cardClass: 'neon-card', titleClass: 'text-pink-400', descriptionClass: 'text-pink-300' },
  { path: '/organic', name: 'Organic', description: '有机设计风格', cardClass: 'organic-card', titleClass: 'text-green-900', descriptionClass: 'text-green-700' },
  { path: '/pixel', name: 'Pixel Art', description: '像素艺术风格', cardClass: 'pixel-card', titleClass: 'text-yellow-900', descriptionClass: 'text-yellow-700' },
  { path: '/brutalism', name: 'Brutalism', description: '粗野主义风格', cardClass: 'brutalism-card', titleClass: 'text-black', descriptionClass: 'text-gray-800' },
  { path: '/3d', name: '3D Design', description: '3D设计风格', cardClass: 'three-d-card', titleClass: 'text-white', descriptionClass: 'text-blue-200' },
  { path: '/skeuomorphic', name: 'Skeuomorphic', description: '拟物设计风格', cardClass: 'skeuomorphic-card', titleClass: 'text-amber-900', descriptionClass: 'text-amber-700' },
  { path: '/neumorphism', name: 'Neumorphism', description: '新拟物设计风格', cardClass: 'neumorphism-card', titleClass: 'text-gray-800', descriptionClass: 'text-gray-600' },
  { path: '/flat', name: 'Flat', description: '扁平设计风格', cardClass: 'flat-card', titleClass: 'text-white', descriptionClass: 'text-red-100' },
  { path: '/material', name: 'Material', description: '材料设计风格', cardClass: 'material-card', titleClass: 'text-white', descriptionClass: 'text-blue-100' },
  { path: '/nordic', name: 'Nordic', description: '北欧设计风格', cardClass: 'nordic-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
  { path: '/futuristic', name: 'Futuristic', description: '未来主义风格', cardClass: 'futuristic-card', titleClass: 'text-white', descriptionClass: 'text-cyan-100' },
  { path: '/retro', name: 'Retro', description: '复古设计风格', cardClass: 'retro-card', titleClass: 'text-orange-900', descriptionClass: 'text-orange-700' },
  { path: '/cyberpunk', name: 'Cyberpunk', description: '赛博朋克风格', cardClass: 'cyberpunk-card', titleClass: 'text-pink-400', descriptionClass: 'text-purple-300' },
  { path: '/steampunk', name: 'Steampunk', description: '蒸汽朋克风格', cardClass: 'steampunk-card', titleClass: 'text-amber-100', descriptionClass: 'text-amber-200' },
  { path: '/aurora', name: 'Aurora', description: '极光设计风格', cardClass: 'aurora-card', titleClass: 'text-white', descriptionClass: 'text-green-100' },
  { path: '/minimalist', name: 'Minimalist', description: '极简设计风格', cardClass: 'minimalist-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-600' },
  { path: '/dark-mode', name: 'Dark Mode', description: '暗黑模式风格', cardClass: 'dark-mode-card', titleClass: 'text-white', descriptionClass: 'text-gray-300' },
  { path: '/glassmorphism', name: 'Glassmorphism', description: '玻璃态设计风格', cardClass: 'glassmorphism-card', titleClass: 'text-gray-900', descriptionClass: 'text-gray-700' }
]
</script>

<style scoped>
.home-container {
  font-family: 'Inter', sans-serif;
}

.card-content {
  @apply p-6 rounded-lg h-full flex flex-col justify-center;
  transition: all 0.3s ease;
}

/* Fluent Design Card */
.fluent-card {
  @apply bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fluent-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* iOS Design Card */
.ios-card {
  @apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.ios-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Element UI Card */
.element-card {
  @apply bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
}

.element-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Ant Design Card */
.ant-card {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
}

.ant-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Morphism Card */
.morphism-card {
  @apply bg-gradient-to-br from-purple-100 to-pink-100 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.morphism-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Holographic Card */
.holographic-card {
  @apply bg-gradient-to-br from-blue-600/30 via-purple-600/30 to-pink-600/30 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.holographic-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Gradient Card */
.gradient-card {
  @apply bg-gradient-to-br from-pink-600 via-purple-600 to-indigo-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
}

.gradient-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Neon Card */
.neon-card {
  @apply bg-black rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid #ff00ff;
  box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

.neon-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Organic Card */
.organic-card {
  @apply bg-gradient-to-br from-green-200 to-green-300 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.organic-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Pixel Art Card */
.pixel-card {
  @apply bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 2px solid #000;
}

.pixel-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Brutalism Card */
.brutalism-card {
  @apply bg-yellow-200 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
}

.brutalism-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* 3D Design Card */
.three-d-card {
  @apply bg-gradient-to-br from-blue-900 to-purple-900 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.three-d-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px) rotateX(5deg) rotateY(5deg);
}

/* Skeuomorphic Card */
.skeuomorphic-card {
  @apply bg-gradient-to-br from-amber-200 to-amber-300 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Neumorphism Card */
.neumorphism-card {
  @apply bg-gray-100 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
}

/* Flat Card */
.flat-card {
  @apply bg-gradient-to-br from-red-500 to-red-600 rounded-lg shadow-md overflow-hidden cursor-pointer;
  transition: all 0.3s ease;
  border: none;
}

.flat-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

/* Material Card */
.material-card {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Nordic Card */
.nordic-card {
  @apply bg-gradient-to-br from-white to-gray-100 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Futuristic Card */
.futuristic-card {
  @apply bg-gradient-to-br from-cyan-600 to-blue-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Retro Card */
.retro-card {
  @apply bg-gradient-to-br from-orange-400 to-pink-400 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 2px solid #000;
}

/* Cyberpunk Card */
.cyberpunk-card {
  @apply bg-gradient-to-r from-pink-600 via-purple-600 to-cyan-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid #ff00ff;
  box-shadow: 0 0 10px #ff00ff;
}

/* Steampunk Card */
.steampunk-card {
  @apply bg-gradient-to-r from-amber-800 to-amber-900 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 2px solid #8B4513;
}

/* Aurora Card */
.aurora-card {
  @apply bg-gradient-to-r from-green-500 via-blue-600 to-purple-600 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Minimalist Card */
.minimalist-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark Mode Card */
.dark-mode-card {
  @apply bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode-card .text-gray-600 {
  @apply text-gray-400;
}

/* Glassmorphism Card */
.glassmorphism-card {
  @apply bg-white/30 backdrop-blur-md rounded-lg shadow-md overflow-hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 统一悬停效果 */
.fluent-card:hover,
.ios-card:hover,
.element-card:hover,
.ant-card:hover,
.morphism-card:hover,
.holographic-card:hover,
.gradient-card:hover,
.neon-card:hover,
.organic-card:hover,
.pixel-card:hover,
.brutalism-card:hover,
.three-d-card:hover,
.skeuomorphic-card:hover,
.neumorphism-card:hover,
.flat-card:hover,
.material-card:hover,
.nordic-card:hover,
.futuristic-card:hover,
.retro-card:hover,
.cyberpunk-card:hover,
.steampunk-card:hover,
.aurora-card:hover,
.minimalist-card:hover,
.dark-mode-card:hover,
.glassmorphism-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}
</style>
