import React from 'react';

const HeaderCardSection = () => {
  const headerStyle = {
    // We use a linear-gradient overlaying the background image
    // The gradient goes from a semi-transparent dark green to a slightly lighter green
    background: `linear-gradient(
      rgba(0, 43, 22, 0.50),
      rgba(0, 85, 42, 0.50)
    ), url("/images/bannar/header-card-bg.png")`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    padding: '120px 0',
    color: '#ffffff',
    textAlign: 'center',
    position: 'relative'
  };

  return (
    <section className="header-card-section" style={headerStyle}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-10">
            {/* The Main Title from the banner */}
            <h1 className="display-3 fw-bold mb-4" style={{ letterSpacing: '1px' }}>
              আমাদের সম্পর্কে
            </h1>

            {/* The Sub-text from the banner */}
            <p className="fs-5 mx-auto mb-0" style={{ maxWidth: '850px', lineHeight: '1.8', fontWeight: '400' }}>
              সৈয়দ ফজলুল করিম ইসলামিক রিসার্চ সেন্টার (মারকাজ) ট্রাস্ট বিভিন্ন উদ্যোগ ও প্রোগ্রামের মাধ্যমে <br className="d-none d-md-block" />
              আমাদের সম্প্রদায়ে ইতিবাচক পরিবর্তন সৃষ্টিতে প্রতিশ্রুতিবদ্ধ।
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeaderCardSection;
