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

const lang: Lang = defaultLang;
const t = useTranslations(lang);
const pageTitle = t('projects.title');
---

<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>
      
      <div class="container max-w-6xl mx-auto px-6 md:px-4 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>
      </div>
    </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>
      
      <div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
        <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>
            
            <!-- Visit project link -->
            <div class="p-6 pt-2">
              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-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>

          <!-- 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.ecommerce')}</span>
            </div>
            
            <!-- Project image placeholder -->
            <div class="h-48 bg-gradient-to-br from-green-500/20 to-green-600/20 relative overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-green-600/10 group-hover:from-green-500/20 group-hover:to-green-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-green-400">
                  E-Shop Platform
                </div>
              </div>
            </div>
            
            <div class="p-6 pb-4">
              <h3 class="text-xl group-hover:text-green-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
                <span class="text-green-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-green-500 mt-1">•</span>
                  <span>A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS.</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-green-500 mt-1">•</span>
                  <span>Responsive design with mobile-first approach for optimal user experience.</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-green-500 mt-1">•</span>
                  <span>Integrated payment processing with Stripe for secure transactions.</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-green-500 mt-1">•</span>
                  <span>Admin dashboard for inventory management and order processing.</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>
            
            <!-- Visit project link -->
            <div class="p-6 pt-2">
              <a href="#" class="inline-flex items-center text-sm font-medium text-green-500 hover:text-green-600 dark:hover:text-green-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>

          <!-- 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-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 text-xs rounded-full font-medium border border-purple-200 dark:border-purple-700">{t('project.tag.portfolio')}</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>My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.</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 dark mode support and smooth animations.</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>Optimized for performance with minimal JavaScript and efficient CSS.</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>Integrated blog section with markdown support for content management.</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">Alpine.js</span>
              </div>
            </div>
            
            <!-- Visit project link -->
            <div class="p-6 pt-2">
              <a href="#" class="inline-flex items-center text-sm font-medium text-purple-500 hover:text-purple-600 dark:hover:text-purple-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>