import { ArrowUpRight } from "lucide-react";
import { useTheme } from "next-themes";
import BorderGlow from "@/components/BorderGlow";
import { TextHoverEffect } from "@/components/ui/text-hover-effect";

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

const projects: Project[] = [
  {
    title: "Email Sorter",
    description: "Automatisierung · E-Mail-Workflows für Teams",
    image: "/project%20pics/emailsorter.png",
    url: "https://emailsorter.webklar.com/",
  },
  {
    title: "Neutral",
    description: "Website · Markenauftritt & Custom Development",
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "Verbatim Labs",
    description: "Website · UI/UX & individuelle Entwicklung",
    image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "JMK Engineers",
    description: "Website · Technische Präsentation & Lead-Generierung",
    image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
    url: "#",
  },
  {
    title: "GOODZ Club",
    description: "Website · Mehrsprachig & skalierbare Plattform",
    image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
    url: "#",
  },
];

const ProjectShowcase = () => {
  const { resolvedTheme } = useTheme();
  const cardBg = resolvedTheme === "dark" ? "hsl(0 0% 6%)" : "hsl(0 0% 96%)";

  return (
    <section id="projects" className="pt-8 pb-24 md:pt-12 md:pb-32 bg-background relative">
      {/* TextHoverEffect */}
      <div className="h-[14rem] flex items-center justify-center -mb-4 relative z-10">
        <TextHoverEffect text="Projekte" />
      </div>
      <div className="container mx-auto px-6">

        {/* Projects Grid */}
        <div className="space-y-2">
          {projects.map((project, index) => (
            <BorderGlow
              key={project.title}
              edgeSensitivity={30}
              glowColor="40 80 80"
              backgroundColor={cardBg}
              borderRadius={8}
              glowRadius={30}
              glowIntensity={0.8}
              coneSpread={25}
              colors={['#c084fc', '#f472b6', '#38bdf8']}
            >
              <a
                href={project.url}
                target={project.url.startsWith("http") ? "_blank" : undefined}
                rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
                className="group block 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>
            </BorderGlow>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProjectShowcase;