import React from 'react';

const AboutUsSection: React.FC = () => {
  return (
    <section className="py-12">
      <div className="container mx-auto px-4">
        {/* Mission Section */}
        <div className="flex flex-col md:flex-row items-center mb-12">
          <div className="md:w-1/2 md:order-2 mb-8 md:mb-0">
            <img
              src="https://via.placeholder.com/500x350"
              alt="About Us"
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </div>
          <div className="md:w-1/2 md:pr-8">
            <h2 className="text-3xl font-bold mb-4">Our Mission</h2>
            <p className="text-gray-600 mb-6">
              At Bank Finder, we are dedicated to connecting you with the best
              financial solutions. We strive to make your banking experience
              seamless and efficient.
            </p>
            <h3 className="text-xl font-semibold mb-4">Key Features:</h3>
            <ul className="list-disc list-inside text-gray-600">
              <li>Seamless connection with top financial institutions.</li>
              <li>Customer-focused service with expert advice.</li>
              <li>Innovative tools for easy banking decisions.</li>
            </ul>
          </div>
        </div>

        {/* Vision Section */}
        <div className="flex flex-col md:flex-row items-center mb-12">
          <div className="md:w-1/2 mb-8 md:mb-0">
            <img
              src="https://via.placeholder.com/500x350"
              alt="About Us"
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </div>
          <div className="md:w-1/2 md:pl-8">
            <h2 className="text-3xl font-bold mb-4">Our Vision</h2>
            <p className="text-gray-600 mb-6">
              Our vision is to become the most trusted financial platform, guiding
              individuals and businesses to the right banking solutions with ease.
            </p>
            <h3 className="text-xl font-semibold mb-4">Why This Matters:</h3>
            <ul className="list-disc list-inside text-gray-600">
              <li>Empowering individuals with easy access to financial services.</li>
              <li>Providing businesses with the right tools for growth.</li>
              <li>Creating a transparent, reliable banking experience.</li>
            </ul>
          </div>
        </div>

        {/* Why Choose Us Section */}
        <div className="flex flex-col md:flex-row items-center mb-12">
          <div className="md:w-1/2 md:order-2 mb-8 md:mb-0">
            <img
              src="https://via.placeholder.com/500x350"
              alt="About Us"
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </div>
          <div className="md:w-1/2 md:pr-8">
            <h2 className="text-3xl font-bold mb-4">Why Choose Us?</h2>
            <p className="text-gray-600 mb-6">
              With years of expertise in the financial industry, we offer reliable
              services and a wide range of banking products to cater to your unique
              needs.
            </p>
            <h3 className="text-xl font-semibold mb-4">Our Strengths:</h3>
            <ul className="list-disc list-inside text-gray-600">
              <li>Wide network of partner banks and financial institutions.</li>
              <li>Tailored solutions to suit every financial need.</li>
              <li>Highly experienced customer service team.</li>
            </ul>
          </div>
        </div>

        {/* Values Section */}
        <div className="flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 mb-8 md:mb-0">
            <img
              src="https://via.placeholder.com/500x350"
              alt="About Us"
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </div>
          <div className="md:w-1/2 md:pl-8">
            <h2 className="text-3xl font-bold mb-4">Our Values</h2>
            <p className="text-gray-600 mb-6">
              Integrity, transparency, and customer satisfaction are at the core of
              everything we do. We aim to provide financial solutions that empower
              our clients to achieve their goals.
            </p>
            <h3 className="text-xl font-semibold mb-4">Core Values:</h3>
            <ul className="list-disc list-inside text-gray-600">
              <li>Integrity: Always acting with honesty and transparency.</li>
              <li>Customer Satisfaction: Putting our clients first.</li>
              <li>Innovation: Continuously improving our services and tools.</li>
              <li>Accountability: Taking responsibility for our actions and outcomes.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutUsSection;