import { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, MapPin } from 'lucide-react';
import Reveal from '../components/ui/Reveal';

type Category = 'All' | 'Residential' | 'Institutional' | 'Commercial' | 'Industrial';

const projects = [
  {
    id: 5, title: 'Lusail North District Cooling Plant', type: 'Industrial Construction', category: 'Industrial' as Category,
    location: 'Lusail, Qatar', year: '2023', size: '',
    desc: 'A state-of-the-art district cooling plant serving Lusail North, featuring advanced chiller systems and thermal energy storage.',
    img: '/WhatsApp_Image_2026-06-08_at_3.22.58_PM.jpeg',
    contractor: 'Tadmor',
    gallery: [
      '/WhatsApp_Image_2026-06-08_at_3.22.58_PM.jpeg',
      '/WhatsApp_Image_2026-06-08_at_3.22.58_PM_(1).jpeg',
      '/WhatsApp_Image_2026-06-08_at_3.22.59_PM.jpeg',
      '/WhatsApp_Image_2026-06-08_at_3.22.59_PM_(1).jpeg',
      '/WhatsApp_Image_2026-06-08_at_3.22.59_PM_(2).jpeg',
    ],
  },
  {
    id: 11, title: 'Private Villa', type: 'Luxury Residential', category: 'Residential' as Category,
    location: 'Doha, Qatar', year: '2023', size: '',
    desc: 'A bespoke private villa featuring contemporary architectural design with premium finishes and landscaped grounds.',
    img: '/WhatsApp_Image_2026-06-08_at_3.41.33_PM copy copy.jpeg',
    gallery: [
      '/WhatsApp_Image_2026-06-08_at_3.41.33_PM copy copy.jpeg',
    ],
  },
  {
    id: 16, title: '26 Villas Compound in Muaither', type: 'Residential Development', category: 'Residential' as Category,
    location: 'Muaither, Qatar', year: '2023', size: '',
    desc: 'A residential compound comprising 26 modern villas in Muaither, featuring contemporary two-storey designs with clean facades, private balconies, and uniform street-facing layouts.',
    img: '/residential/IMG_6520.jpg',
    gallery: [
      '/residential/IMG_6520.jpg',
    ],
  },
  {
    id: 12, title: 'Private Villa', type: 'Luxury Residential', category: 'Residential' as Category,
    location: 'Doha, Qatar', year: '2023', size: '',
    desc: 'An elegant private villa with traditional Arabian architectural elements, ornate interiors, and premium stone finishes.',
    img: '/WhatsApp_Image_2026-06-08_at_3.41.32_PM.jpeg',
    gallery: [
      '/WhatsApp_Image_2026-06-08_at_3.41.32_PM.jpeg',
    ],
  },
  {
    id: 15, title: 'Palace In Bani Hajer', type: 'Luxury Residential', category: 'Residential' as Category,
    location: 'Bani Hajer, Qatar', year: '2023', size: '',
    desc: 'A grand palace featuring traditional Arabian architectural design with ornate arches, premium stone facades, and expansive landscaped grounds with interlocking pavement driveways.',
    img: '/residential/IMG_6521.jpg',
    gallery: [
      '/residential/IMG_6521.jpg',
      '/residential/6b8e3f48-33b8-4963-9040-25c8a42863f8.jpg',
      '/residential/IMG_6517.jpg',
      '/residential/IMG_6517 copy.jpg',
    ],
  },
  {
    id: 13, title: 'Commercial Shop', type: 'Commercial Fit-Out', category: 'Commercial' as Category,
    location: 'Doha, Qatar', year: '2023', size: '',
    desc: 'A modern commercial retail space featuring polished epoxy flooring, contemporary track lighting, and a clean minimalist interior.',
    img: '/files_10527746-2026-06-08T13-02-29-322Z-ba780aac-e848-437b-8212-4f45771bc2ca.jpg',
    gallery: [
      '/files_10527746-2026-06-08T13-02-29-322Z-ba780aac-e848-437b-8212-4f45771bc2ca.jpg',
    ],
  },
  {
    id: 17, title: 'Road Marking of Industrial Area Qatar', type: 'Road Infrastructure', category: 'Industrial' as Category,
    location: 'Industrial Area, Qatar', year: '2023', size: '',
    desc: 'Comprehensive road marking and lane delineation works across the Industrial Area of Qatar, including lane lines, kerb painting, and road safety markings on newly laid asphalt.',
    img: '/industrial/IMG_6519.jpg',
    gallery: [
      '/industrial/IMG_6519.jpg',
    ],
  },
  {
    id: 14, title: 'Al Jazeera Warehouse', type: 'Industrial Construction', category: 'Industrial' as Category,
    location: 'Doha, Qatar', year: '2023', size: '',
    desc: 'A purpose-built warehouse and facility for Al Jazeera.',
    img: '/industrial/files_10527746-2026-06-08T13-38-44-713Z-files_10527746-2026-06-08T13-36-25-333Z-files_10527746-2026-06-08T13-35-39-435Z-files_10527746-2026-06-08T13-35-00-071Z-ff32b3bf-4c3e-4bff-89e8-66fd9a6d8dcc.webp',
    gallery: [
      '/industrial/files_10527746-2026-06-08T13-38-44-713Z-files_10527746-2026-06-08T13-36-25-333Z-files_10527746-2026-06-08T13-35-39-435Z-files_10527746-2026-06-08T13-35-00-071Z-ff32b3bf-4c3e-4bff-89e8-66fd9a6d8dcc.webp',
    ],
  },
  {
    id: 10, title: 'Qatar Public Private Partnership Schools', type: 'Educational Institutional', category: 'Institutional' as Category,
    location: 'Qatar', year: '2023', size: '',
    desc: 'Public-private partnership school facilities developed under the Qatar PPP Schools program, delivering modern educational infrastructure.',
    img: '/files_10527746-2026-06-08T12-29-45-534Z-WhatsApp_Image_2026-06-08_at_3.27.12_PM.webp',
    contractor: 'UCC',
    gallery: [
      '/files_10527746-2026-06-08T12-29-45-534Z-WhatsApp_Image_2026-06-08_at_3.27.12_PM.webp',
    ],
  },
  {
    id: 18, title: 'Ministry of Municipality and Environment', type: 'Government Institutional', category: 'Institutional' as Category,
    location: 'Qatar', year: '2023', size: '',
    desc: 'Installation and finishing of the State of Qatar official emblem for the Ministry of Municipality and Environment, featuring hand-painted detailed craftsmanship on the government facade.',
    img: '/institutional/IMG_6518.jpg',
    gallery: [
      '/institutional/IMG_6518.jpg',
    ],
  },
  {
    id: 19, title: 'Step Forward Umm Salal', type: 'Educational Institutional', category: 'Institutional' as Category,
    location: 'Umm Salal, Qatar', year: '2023', size: '',
    desc: 'Vibrant playground and outdoor learning environment for Step Forward school in Umm Salal, featuring colourful rubber flooring, hopscotch play markings, decorative wall murals, and shaded play areas.',
    img: '/institutional/IMG_6522.jpg',
    gallery: [
      '/institutional/IMG_6522.jpg',
    ],
  },
  {
    id: 21, title: 'Barzan Tower Parking Lot', type: 'Institutional Infrastructure', category: 'Institutional' as Category,
    location: 'Doha, Qatar', year: '2024', size: '',
    desc: 'Full-scale parking lot painting and floor marking works at Barzan Tower, including anti-slip coatings, bay demarcation, bollard installation, and premium floor finishing.',
    img: '/institutional/IMG_6525.jpg',
    gallery: [
      '/institutional/IMG_6525.jpg',
    ],
  },
  {
    id: 20, title: 'Musherib VIP Parking', type: 'Commercial Fit-Out', category: 'Commercial' as Category,
    location: 'Musheireb, Doha, Qatar', year: '2023', size: '',
    desc: 'High-end epoxy flooring installation and floor painting works for the Musheireb VIP Parking facility.',
    img: '/commercial/IMG_6523.jpg',
    gallery: [
      '/commercial/IMG_6523.jpg',
    ],
  },
];

export default function Portfolio() {
  const [active, setActive] = useState<Category>('All');
  const categories: Category[] = ['All', 'Residential', 'Institutional', 'Commercial', 'Industrial'];
  const filtered = active === 'All' ? projects : projects.filter((p) => p.category === active);

  return (
    <div className="pt-24">
      {/* Header */}
      <section
        className="relative py-28 bg-cover bg-center"
        style={{ backgroundImage: 'url(https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1920)' }}
      >
        <div className="absolute inset-0 bg-navy/82" />
        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
          <span className="section-label">Our Work</span>
          <h1 className="section-title-light max-w-xl">
            Project<br /><span className="text-gold italic">Portfolio</span>
          </h1>
          <p className="font-sans text-white/55 text-sm max-w-lg mt-5 leading-relaxed">
            A selection of our completed projects across commercial, renovation, and industrial sectors.
          </p>
        </div>
      </section>

      {/* Filters */}
      <section className="py-8 bg-cream-200 border-b border-sand-200 sticky top-20 z-30">
        <div className="max-w-7xl mx-auto px-6 lg:px-12 flex items-center gap-2 flex-wrap">
          {categories.map((c) => (
            <button
              key={c}
              onClick={() => setActive(c)}
              className={`font-sans text-xs tracking-[0.14em] uppercase px-5 py-2.5 transition-all duration-200 ${
                active === c ? 'bg-navy text-gold' : 'bg-white text-navy/55 border border-sand-200 hover:text-navy'
              }`}
            >
              {c}
            </button>
          ))}
        </div>
      </section>

      {/* Grid */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-6 lg:px-12">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-7">
            {filtered.map((p, i) => (
              <Reveal key={p.id} delay={i * 0.05}>
                <div className="group overflow-hidden border border-sand-200 card-lift bg-white">
                  <div className="relative overflow-hidden aspect-[4/3]">
                    <img src={p.img} alt={p.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                    <div className="absolute top-4 left-4">
                      <span className="font-sans text-[9px] tracking-[0.2em] uppercase bg-gold text-white px-3 py-1.5">{p.type}</span>
                    </div>
                  </div>
                  <div className="p-6">
                    <div className="flex items-center gap-2 mb-3">
                      <MapPin size={11} className="text-gold flex-shrink-0" />
                      <span className="font-sans text-[10px] text-navy/45 tracking-wider">{p.location}</span>
                      <span className="font-sans text-[10px] text-navy/30 ml-auto">{p.year}</span>
                    </div>
                    <h3 className="font-serif text-xl text-navy mb-3">{p.title}</h3>
                    <p className="font-sans text-sm text-navy/55 leading-relaxed mb-4">{p.desc}</p>
                    {'contractor' in p && (
                      <p className="font-sans text-xs text-navy/45 mb-4">Contractor: <span className="text-navy/70 font-medium">{(p as any).contractor}</span></p>
                    )}
                    <div className="flex items-center justify-between pt-4 border-t border-sand-100">
                      <span className="font-sans text-xs text-navy/35">{p.size}</span>
                      <span className="font-sans text-xs text-gold tracking-[0.14em] uppercase flex items-center gap-1.5 group-hover:gap-2.5 transition-all">
                        Details <ArrowRight size={11} />
                      </span>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-navy text-center">
        <Reveal className="max-w-xl mx-auto px-6">
          <h2 className="section-title-light mb-5">Your Project<br /><span className="text-gold italic">Could Be Next</span></h2>
          <p className="font-sans text-white/55 text-sm leading-relaxed mb-8">
            Ready to start building? Reach out today for a free site consultation and quotation.
          </p>
          <Link to="/inquiries" className="btn-primary">Request a Quote <ArrowRight size={13} /></Link>
        </Reveal>
      </section>
    </div>
  );
}
