<template>
  <div class="mockup-index">
    <div class="container">
      <header class="header">
        <img src="/MONACOUSA-Flags_376x376.png" alt="MonacoUSA" class="logo" />
        <h1 class="title">MonacoUSA Portal Design Mockups</h1>
        <p class="subtitle">Professional Neumorphic Design System</p>
      </header>
      
      <section class="mockup-grid">
        <NuxtLink to="/design-mockups/pages/auth/ProfessionalLogin" class="mockup-card">
          <div class="card-icon card-icon--auth">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
          </div>
          <h2 class="card-title">Login Page</h2>
          <p class="card-description">Professional split-screen login with branding section and neumorphic form</p>
          <span class="card-link">View Mockup →</span>
        </NuxtLink>
        
        <NuxtLink to="/design-mockups/pages/admin/ProfessionalAdminDashboard" class="mockup-card">
          <div class="card-icon card-icon--admin">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h2 class="card-title">Admin Dashboard</h2>
          <p class="card-description">Complete admin interface with sidebar navigation, stats, charts, and data tables</p>
          <span class="card-link">View Mockup →</span>
        </NuxtLink>
        
        <NuxtLink to="/design-mockups/pages/board/ProfessionalBoardDashboard" class="mockup-card">
          <div class="card-icon card-icon--board">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <h2 class="card-title">Board Dashboard</h2>
          <p class="card-description">Strategic insights, KPIs, governance features, and executive metrics</p>
          <span class="card-link">View Mockup →</span>
        </NuxtLink>
        
        <NuxtLink to="/design-mockups/pages/member/ProfessionalMemberDashboard" class="mockup-card">
          <div class="card-icon card-icon--member">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
          </div>
          <h2 class="card-title">Member Dashboard</h2>
          <p class="card-description">Member portal with events, resources, community features, and benefits</p>
          <span class="card-link">View Mockup →</span>
        </NuxtLink>
      </section>
      
      <section class="components-section">
        <h2 class="section-title">Core Components</h2>
        <div class="component-list">
          <div class="component-item">
            <span class="component-name">NeumorphicCard</span>
            <span class="component-status">✅ Complete</span>
          </div>
          <div class="component-item">
            <span class="component-name">ProfessionalButton</span>
            <span class="component-status">✅ Complete</span>
          </div>
          <div class="component-item">
            <span class="component-name">StatCard</span>
            <span class="component-status">✅ Complete</span>
          </div>
        </div>
      </section>
      
      <footer class="footer">
        <p>Neumorphic Design System • Professional & Inviting • Built with Vue 3 & Nuxt 3</p>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
// Disable authentication for mockups
definePageMeta({
  auth: false,
  layout: false
});
</script>

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

.mockup-index {
  min-height: 100vh;
  background: linear-gradient(135deg, $neutral-50 0%, $neutral-100 100%);
  padding: $space-8 $space-6;
}

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

.header {
  text-align: center;
  margin-bottom: $space-12;
  
  .logo {
    width: 80px;
    height: 80px;
    margin: 0 auto $space-4;
    object-fit: contain;
  }
  
  .title {
    font-family: $font-heading;
    font-size: $text-4xl;
    font-weight: $font-bold;
    color: $neutral-800;
    margin-bottom: $space-2;
  }
  
  .subtitle {
    font-size: $text-lg;
    color: $neutral-600;
  }
}

.mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $space-6;
  margin-bottom: $space-12;
}

.mockup-card {
  display: block;
  padding: $space-6;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: $radius-xl;
  box-shadow: $shadow-soft-md;
  text-decoration: none;
  transition: all $transition-base;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: $shadow-soft-lg;
    
    .card-link {
      color: $primary-700;
    }
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: $shadow-inset-sm;
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: $space-4;
    box-shadow: $shadow-soft-sm;
    
    svg {
      width: 28px;
      height: 28px;
    }
    
    &--auth {
      background: linear-gradient(135deg, rgba($primary-500, 0.1), rgba($primary-600, 0.15));
      color: $primary-600;
    }
    
    &--admin {
      background: linear-gradient(135deg, rgba($info-500, 0.1), rgba($info-500, 0.15));
      color: $info-500;
    }
    
    &--board {
      background: linear-gradient(135deg, rgba($success-500, 0.1), rgba($success-500, 0.15));
      color: $success-500;
    }
    
    &--member {
      background: linear-gradient(135deg, rgba($warning-500, 0.1), rgba($warning-500, 0.15));
      color: $warning-500;
    }
  }
  
  .card-title {
    font-family: $font-heading;
    font-size: $text-xl;
    font-weight: $font-semibold;
    color: $neutral-800;
    margin-bottom: $space-2;
  }
  
  .card-description {
    font-size: $text-sm;
    color: $neutral-600;
    line-height: $leading-relaxed;
    margin-bottom: $space-4;
  }
  
  .card-link {
    font-size: $text-sm;
    font-weight: $font-medium;
    color: $primary-600;
    transition: color $transition-base;
  }
}

.components-section {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: $radius-xl;
  padding: $space-8;
  box-shadow: $shadow-soft-md;
  margin-bottom: $space-8;
  
  .section-title {
    font-family: $font-heading;
    font-size: $text-2xl;
    font-weight: $font-semibold;
    color: $neutral-800;
    margin-bottom: $space-6;
  }
  
  .component-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: $space-4;
  }
  
  .component-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $space-3 $space-4;
    background: rgba($neutral-100, 0.5);
    border-radius: $radius-lg;
    
    .component-name {
      font-family: $font-mono;
      font-size: $text-sm;
      color: $neutral-700;
    }
    
    .component-status {
      font-size: $text-sm;
      color: $success-500;
    }
  }
}

.footer {
  text-align: center;
  padding: $space-6;
  
  p {
    font-size: $text-sm;
    color: $neutral-600;
  }
}

// Dark mode support
@include dark-mode {
  .mockup-index {
    background: linear-gradient(135deg, $neutral-900 0%, $neutral-800 100%);
  }
  
  .mockup-card {
    background: linear-gradient(145deg, $neutral-800, $neutral-700);
    
    .card-title {
      color: $neutral-100;
    }
    
    .card-description {
      color: $neutral-400;
    }
  }
  
  .components-section {
    background: linear-gradient(145deg, $neutral-800, $neutral-700);
    
    .section-title {
      color: $neutral-100;
    }
    
    .component-item {
      background: rgba($neutral-700, 0.5);
      
      .component-name {
        color: $neutral-300;
      }
    }
  }
  
  .header {
    .title {
      color: $neutral-100;
    }
    
    .subtitle {
      color: $neutral-400;
    }
  }
  
  .footer p {
    color: $neutral-400;
  }
}
</style>