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

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

// 根据当前语言获取项目数据
const currentProjects = projects[lang as keyof typeof projects] || projects.en;
---

<Layout title={pageTitle}>
  <GlassHeader lang={lang} client:only="react" />
  <main class="min-h-screen">
    <!-- Projects Hero Section -->
    <section class="py-24 relative overflow-hidden">
      <!-- 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>
      
      <Container client:load size="md" className="relative z-10">
        <div class="text-center mb-16">
          <!-- Main title -->
          <h1 class="text-5xl md:text-6xl 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">
            {t('projects.title')}
          </h1>

          <!-- Description -->
          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
            {t('projects.description')}
          </p>
        </div>
      </Container>
    </section>

    <!-- Projects Grid Section -->
    <section class="py-12 relative">
      <!-- Background gradient -->
      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
      
      <Container client:load size="md" className="relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
          {currentProjects.map((project) => (
            <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-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-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
              </div>
              
              <!-- Project image placeholder -->
              <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
                <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} 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 ${project.image.text}`}>
                    {project.title}
                  </div>
                </div>
              </div>
              
              <div class="p-6 pb-4">
                <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
                  <span class={`text-${project.color}-500`}>{project.icon}</span>
                  {project.title}
                </h3>
              </div>
              
              <div class="px-6 flex-grow">
                <div class="space-y-3">
                  {project.description.map((desc) => (
                    <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
                      <span class={`text-${project.color}-500 mt-1`}>•</span>
                      <span>{desc}</span>
                    </div>
                  ))}
                </div>
                
                <!-- Tech stack indicators with unified gray styling -->
                <div class="mt-6 mb-4 flex flex-wrap gap-2">
                  {project.tech.map((tech) => (
                    <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">{tech}</span>
                  ))}
                </div>
              </div>
              
              <!-- Visit project link -->
              <div class="p-6 pt-2">
                <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
                  {t('project.visit')} 
                  <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
  <Footer lang={lang} client:load />
</Layout>