import React from 'react';

const ProjectDetailsSection = () => {
  return (
    <section className="project-details-section py-5 bg-white">
      <div className="container">
        <div className="row g-4">

          {/* Left Column: Project Content */}
          <div className="col-lg-8">
            <div className="mb-4">
              <span className="badge bg-success-subtle text-success px-3 py-2 mb-3 rounded-pill">
                চলমান প্রকল্প
              </span>
              <div className="rounded-4 overflow-hidden mb-4 shadow-sm">
                <img
                  src="/images/projects/project1.png"
                  alt="শীতবস্ত্র বিতরণ প্রকল্প"
                  className="img-fluid w-100 object-fit-cover"
                  style={{ maxHeight: '450px' }}
                />
              </div>
              <h2 className="fw-bold mb-4" style={{ color: '#1a1a1a' }}>শীতবস্ত্র বিতরণ প্রকল্প</h2>
              <div className="project-description text-muted lh-lg">
                <p>
                  শীত আসার সাথে সাথে বাংলাদেশের হাজার হাজার দুঃস্থ পরিবার প্রচণ্ড সুরক্ষার অভাবে তীব্র শীতের মুখামুখি হয়। বিশেষ করে উত্তর জনপদের মানুষ যেখানে তাপমাত্রা সহনীয় পর্যায়ে নেমে আসায় চরম দুর্ভোগে পড়ে।
                  সৈয়দ ফজলুল করিম ইসলামিক রিসার্চ সেন্টার ট্রাস্টের শীতবস্ত্র বিতরণ প্রকল্প এই পরিবারগুলোর জন্য একটি আশ্রয়ের মতো কাজ করে।
                </p>
                <p>
                  আপনার উদার অবদান একটি শিশুর জন্য একটি উষ্ণ কম্বল হয়ে উঠতে পারে। আসুন আমরা এই মানবতার সেবায় এগিয়ে আসি এবং প্রতিটি কম্বলের মাধ্যমে একটি জীবন বাঁচাতে সাহায্য করি।
                </p>
              </div>
            </div>

            {/* Quote Section at Bottom */}
            <div className="mt-5 p-4 rounded-4 text-center" style={{ backgroundColor: '#f4fbf7' }}>
              <p className="mb-2 fw-medium text-dark italic">
                "যে ব্যক্তি কোনো মুসলিমের পার্থিব কোনো বিপদ দূর করে দেবে, কিয়ামতের দিন আল্লাহ তার বিপদ দূর করে দেবেন..."
              </p>
              <span className="text-muted small">(সুনান আবু দাউদ, হাদীস ৪৯৪৬ - সংক্ষেপিত)</span>
            </div>
          </div>

          {/* Right Column: Donation Sidebar */}
          <div className="col-lg-4">
            <div className="sticky-top" style={{ top: '20px' }}>

              {/* Call to Action Card */}
              <div className="card border-0 rounded-4 shadow-sm mb-4 overflow-hidden">
                <div className="card-body p-4 text-white" style={{ backgroundColor: '#008542' }}>
                  <h4 className="fw-bold mb-3">ফাউন্ডেশনের সব কল্যাণমূলক কার্যক্রমে অংশগ্রহণ করুন</h4>
                  <p className="small opacity-75 mb-0">
                    আমাদের বিভিন্ন দাতা উদ্যোগে সহায়তা করার মাধ্যমে আপনিও এই মহৎ কাজের অংশীদার হতে পারেন।
                  </p>
                </div>
              </div>

              {/* Bank Transfer Details */}
              <div className="card border-0 rounded-4 shadow-sm mb-4">
                <div className="card-body p-4">
                  <div className="d-flex justify-content-between align-items-center mb-4">
                    <h5 className="fw-bold text-success mb-0">ব্যাংক ট্রান্সফার</h5>
                    <img src="/images/icons/aibi-logo.png" alt="Bank Logo" style={{ height: '30px' }} />
                  </div>
                  <div className="bank-info small">
                    <div className="d-flex justify-content-between py-2 border-bottom">
                      <span className="text-muted">অ্যাকাউন্টের নাম:</span>
                      <span className="fw-bold text-end">Syed Fazlul Karim Islamic<br/>Research Centre Trust</span>
                    </div>
                    <div className="d-flex justify-content-between py-2 border-bottom">
                      <span className="text-muted">ব্যাংকের নাম:</span>
                      <span className="fw-bold">Al-Arafa Islami Bank</span>
                    </div>
                    <div className="d-flex justify-content-between py-2 border-bottom">
                      <span className="text-muted">শাখা:</span>
                      <span className="fw-bold">Motijheel</span>
                    </div>
                    <div className="d-flex justify-content-between py-2">
                      <span className="text-muted">অ্যাকাউন্ট নম্বর:</span>
                      <span className="fw-bold">0021220012134</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Mobile Banking Details */}
              <div className="card border-0 rounded-4 shadow-sm">
                <div className="card-body p-4">
                  <h5 className="fw-bold text-success mb-4">মোবাইল ব্যাংকিং</h5>
                  <div className="d-flex flex-column gap-3">
                    <div className="d-flex align-items-center gap-3">
                      <img src="/images/projects/bkash.png" alt="Bkash" style={{ width: '40px' }} />
                      <div>
                        <span className="d-block fw-bold small">বিকাশ : 01740-990157</span>
                        <span className="text-muted extra-small">(পার্সোনাল)</span>
                      </div>
                    </div>
                    <div className="d-flex align-items-center gap-3">
                      <img src="/images/projects/nagad.png" alt="Nagad" style={{ width: '40px' }} />
                      <div>
                        <span className="d-block fw-bold small">নগদ : 01740-990157</span>
                        <span className="text-muted extra-small">(পার্সোনাল)</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

      <style jsx>{`
        .extra-small { font-size: 0.75rem; }
        .italic { font-style: italic; }
      `}</style>
    </section>
  );
};

export default ProjectDetailsSection;
