import React from 'react';

const CurrentPrograms = () => {
  const programs = [
    {
      title: "যাকাত তহবিল",
      description: "যাকাতের মাধ্যমে সমাজ কল্যাণে এই ফান্ড অভাবী লক্ষে ব্যয় করা হয়।",
      image: "/images/bannar/programs/jakat.png", // Replace with your image paths
    },
    {
      title: "পথশিশুদের চিকিৎসা সহায়তা প্রকল্প",
      description: "পথশিশুদের প্রাথমিক চিকিৎসা ও স্বাস্থ্য সেবা প্রদান।",
      image: "/images/bannar/programs/street-children.png",
    },
    {
      title: "শীতবস্ত্র বিতরণ প্রকল্প",
      description: "শীতার্ত মানুষের মাঝে কম্বল ও শীতবস্ত্র বিতরণ।",
      image: "/images/bannar/programs/winter-clothes.png",
    },
    {
      title: "এতিমদের পুনর্বাসন প্রকল্প",
      description: "এতিম শিশুদের শিক্ষা, বাসস্থান ও চিকিৎসার ব্যবস্থা করা।",
      image: "/images/bannar/programs/orphans.png",
    },
    {
      title: "দুস্থদের চিকিৎসা সহায়তা প্রকল্প",
      description: "দরিদ্রদের চিকিৎসার জন্য আর্থিক সহায়তা।",
      image: "/images/bannar/programs/medical.png",
    },
    {
      title: "ভ্যান/রিকশা দান প্রকল্প",
      description: "কর্মসংস্থানের সুযোগ সৃষ্টিতে ভ্যান বিতরণ।",
      image: "/images/bannar/programs/van.png",
    }
  ];

  return (
    <section className="programs-section py-5 bg-light">
      <div className="container py-lg-4">
        {/* Section Header */}
        <div className="text-center mb-5">
          <h2 className="fw-bold mb-3" style={{ color: '#006430' }}>চলমান কার্যক্রম</h2>
          <p className="text-muted mx-auto" style={{ maxWidth: '700px' }}>
            আমরা একটি দাতব্য প্রতিষ্ঠান, যা মানবিক সহায়তা, ইসলামিক শিক্ষা প্রসার, সমাজকল্যাণ ও দাওয়াহ কার্যক্রমের মাধ্যমে সমাজের উন্নয়নকামী মানুষের পাশে দাঁড়াতে প্রতিশ্রুতিবদ্ধ।
          </p>
        </div>

        {/* Programs Grid */}
        <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
          {programs.map((program, index) => (
            <div className="col" key={index}>
              <div className="card h-100 border-0 shadow-sm overflow-hidden" style={{ borderRadius: '15px' }}>
                <div style={{ height: '200px', overflow: 'hidden' }}>
                  <img
                    src={program.image}
                    className="card-img-top h-100 w-100 p-2"
                    alt={program.title}
                    style={{ objectFit: 'cover' }}
                  />
                </div>
                <div className="card-body p-4">
                  <h5 className="card-title fw-bold mb-2" style={{ fontSize: '1.1rem' }}>
                    {program.title}
                  </h5>
                  <p className="card-text text-muted small mb-0">
                    {program.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* See More Button */}
        <div className="text-center mt-5">
          <a
            href="#"
            className="btn btn-success px-5 py-2 fw-semibold rounded-3 shadow-sm"
            style={{ backgroundColor: '#008542', border: 'none' }}
          >
            আরও দেখুন
          </a>
        </div>
      </div>
    </section>
  );
};

export default CurrentPrograms;
