import { motion } from "framer-motion";
import { fadeIn } from "@/lib/animations";
import { Card, CardContent } from "@/components/ui/card";
import { useTranslation } from "@/lib/i18n/TranslationContext";

export default function Projects() {
  const { t } = useTranslation();

  return (
    <section id="projects" className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <motion.h2 
            variants={fadeIn}
            className="text-4xl font-bold text-blue-900 mb-4"
          >
            {t.projects.title}
          </motion.h2>
          <motion.p 
            variants={fadeIn}
            className="text-gray-600 max-w-2xl mx-auto"
          >
            {t.projects.subtitle}
          </motion.p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {t.projects.items.map((project, index) => (
            <motion.div
              key={index}
              variants={fadeIn}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              custom={index * 0.2}
            >
              <Card className="overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                <div className="h-48 relative overflow-hidden bg-blue-100 flex items-center justify-center">
                  {index === 0 && (
                    <a 
                      href="https://europass.europa.eu/" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="w-full h-full flex items-center justify-center"
                    >
                      <img 
                        src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/European_Commission.svg/800px-European_Commission.svg.png"
                        alt="European Commission Logo"
                        className="w-full h-full object-contain p-8"
                      />
                    </a>
                  )}
                  {index === 1 && (
                    <a 
                      href="https://hyperfox.com/" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="w-full h-full flex items-center justify-center"
                    >
                      <img 
                        src="https://cdn.prod.website-files.com/64880d2281ab836c5d5ac26c/64881594d0c3754ccf78126f_Hyperfox-Logo-Positive.svg"
                        alt="Hyperfox Logo"
                        className="w-full h-full object-contain p-8"
                      />
                    </a>
                  )}
                  {index === 2 && (
                    <a 
                      href="https://www.manning.com/liveproject/sentiment-analysis-of-video-with-aws-services" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="w-full h-full flex items-center justify-center"
                    >
                      <img 
                        src="https://airflowsummit.org/images/partners/manning.png"
                        alt="Manning Publications Logo"
                        className="w-full h-full object-contain p-8"
                      />
                    </a>
                  )}
                  {index === 3 && (
                    <a 
                      href="https://fairmart.app/" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="w-full h-full flex items-center justify-center"
                    >
                      <img 
                        src="https://www.dbs.com.sg/documents/276102/378728143/Fairmart-Logo-Stroke-2-large.png/91a6ae65-f78b-b448-3057-9c4a9b6f75d9?t=1684909089521&imagePreview=1"
                        alt="Fairmart Logo"
                        className="w-full h-full object-contain p-8"
                      />
                    </a>
                  )}
                </div>
                <CardContent className="p-6">
                  <h3 className="text-xl font-semibold text-blue-900 mb-2">
                    {project.title}
                  </h3>
                  <p className="text-blue-600 text-sm mb-2">{project.client}</p>
                  <p className="text-gray-600 mb-4">
                    {project.description}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {index === 0 && (
                      <>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Cloud Migration</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Security Architecture</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">DevOps</span>
                      </>
                    )}
                    {index === 1 && (
                      <>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Technical Leadership</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">SaaS Architecture</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">AI Integration</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Fundraising</span>
                      </>
                    )}
                    {index === 2 && (
                      <>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">AWS Architecture</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Serverless</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Video Processing</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Technical Writing</span>
                      </>
                    )}
                    {index === 3 && (
                      <>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Technical Leadership</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">AWS Serverless</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">React.js</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">DDD</span>
                        <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">Event Sourcing</span>
                      </>
                    )}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}