import React from "react";
import Link from "next/link";
import Image from "next/image";

const aboutPeopleData = [
  {
    id: 1,
    subtitle: "About Us",
    title: "Welcome to Advith Consulting ",
    paragraphs: [
      " a distinguished boutique finance consulting firm with a proud legacy of over 40 years. Our journey has been driven by three core pillars: Knowledge, People, and Client Servicing.People are at the heart of our firm. We foster a collaborative and inclusive environment where every team member is valued for their unique contributions. This collective expertise enables us to deliver innovative solutions tailored to each client's needs. We prioritize building strong, lasting relationships with our clients, understanding their goals, and exceeding their expectations. Our dedication to business ethics and standards is reflected in the quality of our work and our reputation for excellence and credibility.As we continue to grow, we remain steadfast in our mission to operate as one cohesive entity, united by our values and our dedication to delivering exceptional financial consulting services.",
    ],
    linkText: "Know More",
    linkUrl: "/contact",
    imageSrc: "/images/about/people.jpg",
    imageAlt: "image",
    imageWidth: 800,
    imageHeight: 800,
  },
  // Add more objects here if you have more content sections
];

const AboutPeople = () => {
  return (
    <>
      <div className="what-we-do-area ptb-100">
        <div className="container">
          {aboutPeopleData.map((item) => (
            <div className="row align-items-center" key={item.id}>
              <div className="col-lg-6 col-md-12">
                <div className="what-we-do-text">
                  <span className="sub-title">{item.subtitle}</span>
                  <h2>{item.title}</h2>
                  {item.paragraphs.map((paragraph, index) => (
                    <p key={index}>{paragraph}</p>
                  ))}
                  <Link href={item.linkUrl} className="default-btn">
                    {item.linkText} <i className="ri-arrow-right-line"></i>
                  </Link>
                </div>
              </div>

              <div className="col-lg-6 col-md-12">
                <div className="what-we-do-img">
                  <Image
                    src={item.imageSrc}
                    alt={item.imageAlt}
                    width={item.imageWidth}
                    height={item.imageHeight}
                    className="img-fluid"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default AboutPeople;