import React from "react";
import Link from "next/link";
import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { fadeIn } from "@/components/reuseables/variants";
import { Col, Container, Row } from "react-bootstrap";

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",
  },
  // Add more objects here if you have more content sections
];

const AboutPeople = () => {
  return (
    <>
      <div className="what-we-do-area ptb-100">
        <Container>
          {aboutPeopleData.map((item) => (
            <Row className="align-items-center" key={item.id}>
              <Col lg={6} md={12}>
                <div className="what-we-do-text">
                  <span className="sub-title">{item.subtitle}</span>
                  <Heading el="h2" heading={item.title} className="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>
              </Col>

              <Col lg={6} md={12}>
                <div className="what-we-do-img">
                  <motion.div
                    variants={fadeIn(0.4)}
                    initial={"hidden"}
                    whileInView={"show"}
                    viewport={{ once: false, amount: 0.2 }}
                  >
                    <Image
                      src={item.imageSrc}
                      alt={item.imageAlt}
                      layout="fill"
                      className="img-fluid image"
                    />
                  </motion.div>
                </div>
              </Col>
            </Row>
          ))}
        </Container>
      </div>
    </>
  );
};

export default AboutPeople;