// pages-design-center.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-pages-design-center',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  template: `
    <header class="header">
      <div class="header-content">
        <h1>设计中心</h1>
        <p>释放你的创意想象</p>
      </div>
    </header>

    <div class="design-tool-nav">
      <nav>
        <ul>
          <li><a routerLink="color-diy" routerLinkActive="active">颜色设计</a></li>
          <li><a routerLink="advanced-custom" routerLinkActive="active">高级定制</a></li>
          <li><a routerLink="embroidery-editor" routerLinkActive="active">刺绣编辑</a></li>
          <li><a routerLink="accessory-system" routerLinkActive="active">配饰系统</a></li>
          <li><a routerLink="sticker-library" routerLinkActive="active">贴图库</a></li>
          <li><a routerLink="material-texture" routerLinkActive="active">材质纹理</a></li>
          <li><a routerLink="trending-colors" routerLinkActive="active">流行色彩</a></li>
        </ul>
      </nav>
    </div>

    <main>
      <router-outlet></router-outlet>
    </main>
  `,
  styles: [`
    .header {
      background: linear-gradient(45deg, #ff6b6b, #ffa726);
      padding: 20px 20px 15px;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
      animation: float 20s infinite linear;
    }

    @keyframes float {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .header-content {
      position: relative;
      z-index: 2;
    }

    .header h1 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 5px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .header p {
      opacity: 0.9;
      font-size: 14px;
    }

    .design-tool-nav {
      background: white;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .design-tool-nav nav ul {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 5px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .design-tool-nav nav a {
      display: block;
      padding: 8px 15px;
      background: #f8f9fa;
      border-radius: 20px;
      color: #333;
      text-decoration: none;
      font-size: 14px;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .design-tool-nav nav a:hover {
      background: #e9ecef;
    }

    .design-tool-nav nav a.active {
      background: linear-gradient(45deg, #ff6b6b, #ffa726);
      color: white;
    }
  `]
})
export class PagesDesignCenter {}
