import React from 'react';

const ValuesSection = () => {
  const sectionStyle = {
    // Reference your background image here
    backgroundImage: `url("/images/bannar/values-bg.png")`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    position: 'relative',
    padding: '80px 0'
  };

  const values = [
    {
      title: "সততা",
      description: "আমরা সততা ও স্বচ্ছতার সাথে কাজ করি"
    },
    {
      title: "সহানুভূতি",
      description: "আমরা যাদের সেবা করি তাদের সম্পর্কে গভীরভাবে যত্নবান"
    },
    {
      title: "শ্রেষ্ঠত্ব",
      description: "আমরা যা করি তার সবকিছুতেই সর্বোচ্চ মান অর্জনের চেষ্টা করি"
    }
  ];

  return (
    <section className="values-section" style={sectionStyle}>
      <div className="container">
        {/* Section Heading from image_e9cb58.png */}
        <div className="text-center mb-5">
          <h2 className="fw-bold text-white mb-0" style={{ fontSize: '2.5rem' }}>
            আমাদের মূল্যবোধ
          </h2>
        </div>

        {/* Values Cards Grid */}
        <div className="row g-4 justify-content-center">
          {values.map((value, index) => (
            <div className="col-lg-4 col-md-6" key={index}>
              {/* Reversed content box: Light background with green text */}
              <div
                className="value-card h-100 p-5 text-center shadow-sm"
                style={{
                  backgroundColor: 'rgba(255, 255, 255, 0.95)',
                  borderRadius: '15px',
                  border: '1px solid rgba(255, 255, 255, 0.3)'
                }}
              >
                <h4 className="fw-bold mb-3" style={{ color: '#006430' }}>
                  {value.title}
                </h4>
                <p className="mb-0 text-dark opacity-75">
                  {value.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style jsx>{`
        .value-card {
          transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .value-card:hover {
          transform: translateY(-10px);
          background-color: #ffffff !important;
        }
      `}</style>
    </section>
  );
};

export default ValuesSection;
