<template>
  <div class="not-found-page">
    <div class="not-found-content">
      <div class="error-illustration">
        <div class="error-code">404</div>
        <div class="error-icon">
          <FrownOutlined />
        </div>
      </div>
      
      <h1 class="error-title">页面未找到</h1>
      <p class="error-description">
        抱歉，您访问的页面不存在或已被移动。
      </p>
      
      <div class="error-actions">
        <a-button type="primary" @click="$router.push('/')" size="large">
          <HomeOutlined />
          返回首页
        </a-button>
        <a-button @click="$router.back()" size="large">
          <ArrowLeftOutlined />
          返回上页
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { FrownOutlined, HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue'
</script>

<style lang="scss" scoped>
@use "@/assets/styles/variables.scss" as *;
  .not-found-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, $light-gray 0%, white 100%);
    padding: $spacing-lg;
  }

  .not-found-content {
    text-align: center;
    max-width: 500px;
  }

  .error-illustration {
    position: relative;
    margin-bottom: $spacing-xxl;
  }

  .error-code {
    font-size: 8rem;
    font-weight: $font-weight-bold;
    color: $tech-blue;
    opacity: 0.1;
    line-height: 1;
    
    @media (min-width: $breakpoint-md) {
      font-size: 12rem;
    }
  }

  .error-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: $text-medium;
  }

  .error-title {
    font-size: 2rem;
    font-weight: $font-weight-bold;
    color: $text-dark;
    margin-bottom: $spacing-md;
    
    @media (min-width: $breakpoint-md) {
      font-size: 2.5rem;
    }
  }

  .error-description {
    font-size: $font-size-lg;
    color: $text-medium;
    margin-bottom: $spacing-xxl;
    line-height: 1.6;
  }

  .error-actions {
    display: flex;
    gap: $spacing-md;
    justify-content: center;
    flex-wrap: wrap;
  }
</style>
