import React from 'react';

const MissionVisionSection = () => {
  return (
    <section className="mission-vision-section py-5 bg-white">
      <div className="container py-lg-4">
        {/* h-100 on the row and align-items-stretch ensures columns are equal height */}
        <div className="row align-items-stretch g-4">

          {/* Left Side: Image */}
          <div className="col-lg-6">
            <div className="img-wrapper shadow-sm h-100" style={{ borderRadius: '20px', overflow: 'hidden' }}>
              <img
                src="/images/bannar/mosjid.png"
                alt="Trust Building"
                className="img-fluid h-100 w-100"
                style={{ objectFit: 'cover', minHeight: '400px' }} // min-height ensures it doesn't collapse on mobile
              />
            </div>
          </div>

          {/* Right Side: Mission & Vision Cards */}
          <div className="col-lg-6">
            <div className="d-flex flex-column justify-content-between h-100 gap-4 ps-lg-3">

              {/* Mission Card */}
              <div className="card border-0 shadow-sm p-4 p-md-4 flex-grow-1 d-flex flex-column justify-content-center" style={{ borderRadius: '20px' }}>
                <h3 className="fw-bold mb-3" style={{ color: '#006430' }}>
                  ট্রাস্টের মিশন (MISSION)
                </h3>
                <p className="text-muted lh-base mb-0">
                  শাস্ত্রীয় জ্ঞান ও আধুনিক বিদ্যার সমন্বয়ে ইসলামী নীতিমালার আলোকে একটি ন্যায়ভিত্তিক, সমৃদ্ধ ও সুশৃঙ্খল সমাজ গঠন করা — যাতে মৌলিক মানবাধিকার, ন্যায়বিচার ও সমতা নিশ্চিত হয়।
                </p>
              </div>

              {/* Vision Card */}
              <div className="card border-0 shadow-sm p-4 p-md-4 flex-grow-1 d-flex flex-column justify-content-center" style={{ borderRadius: '20px' }}>
                <h3 className="fw-bold mb-3" style={{ color: '#006430' }}>
                  ট্রাস্টের ভিশন (VISION)
                </h3>
                <p className="text-muted lh-base mb-0">
                  শাস্ত্রীয় জ্ঞান ও আধুনিক বিদ্যার সমন্বয়ে ইসলামী নীতিমালার আলোকে একটি ন্যায়ভিত্তিক, সমৃদ্ধ ও সুশৃঙ্খল সমাজ গঠন করা — যাতে মৌলিক মানবাধিকার, ন্যায়বিচার ও সমতা নিশ্চিত হয়।
                </p>
              </div>

            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

export default MissionVisionSection;
