<template>
  <div class="design-test-page">
    <div class="container">
      <h1 class="page-title">New Design System Test Pages</h1>
      <p class="page-subtitle">Testing implementation of the new Neumorphic design with morphing dropdowns</p>
      
      <div class="navigation-grid">
        <NuxtLink to="/admin/dashboard-v2" class="nav-card neumorphic-card">
          <Icon name="mdi:view-dashboard" class="nav-icon" />
          <h2>Admin Dashboard V2</h2>
          <p>New admin dashboard with neumorphic design and morphing dropdowns</p>
        </NuxtLink>
        
        <NuxtLink to="/board/dashboard-v2" class="nav-card neumorphic-card">
          <Icon name="mdi:chart-box" class="nav-icon" />
          <h2>Board Dashboard V2</h2>
          <p>Executive dashboard with KPIs and strategic insights</p>
        </NuxtLink>
        
        <NuxtLink to="/admin/dashboard" class="nav-card neumorphic-card">
          <Icon name="mdi:view-dashboard-outline" class="nav-icon" />
          <h2>Current Admin Dashboard</h2>
          <p>Compare with the existing admin dashboard</p>
        </NuxtLink>
        
        <NuxtLink to="/board/dashboard" class="nav-card neumorphic-card">
          <Icon name="mdi:chart-box-outline" class="nav-icon" />
          <h2>Current Board Dashboard</h2>
          <p>Compare with the existing board dashboard</p>
        </NuxtLink>
      </div>
      
      <div class="design-info">
        <h3>Design System Features</h3>
        <ul>
          <li>✨ Neumorphic cards and buttons with soft shadows</li>
          <li>💧 Glassmorphic blue morphing dropdowns</li>
          <li>🎯 Monaco red primary color maintained</li>
          <li>📱 Responsive grid layouts</li>
          <li>🎨 Professional and inviting aesthetic</li>
          <li>⚡ Smooth spring animations</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
// No authentication required for testing
definePageMeta({
  auth: false,
  layout: false
})
</script>

<style lang="scss" scoped>
// Import the new design system
@import '@/design-mockups/styles/design-system.scss';

.design-test-page {
  min-height: 100vh;
  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
  padding: 3rem 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  font-size: $text-4xl;
  font-weight: $font-bold;
  background: linear-gradient(135deg, $primary-600, $primary-800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.page-subtitle {
  text-align: center;
  color: $neutral-600;
  font-size: $text-lg;
  margin-bottom: 3rem;
}

.navigation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.nav-card {
  @include neumorphic-card('md');
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: all $transition-base;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  &:hover {
    @include neumorphic-card('lg');
    transform: translateY(-4px);
    
    .nav-icon {
      transform: scale(1.1);
      color: $primary-600;
    }
  }
  
  .nav-icon {
    width: 48px;
    height: 48px;
    color: $neutral-600;
    margin-bottom: 1rem;
    transition: all $transition-base;
  }
  
  h2 {
    font-size: $text-xl;
    font-weight: $font-semibold;
    color: $neutral-800;
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: $text-sm;
    color: $neutral-600;
    line-height: $leading-relaxed;
  }
}

.design-info {
  @include neumorphic-card('lg');
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  
  h3 {
    font-size: $text-xl;
    font-weight: $font-semibold;
    color: $neutral-800;
    margin-bottom: 1.5rem;
  }
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      padding: 0.75rem 0;
      color: $neutral-700;
      font-size: $text-base;
      border-bottom: 1px solid rgba($neutral-200, 0.5);
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

// Neumorphic Elements
.neumorphic-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: $radius-xl;
  box-shadow: $shadow-soft-md;
}
</style>