"use client";

import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { ExternalLink, Github } from "lucide-react";

const projects = [
  {
    title: "E-Ticaret Platformu",
    description:
      "Modern ve kullanıcı dostu bir e-ticaret platformu. Next.js, TypeScript ve Stripe entegrasyonu ile geliştirildi.",
    tech: ["Next.js", "TypeScript", "Stripe", "Tailwind CSS"],
    image: "/api/placeholder/600/400",
    github: "#",
    live: "#",
  },
  {
    title: "Sosyal Medya Dashboard",
    description:
      "Gerçek zamanlı analitik ve içerik yönetimi için gelişmiş bir dashboard uygulaması.",
    tech: ["React", "Node.js", "MongoDB", "Chart.js"],
    image: "/api/placeholder/600/400",
    github: "#",
    live: "#",
  },
  {
    title: "AI Destekli Blog Platformu",
    description:
      "Yapay zeka destekli içerik önerileri ve otomatik SEO optimizasyonu ile blog platformu.",
    tech: ["Next.js", "OpenAI API", "Prisma", "PostgreSQL"],
    image: "/api/placeholder/600/400",
    github: "#",
    live: "#",
  },
  {
    title: "Proje Yönetim Aracı",
    description:
      "Takımlar için kapsamlı proje yönetim ve işbirliği platformu.",
    tech: ["React", "Express", "Socket.io", "PostgreSQL"],
    image: "/api/placeholder/600/400",
    github: "#",
    live: "#",
  },
];

export function Projects() {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  return (
    <section
      id="projects"
      ref={ref}
      className="relative py-24 bg-white dark:bg-dark-bg"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            <span className="gradient-text">Projelerim</span>
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            Son dönemde geliştirdiğim öne çıkan projeler
          </p>
        </motion.div>

        {/* Projects Grid */}
        <div className="grid md:grid-cols-2 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={project.title}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ y: -5 }}
              className="group rounded-xl overflow-hidden glass-effect hover:bg-white/20 dark:hover:bg-white/10 transition-all"
            >
              {/* Project Image */}
              <div className="relative h-64 bg-gradient-to-br from-primary-500/20 via-purple-500/20 to-pink-500/20 overflow-hidden">
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-4xl font-bold gradient-text">
                    {project.title.charAt(0)}
                  </div>
                </div>
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-4">
                  <motion.a
                    href={project.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    className="p-3 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors"
                  >
                    <Github className="w-6 h-6" />
                  </motion.a>
                  <motion.a
                    href={project.live}
                    target="_blank"
                    rel="noopener noreferrer"
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    className="p-3 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors"
                  >
                    <ExternalLink className="w-6 h-6" />
                  </motion.a>
                </div>
              </div>

              {/* Project Content */}
              <div className="p-6">
                <h3 className="text-2xl font-bold mb-2">{project.title}</h3>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                  {project.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {project.tech.map((tech) => (
                    <span
                      key={tech}
                      className="px-3 py-1 text-xs font-medium rounded-full bg-primary-500/10 text-primary-700 dark:text-primary-400"
                    >
                      {tech}
                    </span>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}






