import { motion } from 'framer-motion';
import Image from 'next/image';
import {
  BookOpenIcon,
  RocketLaunchIcon,
  PuzzlePieceIcon
} from '@heroicons/react/24/outline';

export default function Projects() {
  const projects = [
    {
      title: 'Textbased Survival',
      description: 'Ein spannendes Textbasiertes Survival Abenteuer mit fesselnder Story.',
      image: '/assets/images/fantasy-quest.png',
      icon: BookOpenIcon,
    },
    {
      title: 'Space Explorer',
      description: 'Erkunde das Universum in diesem actiongeladenen Weltraumabenteuer.',
      image: '/assets/images/space-explorer.png',
      icon: RocketLaunchIcon,
    },
    {
      title: 'Puzzle Master',
      description: 'Fordere deinen Verstand mit kniffligen Rätseln heraus.',
      image: '/assets/images/puzzle-master.png',
      icon: PuzzlePieceIcon,
    },
  ];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <h1 className="text-4xl font-bold mb-6">Unsere Projekte</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Entdecken Sie einige unserer neuesten Apps und Spiele, die wir mit Leidenschaft entwickelt haben.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {projects.map((project, index) => {
              const Icon = project.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.2 }}
                  className="bg-white p-6 rounded-lg shadow-sm"
                >
                  <div className="flex items-center justify-center mb-4">
                    <Icon className="h-12 w-12 text-pb-turquoise" />
                  </div>
                  <div className="relative w-full h-48 mb-4 rounded-lg overflow-hidden">
                    <Image
                      src={project.image}
                      alt={project.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
                  <p className="text-gray-600">{project.description}</p>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>
    </motion.div>
  );
}
