import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { projectsList } from "../data/content";
import SectionHeader from "../components/SectionHeader";
import { MapPin, Calendar, ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";
const categories = ["All", "Inspection", "Advanced NDT", "Asset Integrity", "Manpower"];
export default function Projects() {
  const [activeTab, setActiveTab] = useState("All");
  const filteredProjects = activeTab === "All" ? projectsList : projectsList.filter((p) => p.category === activeTab);
  return <div className="bg-slate-50 min-h-screen text-slate-900">
      
      {
    /* Page Header */
  }
      <section
    className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
    style={{ backgroundImage: "url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80')" }}
  >
        <div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
        <div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
          <span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
            Case Studies
          </span>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
            Our Completed Projects
          </h1>
          <p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
            Real mechanical-integrity evaluations, advanced NDT scans, and technical manpower shutdowns delivered across KSA and India.
          </p>
        </div>
      </section>

      {
    /* Projects Grid Section with Filter Tabs */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-12">
          <SectionHeader
    tag="Proven Results"
    title="Integrity Assurance in Action"
    description="Browse case reports covering refinery turnarounds, cross-country pipelines, offshore welds, and advanced tube scans."
  />
          
          {
    /* Category Tabs */
  }
          <div className="flex flex-wrap gap-2 bg-slate-100 p-1.5 rounded-xl border border-slate-200">
            {categories.map((cat) => <button
    key={cat}
    onClick={() => setActiveTab(cat)}
    className={`text-xs font-bold uppercase tracking-wider px-5 py-2.5 rounded-lg transition-all duration-200 ${activeTab === cat ? "bg-orange-500 text-white shadow-md" : "text-slate-600 hover:text-orange-500"}`}
  >
                {cat}
              </button>)}
          </div>
        </div>

        {
    /* Dynamic Project Grid with framer motion animations */
  }
        <motion.div
    layout
    className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
  >
          <AnimatePresence mode="popLayout">
            {filteredProjects.map((p) => <motion.article
    layout
    initial={{ opacity: 0, scale: 0.95 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0, scale: 0.95 }}
    transition={{ duration: 0.3 }}
    key={p.id}
    className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-md flex flex-col justify-between group hover:border-orange-500/20 hover:-translate-y-1 transition-all duration-300"
  >
                <div>
                  <div className="aspect-[4/3] bg-slate-100 relative overflow-hidden">
                    <img
    src={p.image}
    alt={p.title}
    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
    referrerPolicy="no-referrer"
  />
                    <span className="absolute top-4 left-4 bg-orange-500 text-white font-bold text-[9px] uppercase tracking-wider px-3 py-1 rounded-full border border-orange-500/20 shadow-md">
                      {p.category}
                    </span>
                  </div>
                  
                  <div className="p-6 space-y-4">
                    <div className="flex flex-wrap gap-x-4 gap-y-2 text-[11px] text-slate-500 font-medium">
                      <span className="flex items-center gap-1.5">
                        <MapPin className="w-3.5 h-3.5 text-orange-500 shrink-0" />
                        <span>{p.location}</span>
                      </span>
                      <span className="flex items-center gap-1.5">
                        <Calendar className="w-3.5 h-3.5 text-orange-500 shrink-0" />
                        <span>{p.year}</span>
                      </span>
                    </div>

                    <h3 className="font-heading text-lg font-bold text-slate-900 group-hover:text-orange-500 transition-colors">
                      {p.title}
                    </h3>
                    <p className="text-xs text-slate-500 leading-relaxed font-light">
                      {p.description}
                    </p>
                  </div>
                </div>

                <div className="p-6 pt-0 mt-2 border-t border-slate-50 flex items-center justify-between text-[11px]">
                  <span className="text-slate-400">Client: <strong>{p.client}</strong></span>
                  <Link to="/contact" className="text-orange-500 hover:text-orange-600 font-bold uppercase tracking-wider flex items-center gap-1">
                    <span>Enquire</span>
                    <ChevronRight className="w-3.5 h-3.5" />
                  </Link>
                </div>
              </motion.article>)}
          </AnimatePresence>
        </motion.div>
      </section>

    </div>;
}
