import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { galleryPhotos } from "../data/content";
import SectionHeader from "../components/SectionHeader";
const categories = ["All", "Inspection", "Conventional NDT", "Advanced NDT", "Asset Integrity", "Manpower"];
export default function Gallery() {
  const [activeTab, setActiveTab] = useState("All");
  const filteredPhotos = activeTab === "All" ? galleryPhotos : galleryPhotos.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-1504307651254-35680f356dfd?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">
            Media Hub
          </span>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
            Field Operations Gallery
          </h1>
          <p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
            An inside look at our certified field inspectors, high-frequency ultrasonic tools, and shutdown planning centers.
          </p>
        </div>
      </section>

      {
    /* Gallery Photos Grid with 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="Visual Records"
    title="Calibrated NDT Field Work"
    description="View real operations covering magnetic particle tests, vacuum box weld assessments, and computerized tube bundle diagnostics."
  />
          
          {
    /* 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 Photo Grid with framer motion layout transitions */
  }
        <motion.div
    layout
    className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  >
          <AnimatePresence mode="popLayout">
            {filteredPhotos.map((photo, idx) => <motion.div
    layout
    initial={{ opacity: 0, scale: 0.95 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0, scale: 0.95 }}
    transition={{ duration: 0.3 }}
    key={photo.title}
    className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-sm hover:shadow-lg hover:border-orange-500/20 transition-all duration-300 group flex flex-col justify-between"
  >
                <div className="aspect-square overflow-hidden relative bg-slate-100">
                  <img
    src={photo.image}
    alt={photo.title}
    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
    referrerPolicy="no-referrer"
  />
                  <span className="absolute top-3 left-3 bg-slate-950/80 text-white font-mono text-[9px] uppercase tracking-wider px-2 py-0.5 rounded">
                    {photo.category}
                  </span>
                </div>
                <div className="p-4 bg-white">
                  <h3 className="font-heading text-xs font-bold text-slate-800 line-clamp-2 leading-snug group-hover:text-orange-500 transition-colors">
                    {photo.title}
                  </h3>
                </div>
              </motion.div>)}
          </AnimatePresence>
        </motion.div>
      </section>

    </div>;
}
