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, slideFromLeft } from "@/components/reuseables/variants";
import { Col, Container, Row } from "react-bootstrap";
const heading = [
  {
    title: "People",
    subtitle: "lorem",
    description:
      "Our people blend expertise with empathy, translating financial complexities into personalized solutions. Our team of experts come from diverse backgrounds & with vast experiences to deliver across various service & functional areas.",
  },
];

const data = [
  {
    icon: "ri-checkbox-multiple-line",
    title: "Analytical",
    des: "Our finance and tax experts unpack complex topics with sharp analysis to guide your business decisions.",
  },
  {
    icon: "ri-pie-chart-2-line",
    title: "Detail Oriented",
    des: "Our team of detail-oriented finance and tax experts help you uncover the best path forward for your business.",
  },
  {
    icon: "ri-medal-line",
    title: "Strategic",
    des: "Our team's strategic finance expertise delivers in-depth, insightful analysis for informed business decisions.",
  },
];

const People = () => {
  return (
    <>
      <div className="people ptb-100">
        <Container>
        <Row className="align-items-center flex-column-reverse flex-lg-row">   
            <Col lg={6} md={12}>
              <div className="call-back-request-img">
                <motion.div
                  variants={slideFromLeft(0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <Image
                    src="/images/people/people.webp"
                    fill
                    className="img-fluid position-relative"
                    alt="image"
                  />
                </motion.div>
              </div>
            </Col>

            <Col lg={6} md={12}>
              <div className="about-content">
                {/* <span className="sub-title">{heading[0].subtitle}</span> */}

                <Heading el="h2" heading={heading[0].title} className="h2" />
                <p>{heading[0].description}</p>

                <div className="row justify-content-center">
                  {data.map((item, index) => (
                    <div className="single-call-back-box">
                   

                      <ul className="features-list">
                        <li>
                          <div className="number">0{index+1}</div>
                          <h3>{item.title}</h3>
                          <p>
                          {item.des}
                          </p>
                        </li>
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default People;