import React, { useState } from 'react';
import { mdiArrowRight, mdiMagnifyPlusOutline } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import ScrollReveal from './ScrollReveal';

const projects = [
  {
    title: 'Modern Ofis Akustik Panel',
    category: 'Akustik Panel',
    image: 'https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=800'
  },
  {
    title: 'Dış Cephe PU Lambri',
    category: 'PU Lambri',
    image: 'https://images.pexels.com/photos/1571470/pexels-photo-1571470.jpeg?auto=compress&cs=tinysrgb&w=800'
  },
  {
    title: 'Mutfak PVC Mermer Kaplama',
    category: 'PVC Mermer',
    image: 'https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=800'
  },
  {
    title: 'Oturma Odası 3D Duvar',
    category: '3D Uygulamalar',
    image: 'https://images.pexels.com/photos/1571470/pexels-photo-1571470.jpeg?auto=compress&cs=tinysrgb&w=800'
  },
  {
    title: 'Restoran Ses Yalıtımı',
    category: 'Akustik Çözümler',
    image: 'https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=800'
  },
  {
    title: 'Villa Dış Cephe Kaplama',
    category: 'PU Cephe',
    image: 'https://images.pexels.com/photos/1571470/pexels-photo-1571470.jpeg?auto=compress&cs=tinysrgb&w=800'
  }
];

const categories = ['Tümü', 'Akustik Panel', 'PU Lambri', 'PVC Mermer', '3D Uygulamalar'];

const Projects = () => {
  const [activeCategory, setActiveCategory] = useState('Tümü');

  const filteredProjects = activeCategory === 'Tümü' 
    ? projects 
    : projects.filter(p => p.category === activeCategory);

  return (
    <section id="projeler" className="py-24 bg-white overflow-hidden relative">
       {/* Background Decoration */}
       <div className="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none -z-10">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
          <ScrollReveal animation="fade-in-left">
            <div>
              <h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 text-center md:text-left font-sans">Referans Projelerimiz</h2>
              <h3 className="text-4xl md:text-5xl font-black text-gray-900 leading-tight text-center md:text-left font-sans">Hayata Geçirdiğimiz <br />En Seçkin Projeler</h3>
            </div>
          </ScrollReveal>
          
          <ScrollReveal animation="fade-in-right" delay={200}>
            <div className="flex flex-wrap gap-2 justify-center font-sans">
              {categories.map((cat) => (
                <button
                  key={cat}
                  onClick={() => setActiveCategory(cat)}
                  className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all border ${
                    activeCategory === cat 
                    ? 'bg-amber-600 text-white border-amber-600 shadow-lg shadow-amber-900/10 scale-105' 
                    : 'bg-white text-gray-600 border-gray-200 hover:border-amber-600 hover:text-amber-600'
                  }`}
                >
                  {cat}
                </button>
              ))}
            </div>
          </ScrollReveal>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {filteredProjects.map((project, index) => (
            <ScrollReveal 
              key={`${project.title}-${index}`} 
              animation="scale-in" 
              delay={index * 100}
            >
              <div className="group relative rounded-3xl overflow-hidden bg-white shadow-sm hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-gray-100 active:scale-95">
                <div className="aspect-[4/5] overflow-hidden">
                  <img 
                    src={project.image} 
                    alt={project.title} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000"
                  />
                </div>
                
                {/* Overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-10">
                  <div className="translate-y-10 group-hover:translate-y-0 transition-transform duration-500">
                    <span className="inline-block px-3 py-1 bg-amber-600 text-[10px] font-black uppercase tracking-widest text-white rounded-full mb-4 font-sans">
                      {project.category}
                    </span>
                    <h4 className="text-2xl font-black text-white mb-6 leading-tight font-sans">
                      {project.title}
                    </h4>
                    <div className="flex items-center space-x-2 text-white font-bold text-sm group/btn cursor-pointer font-sans">
                      <div className="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center group-hover/btn:bg-amber-600 group-hover/btn:scale-110 transition-all duration-300">
                        <BaseIcon path={mdiMagnifyPlusOutline} size={24} />
                      </div>
                      <span className="group-hover/btn:text-amber-400 transition-colors">Projeyi İncele</span>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>

        <ScrollReveal animation="fade-in-up" delay={400}>
          <div className="mt-20 text-center">
            <p className="text-gray-500 font-bold mb-8 font-body">Daha fazla proje ve detaylı bilgi için bize ulaşın.</p>
            <a 
              href="https://wa.me/905000000000" 
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center space-x-4 px-10 py-5 bg-amber-600 text-white rounded-2xl font-black hover:bg-amber-700 transition-all shadow-xl shadow-amber-900/20 group hover:-translate-y-1 font-sans"
            >
              <span>Tüm Projeleri WhatsApp&apos;tan İste</span>
              <BaseIcon path={mdiArrowRight} size={24} className="group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Projects;
