---
import Layout from "@/layouts/Layout.astro";
import GlassHeader from "@/components/GlassHeader";
import SkillsMarquee from "@/components/SkillsMarquee";
import Footer from "@/components/Footer";
import { useTranslations, type Lang } from "@/i18n/utils";
import { defaultLang } from "@/i18n/ui";
import { personalInfo, services } from "@/lib/data";

// 使用Astro.currentLocale获取当前语言环境
const lang = Astro.currentLocale as Lang || defaultLang;
const t = useTranslations(lang);
const pageTitle = t('site.title'); 
---

<Layout title={pageTitle}>
  <GlassHeader client:only="react" />
  <main class="min-h-screen">
    <!-- Hero Section - Inlined Content -->
    <section class="py-32 relative overflow-hidden min-h-screen flex items-center">
      <!-- Background gradient -->
      <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
      
      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
        <div class="text-center mb-16">
          <!-- Greeting -->
          <div class="flex items-center justify-center mb-6">
            <svg class="h-6 w-6 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
            </svg>
            <span class="text-purple-500 font-mono text-lg">
              Hello World! I'm
            </span>
          </div>

          <!-- Main title -->
          <h1 class="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
            {personalInfo.name}
          </h1>

          <!-- Subtitle -->
          <p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
            {personalInfo.position.en} 👨‍💻
          </p>

          <!-- Description -->
          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
            {personalInfo.description.en}
          </p>

          <!-- Action buttons -->
          <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
            <a
              href="#about"
              class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
            >
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
              </svg>
              View Projects
            </a>
            
            <a
              href={`mailto:${personalInfo.email}`}
              class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
            >
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
              Contact Me
            </a>
          </div>

          <!-- Contact info -->
          <div class="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
            <div class="flex items-center gap-2 hover:text-foreground transition-colors">
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              China
            </div>

            <a
              href={personalInfo.github}
              target="_blank"
              rel="noopener noreferrer"
              class="flex items-center gap-2 hover:text-foreground transition-colors"
            >
              <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
              GitHub
            </a>

            <a
              href={personalInfo.linkedin}
              target="_blank"
              rel="noopener noreferrer"
              class="flex items-center gap-2 hover:text-foreground transition-colors"
            >
              <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
              </svg>
              LinkedIn
            </a>
          </div>
        </div>

        <!-- Terminal mockup -->
        <div class="max-w-4xl mx-auto">
          <div class="bg-gray-900/90 backdrop-blur-sm rounded-lg border border-gray-700/50 shadow-2xl overflow-hidden">
            <!-- Terminal header -->
            <div class="flex items-center justify-between px-4 py-3 bg-gray-800/50 border-b border-gray-700/50">
              <div class="flex items-center gap-2">
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
              </div>
              <div class="text-gray-400 text-sm font-mono">
                {personalInfo.terminal.username}
              </div>
              <div></div>
            </div>
            
            <!-- Terminal content -->
            <div class="p-6 font-mono text-sm">
              <div class="space-y-2">
                <div class="flex items-center">
                  <span class="text-purple-400 mr-2">$</span>
                  <span class="text-white">whoami</span>
                </div>
                <div class="text-purple-300 ml-4">Joy Zhao</div>
                
                <div class="flex items-center mt-4">
                  <span class="text-purple-400 mr-2">$</span>
                  <span class="text-white">cat about.txt</span>
                </div>
                <div class="text-gray-300 ml-4 leading-relaxed">
                  OS: DevOS v4.2.0<br/>
                  Host: ThinkPad X1 Carbon<br/>
                  Kernel: 5.15.0-dev<br/>
                  Uptime: 45 days, 17 hours<br/>
                  Languages: JavaScript, Python, Go<br/>
                  Editor: VSCode / Neovim<br/>
                  Frameworks: React, Next.js, Node.js
                </div>
                
                <div class="flex items-center mt-4">
                  <span class="text-purple-400 mr-2">$</span>
                  <span class="text-white">ls projects/</span>
                </div>
                <div class="text-purple-200 ml-4">
                  taskify-app/  e-commerce-platform/  portfolio-site/
                </div>
                
                <div class="flex items-center mt-4">
                  <span class="text-purple-400 mr-2">$</span>
                  <span class="text-white animate-pulse">_</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <SkillsMarquee lang={lang} client:only="react" />
    
    <!-- Services Section - Inlined Content -->
    <section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
      <div class="max-w-6xl mx-auto">
        <h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          Services I Offer
        </h2>
        
        <div class="grid md:grid-cols-2 gap-8">
          {services.en.map((service) => (
            <div class="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
              <div class="flex items-center mb-6">
                <div class={`w-12 h-12 bg-gradient-to-r ${service.icon.gradient} rounded-lg flex items-center justify-center mr-4`}>
                  <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <Fragment set:html={service.icon.svg} />
                  </svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-800 dark:text-white">{service.title}</h3>
              </div>
              <ul class="space-y-3">
                {service.items.map((item, index) => (
                  <li class="flex items-start">
                    <span class={`text-${service.color}-500 mr-3 mt-1`}>{index + 1}.</span>
                    <span class="text-slate-600 dark:text-slate-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
    
    <!-- About Section - Inlined Content -->
    <section id="about" class="py-24 relative overflow-hidden">
      <!-- Background gradient -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
      
      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
        <div class="text-center mb-16">
          <!-- Section Title -->
          <div class="flex items-center justify-center mb-6">
            <h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              About Me
            </h2>
          </div>

          <!-- About Content -->
          <div class="grid lg:grid-cols-2 gap-12 items-stretch">
            <!-- Left side - Description and Stats -->
            <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm border border-white/30 dark:border-gray-700/40 rounded-xl p-6 space-y-8">
              <!-- Description -->
              <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                  <span class="mr-2">👋</span>
                  About Me
                </h3>
                <div class="prose prose-lg dark:prose-invert max-w-none">
                  {personalInfo.about.en.map((paragraph) => (
                    <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
                      {paragraph}
                    </p>
                  ))}
                </div>
              </div>

              <!-- Stats Grid -->
              <div class="grid grid-cols-3 gap-4">
                <div class="text-center p-4 rounded-xl bg-white/30 dark:bg-gray-700/60 backdrop-blur-sm border border-white/40 dark:border-gray-600/50 hover:bg-white/40 dark:hover:bg-gray-700/80 transition-all duration-300">
                  <svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                  </svg>
                  <div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {personalInfo.stats.repositories}
                  </div>
                  <div class="text-xs text-gray-600 dark:text-gray-400">
                    Repositories
                  </div>
                </div>
                
                <div class="text-center p-4 rounded-xl bg-white/30 dark:bg-gray-700/60 backdrop-blur-sm border border-white/40 dark:border-gray-600/50 hover:bg-white/40 dark:hover:bg-gray-700/80 transition-all duration-300">
                  <svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2.25"></path>
                  </svg>
                  <div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {personalInfo.stats.commits}
                  </div>
                  <div class="text-xs text-gray-600 dark:text-gray-400">
                    Commits
                  </div>
                </div>
                
                <div class="text-center p-4 rounded-xl bg-white/30 dark:bg-gray-700/60 backdrop-blur-sm border border-white/40 dark:border-gray-600/50 hover:bg-white/40 dark:hover:bg-gray-700/80 transition-all duration-300">
                  <svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                  </svg>
                  <div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {personalInfo.stats.contributions}
                  </div>
                  <div class="text-xs text-gray-600 dark:text-gray-400">
                    PRs Merged
                  </div>
                </div>
              </div>
            </div>

            <!-- Right side - Skills Toolbox -->
            <div class="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm border border-white/30 dark:border-gray-700/40 rounded-xl p-6 flex flex-col">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                <span class="mr-2">💻</span>
                My Toolbox
              </h3>
              
              <div class="space-y-6 flex-1">
                <!-- Skills Progress -->
                <div class="space-y-4">
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Frontend</span>
                    <span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded">90%</span>
                  </div>
                  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full" style="width: 90%"></div>
                  </div>
                  
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Backend</span>
                    <span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded">85%</span>
                  </div>
                  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-gradient-to-r from-green-500 to-teal-500 h-2 rounded-full" style="width: 85%"></div>
                  </div>
                  
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-700 dark:text-gray-300">DevOps</span>
                    <span class="px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded">75%</span>
                  </div>
                  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 75%"></div>
                  </div>
                  
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Mobile</span>
                    <span class="px-2 py-1 text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 rounded">65%</span>
                  </div>
                  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full" style="width: 65%"></div>
                  </div>
                </div>
                
                <!-- Tech Stack Tags -->
                 <div>
                   <div class="flex flex-wrap gap-2">
                     {['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => (
                       <span
                         class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                       >
                         {tech}
                       </span>
                     ))}
                   </div>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Projects Section - Inlined Content -->
    <section id="projects" class="py-20 relative">
      <!-- Background gradient -->
      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
      
      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
            Latest Projects
          </h2>
          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
            A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details.
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
          <!-- Taskify App Project -->
          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
            <!-- Project tag - positioned at top right -->
            <div class="absolute top-4 right-4 z-10">
              <span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
            </div>
            
            <!-- Project image placeholder -->
            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
              <div class="absolute bottom-4 left-4 right-4">
                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
                  Taskify App
                </div>
              </div>
            </div>
            
            <div class="p-6 pb-4">
              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
                <span class="text-purple-500">📱</span>
                Taskify App
              </h3>
            </div>
            
            <div class="px-6 flex-grow">
              <div class="space-y-3">
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>A comprehensive task management application with drag-and-drop functionality.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Built with React, TypeScript, and Tailwind CSS for modern development.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Real-time collaboration features with WebSocket integration for instant updates.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Advanced task filtering, sorting, and project management capabilities.</span>
                </div>
              </div>
              
              <!-- Tech stack indicators with unified gray styling -->
              <div class="mt-6 mb-4 flex flex-wrap gap-2">
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">MongoDB</span>
              </div>
            </div>
            
            <div class="p-6 pt-4 border-t border-border/30">
              <div class="flex justify-center">
                <a
                  href="https://github.com/zhaoguiyang/taskify-app"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors group/link"
                >
                  <span>🔗</span>
                  {t('project.visit')}
                </a>
              </div>
            </div>
          </div>

          <!-- E-Shop Platform Project -->
          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
            <!-- Project tag - positioned at top right -->
            <div class="absolute top-4 right-4 z-10">
              <span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.opensource')}</span>
            </div>
            
            <!-- Project image placeholder -->
            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
              <div class="absolute bottom-4 left-4 right-4">
                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
                  E-Shop Platform
                </div>
              </div>
            </div>
            
            <div class="p-6 pb-4">
              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
                <span class="text-purple-500">🛒</span>
                E-Shop Platform
              </h3>
            </div>
            
            <div class="px-6 flex-grow">
              <div class="space-y-3">
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Modern e-commerce solution with comprehensive features for online retail.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Built with Next.js, Prisma, and Stripe for seamless payment processing.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Features shopping cart, payment integration, and admin dashboard.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Responsive design with optimized performance and SEO capabilities.</span>
                </div>
              </div>
              
              <!-- Tech stack indicators with unified gray styling -->
              <div class="mt-6 mb-4 flex flex-wrap gap-2">
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
              </div>
            </div>
            
            <div class="p-6 pt-4 border-t border-border/30">
              <div class="flex justify-center">
                <a
                  href="https://github.com/zhaoguiyang/e-shop-platform"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex items-center gap-2 text-sm text-green-400 hover:text-green-300 transition-colors group/link"
                >
                  <span>🔗</span>
                  {t('project.visit')}
                </a>
              </div>
            </div>
          </div>

          <!-- Portfolio Site Project -->
          <div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative">
            <!-- Project tag - positioned at top right -->
            <div class="absolute top-4 right-4 z-10">
              <span class="px-3 py-1 bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs rounded-full font-medium border border-amber-200 dark:border-amber-700">{t('project.tag.personal')}</span>
            </div>
            
            <!-- Project image placeholder -->
            <div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
              <div class="absolute bottom-4 left-4 right-4">
                <div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
                  Portfolio Site
                </div>
              </div>
            </div>
            
            <div class="p-6 pb-4">
              <h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
                <span class="text-purple-500">🎨</span>
                Portfolio Site
              </h3>
            </div>
            
            <div class="px-6 flex-grow">
              <div class="space-y-3">
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Responsive personal portfolio website showcasing creative work and projects.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Built with Astro, React, and Tailwind CSS for optimal performance.</span>
                </div>
                <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                  <span class="text-purple-500 mt-1">•</span>
                  <span>Features dark mode support and smooth animations for enhanced UX.</span>
                </div>
              </div>
              
              <!-- Tech stack indicators with unified gray styling -->
              <div class="mt-6 mb-4 flex flex-wrap gap-2">
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
                <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Animate</span>
              </div>
            </div>
            
            <div class="p-6 pt-4 border-t border-border/30">
              <div class="flex justify-center">
                <a
                  href="https://zhaoguiyang.site"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-300 transition-colors group/link"
                >
                  <span>🔗</span>
                  {t('project.visit')}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <Footer lang={lang} client:only="react" />
</Layout>