import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData = [
  {
    title: `We Care About</br> The Future`,
    description:
      "We have a public commitment to the environment and society. That's why we dedicate tireless resources to prevent the impact of our activity.",
    image: "/image/brands/inalco/we-care/01.png",
  },
  {
    title: `SUSTAINABLE  </br> INNOVATION`,
    description:
      "Innovation is part of our DNA. Therefore, we continue to develop technologies and products that are game-changers, paving the way to the future for our partners.",
    image: "/image/brands/inalco/we-care/02.png",
  },
  {
    title: `DISCOVER  </br> BEYOND NATURE`,
    description:
      "A concept that encapsulates our purest essence. We draw inspiration from nature and, through our innovative production process and the purest minerals, we create sustainable surfaces without overexploiting the environment.",
    image: "/image/brands/inalco/we-care/03.png",
  },
];
const WeCare = () => {
  return (
    <section className=" we-care-section sec_padd">
      <div className="custom_containers container">
        {overviewData?.map((item, index) => {
            const isEven = index % 2 === 0;

            return (
              <Row
                className="mb-5 align-items-center justify-content-center"
                key={index}
              >
                <Col
                  md={7}
                  className={`mb-4 ${isEven ? "order-md-1" : "order-md-2"}`}
                >
                  <div className="img-banner">
                    <Image
                      width={868}
                      height={629}
                      src={item?.image}
                      alt={item?.title}
                      className="img-fluid"
                    />
                  </div>
                </Col>

                <Col md={5} className={`${isEven ? "order-md-2" : "order-md-1"}`}>
                  <div
                    className="title"
                    dangerouslySetInnerHTML={{ __html: item?.title }}
                  ></div>

                  <div
                    className="info"
                    dangerouslySetInnerHTML={{
                      __html: item?.description || "",
                    }}
                  />
                </Col>
              </Row>
            );
          })}
      </div>
    </section>
  );
};

export default WeCare;