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: [
      "Welcome to Advith Consulting, a boutique finance consulting firm with over 40 years of excellence. Our core pillars—Knowledge, People, and Client Servicing—drive our success. We value our team’s unique contributions, fostering a collaborative environment that delivers tailored, innovative solutions. We build strong, lasting client relationships by understanding and exceeding their goals. Our commitment to business ethics and quality work has earned us a reputation for excellence and credibility. United by our values, we continue to deliver 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;