import { projects } from "@/data/projects";
import { ArrowRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import ScrollReveal from "./ScrollReveal";

export default function Projects() {
  return (
    <section id="projects" className="py-28 md:py-36 bg-surface noise-overlay">
      <div className="relative z-10 max-w-6xl mx-auto px-6">
        {/* Section header */}
        <ScrollReveal>
          <div className="flex flex-col md:flex-row md:items-end md:justify-between mb-16">
            <div>
              <div className="w-10 h-px bg-accent mb-6 glow-accent-sm" />
              <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
                Projects
              </p>
              <h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight">
                Selected <span className="text-gradient">work.</span>
              </h2>
            </div>
            <p className="text-white/55 mt-4 md:mt-0 max-w-md text-[15px] leading-relaxed">
              Broadcast facility design and systems integration for enterprise,
              sports, aerospace, and financial services clients.
            </p>
          </div>
        </ScrollReveal>

        {/* Project grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {projects.map((project, index) => (
            <ScrollReveal
              key={project.slug}
              delay={index * 60}
              className={index === 0 ? "md:col-span-2" : ""}
            >
              <Link
                href={`/projects/${project.slug}`}
                className="group relative block bg-surface-card rounded-xl overflow-hidden border border-border hover:border-border-hover transition-all duration-400 border-glow"
              >
                {/* Thumbnail image */}
                <div
                  className={`relative overflow-hidden ${
                    index === 0 ? "h-64 md:h-80" : "h-48 md:h-56"
                  }`}
                >
                  <Image
                    src={project.thumbnail}
                    alt={project.title}
                    fill
                    className="object-cover group-hover:scale-[1.03] transition-transform duration-700 ease-out"
                    sizes={index === 0 ? "100vw" : "50vw"}
                  />
                  {/* Gradient overlay */}
                  <div className="absolute inset-0 bg-gradient-to-t from-surface-card via-black/30 to-transparent" />
                  {/* Hover tint */}
                  <div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-400" />

                  {/* Category badge on image */}
                  <div className="absolute top-4 left-4">
                    <span className="px-3 py-1.5 text-[10px] font-mono tracking-wider uppercase bg-black/60 backdrop-blur-sm text-white/90 rounded-md border border-white/10">
                      {project.category}
                    </span>
                  </div>
                </div>

                {/* Content */}
                <div className="p-6 md:p-7">
                  <div className="flex items-center gap-2 mb-3">
                    <span className="font-mono text-[11px] text-white/45">
                      {project.year}
                    </span>
                  </div>

                  <h3 className="text-lg md:text-xl font-semibold text-white mb-2.5 group-hover:text-accent transition-colors duration-300">
                    {project.client}
                  </h3>

                  <p className="text-[13.5px] text-white/55 leading-relaxed mb-4 line-clamp-2">
                    {project.summary}
                  </p>

                  <div className="flex items-center text-[13px] font-medium text-accent translate-x-0 group-hover:translate-x-1 transition-transform duration-300">
                    View Case Study
                    <ArrowRight size={14} className="ml-1.5" />
                  </div>
                </div>
              </Link>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}