import React, { useState } from 'react';

const ProjectsSection = () => {
  // Filtering state
  const [filter, setFilter] = useState('all');

  const categories = [
    { id: 'all', label: 'সবগুলো' },
    { id: 'distributed', label: 'বিতরণ কার্যক্রম' },
    { id: '2023', label: '২০২৩' },
    { id: '2024', label: '২০২৪' }
  ];

  const projects = [
    {
      id: 1,
      category: '2024',
      title: "শীতবস্ত্র বিতরণ প্রকল্প",
      description: "নিম্নবিত্তদের মাঝে শীতবস্ত্র বিতরন",
      image: "/images/projects/project1.png"
    },
    {
      id: 2,
      category: 'distributed',
      title: "অসহায়দের চিকিৎসা সহায়তা প্রকল্প",
      description: "অসহায়দের সামরিক চিকিৎসা ও সহায়তা",
      image: "/images/projects/project1.png"
    },
    {
      id: 3,
      category: 'distributed',
      title: "অজুখানার ব্যবস্থা দান প্রকল্প",
      description: "অজু ও শৌচাগার দান প্রকল্প",
      image: "/images/projects/project1.png"
    },
    {
      id: 4,
      category: '2023',
      title: "এতিমদের পুনর্বাসন প্রকল্প",
      description: "এতিম শিশুদের শিক্ষা, বাসস্থান ও চিকিৎসা ব্যবস্থা করা",
      image: "/images/projects/project1.png"
    },
    {
      id: 5,
      category: '2023',
      title: "দুস্থদের চিকিৎসা সহায়তা প্রকল্প",
      description: "দরিদ্রদের চিকিৎসা ও সেবা নিশ্চিত করা",
      image: "/images/projects/project1.png"
    },
    {
      id: 6,
      category: '2024',
      title: "ভ্যান/রিকশা দান প্রকল্প",
      description: "আত্মকর্মসংস্থান সৃষ্টির লক্ষ্যে ভ্যান দান",
      image: "/images/projects/project1.png"
    }
  ];

  const filteredProjects = filter === 'all'
    ? projects
    : projects.filter(p => p.category === filter);

  return (
    <section className="projects-section py-5 bg-white">
      <div className="container">
        {/* Filtering Tabs */}
        <div className="d-flex flex-wrap justify-content-center gap-2 mb-5">
          {categories.map((cat) => (
            <button
              key={cat.id}
              onClick={() => setFilter(cat.id)}
              className={`btn px-4 py-2 rounded-pill fw-bold transition-all ${
                filter === cat.id
                ? 'btn-success text-white shadow'
                : 'btn-outline-secondary border-light-subtle text-dark'
              }`}
              style={{ fontSize: '0.9rem' }}
            >
              {cat.label}
            </button>
          ))}
        </div>

        {/* Project Grid */}
        <div className="row g-4">
          {filteredProjects.map((project) => (
            <div className="col-lg-4 col-md-6" key={project.id}>
              <div className="card h-100 border-0 shadow-sm hover-up" style={{ borderRadius: '15px' }}>
                <div style={{ height: '220px', overflow: 'hidden', borderRadius: '15px 15px 0 0' }}>
                  <img
                    src={project.image}
                    className="card-img-top h-100 w-100 object-fit-cover"
                    alt={project.title}
                  />
                </div>
                <div className="card-body p-4">
                  <h5 className="fw-bold mb-2" style={{ color: '#1a1a1a', fontSize: '1.15rem' }}>
                    {project.title}
                  </h5>
                  <p className="text-muted small mb-4" style={{ minHeight: '40px' }}>
                    {project.description}
                  </p>
                  <button className="btn btn-outline-success w-100 rounded-3 py-2 fw-bold bg-success-subtle border-0 text-success">
                    বিস্তারিত দেখুন
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        .hover-up { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .hover-up:hover { transform: translateY(-8px); box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important; }
        .transition-all { transition: all 0.2s ease-in-out; }
      `}</style>
    </section>
  );
};

export default ProjectsSection;
