import { ArrowUpRight } from "lucide-react";

type Project = {
  title: string;
  description: string;
  image: string;
  url: string;
};

const projects: Project[] = [
  {
    title: "Email Sorter",
    description: "E-Mails automatisch sortieren",
    image: "/project%20pics/emailsorter.png",
    url: "https://emailsorter.webklar.com/",
  },
  {
    title: "Neutral",
    description: "Webentwicklung / Custom Code",
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "Verbatim Labs",
    description: "Webentwicklung / UI Design / Custom Code",
    image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "JMK Engineers",
    description: "Webentwicklung / UI Design / Custom Code",
    image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "GOODZ Club",
    description: "Webentwicklung / Custom Code / Lokalisierung",
    image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
    url: "#",
  },
];

const ProjectShowcase = () => {
  return (
    <section id="projects" className="py-24 md:py-32 bg-background relative">
      <div className="container mx-auto px-6">
        {/* Section Header */}
        <div className="mb-16 md:mb-24">
          <div className="label-tag mb-4">Ausgewählte Arbeiten</div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase">
            Projekte
          </h2>
        </div>

        {/* Projects Grid */}
        <div className="space-y-2">
          {projects.map((project, index) => (
            <a
              key={project.title}
              href={project.url}
              target={project.url.startsWith("http") ? "_blank" : undefined}
              rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
              className="group block project-card rounded-lg p-6 md:p-8"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="flex-1">
                  <h3 className="text-2xl md:text-3xl font-display font-medium text-foreground mb-2 group-hover:text-muted-foreground transition-colors uppercase tracking-tight">
                    {project.title}
                  </h3>
                  <p className="text-muted-foreground text-sm uppercase tracking-wider">
                    {project.description}
                  </p>
                </div>
                <div className="flex items-center gap-4">
                  <div className="w-24 h-16 md:w-32 md:h-20 rounded overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <img 
                      src={project.image} 
                      alt={project.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <ArrowUpRight className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProjectShowcase;