import React from "react";
import { Container } from "react-bootstrap";
import Heading from "./Heading";
import Image from "next/image";
import { cleanImage } from "@/layout/imageHandling";

const services = [
  {
    id: 1,
    serviceIcon: "../images/functional_area/negotiation.svg",
    serviceTitle: "Negotiation",
    serviceShortDescription:
      "We specialise in creating win-win solutions through clear communication, effective persuasion, and collaborative problem-solving while delivering services across service lines.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 2,
    serviceIcon: "../images/functional_area/strategic_thinking.svg",
    serviceTitle: "Strategic Thinking",
    serviceShortDescription:
      "We help businesses think ahead, plan smart and stay prepared for the future with the clear goals and practical steps.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 3,
    serviceIcon: "../images/functional_area/business_ethics_governance.svg",
    serviceTitle: "Business Ethics & Governance",
    serviceShortDescription:
      "At Advith Consulting, we are committed to upholding transparency, accountability, and corporate ethics in our client engagements, while ensuring that we also fulfil our social responsibility.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 4,
    serviceIcon: "../images/functional_area/organisational_behaviour.svg",
    serviceTitle: "Organisational Behaviour",
    serviceShortDescription:
      "Embedding our understanding of Organizational Behavior in our approach to client service, we ensure we tailor our solutions to each client’s unique culture, fostering relationships built on trust and respect.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 5,
    serviceIcon: "../images/functional_area/cross_border.svg",
    serviceTitle: "Cross Border Transactions",
    serviceShortDescription:
      "Our global mindset enables us to navigate the complexities of cross-border transactions, providing clients with informed advice and holistic solutions in the face of evolving international laws.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 6,
    serviceIcon: "../images/functional_area/change_management.svg",
    serviceTitle: "Change Management",
    serviceShortDescription:
      "Our change Management proficiency allows us to navigate organizational transformations with finesse, balancing people, processes, and technology to facilitate seamless transitions for our clients.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
];

const FunctionalAreas = ({functionarea}) => {
  // console.log(functionarea ,"functionarea")
  return (
    <>
      <div className="functional-areas pt-100 pb-70">
        <Container>
          <div className="section-title">
            <span className="sub-title">SERVICES</span>
            <Heading el="h2" heading="Functional Areas " className="h2" />
          </div>
          <p className="text-center">
              Our people bring-in a blend of different skills and functional
              expertise to deliver exceptional value.
            </p>

          <div className="row align-items-center">
            {functionarea &&
              functionarea?.map((service) => (
                <div className="col-lg-4 col-sm-6 col-md-6" key={service.id}>
                  <div className="single-services-item fuctional-areas border align-items-left">
                    <Image
                      src={cleanImage(service?.Icon?.url)}
                      alt={service.serviceTitle}
                      className="img-fluid"
                      width={100}
                      height={100}
                    />
                    <div className="align-items-center">
                      <h3 className="mt-4">{service.Title}</h3>
                      <p> {service.Description}</p>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </Container>
      </div>
    </>
  );
};

export default FunctionalAreas;