import React from 'react';

const CTASection = () => {
  const ctaStyle = {
    // 1. Primary branding green as fallback
    backgroundColor: '#008542',
    // 2. The wavy pattern image from your provided design
    backgroundImage: `url("/images/bannar/cta-bg.png")`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    position: 'relative',
    overflow: 'hidden',
    zIndex: '1'
  };

  return (
    <section className="cta-section py-5" style={ctaStyle}>
      {/* Optional: Dark overlay to ensure text readability if image is bright */}
      <div
        className="position-absolute top-0 start-0 w-100 h-100"
        style={{ backgroundColor: 'rgba(0,0,0,0.1)', zIndex: '-1' }}
      ></div>

      <div className="container py-4">
        <div className="row align-items-center gy-4 text-center text-md-start">

          {/* Bengali Text Side */}
          <div className="col-md-8">
            <h2 className="text-white fw-bold mb-0 lh-base" style={{ fontSize: 'calc(1.4rem + 1vw)' }}>
              আসুন, আল্লাহর সন্তুষ্টির জন্য <br className="d-none d-md-block" />
              দান করি এবং আখিরাতের জন্য সঞ্চয় গড়ে তুলি।
            </h2>
          </div>

          {/* Button Side */}
          <div className="col-md-4 text-md-end">
            <a
              href="#"
              className="btn btn-light px-5 py-3 fw-bold rounded-3 shadow-sm hover-grow"
              style={{
                color: '#008542',
                fontSize: '1.1rem',
                border: 'none',
                minWidth: '180px'
              }}
            >
              দান করুন
            </a>
          </div>

        </div>
      </div>

      <style>{`
        .hover-grow { transition: transform 0.3s ease; }
        .hover-grow:hover { transform: scale(1.05); }
      `}</style>
    </section>
  );
};

export default CTASection;
