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";
import { cleanImage } from "@/layout/imageHandling";
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 = ({ people }) => {
  // console.log(people, "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={cleanImage(people.Image?.url)}
                    fill
                    className="img-fluid position-relative"
                    alt={
                      people.Image?.alternativeText
                        ? people.Image?.alternativeText
                        : "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={people?.Heading} className="h2" />
                <p>{people?.Description}</p>

                <div className="row justify-content-center">
                  {[people].flat().map(
                    (item, index) =>
                      item && (
                        <div className="single-call-back-box" key={index}>
                          <ul className="features-list">
                            {item.peoplelist?.map((item, idx) => (
                              <li key={idx} className="rule-listing">
                                {/* <div className="number">0{idx + 1}</div> */}
                                <h3>{item?.heading}</h3>
                                <p>{item?.description}</p>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )
                  )}
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default People;