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:"ETHICS",
    image:"/image/brands/inalco/our-principles/01.png"
  },
{
    title:`SUSTAINABLE INNOVATION & </br> CREATIVITY`,
    image:"/image/brands/inalco/our-principles/02.png"
  },
  {
    title:`EXCELLENCE & MAXIMUM </br> QUALITY`,
    image:"/image/brands/inalco/our-principles/03.png"
  },
  {
    title:"SERVICE-MARKETING",
    image:"/image/brands/inalco/our-principles/04.png"
  },
  {
    title:"TAKE CARE OF STAKEHOLDERS",
    image:"/image/brands/inalco/our-principles/05.png"
  },
]
const CompanyOverview = () => {
  return (
    <section className=" our-principle-section catalogues-sec sec_padd">
      <div className="custom_containers container">
        {overviewData.map((item, index) => {

          return (
            <Row className="mb-5" key={index}>
              <Col xs={12} className="mb-4">
                <div className={`banner-item`}>
                  <Image
                    width={1510}
                    height={352}
                    src={item?.image}
                    alt={item?.title}
                    className="img-fluid w-100"
                  />
                  <div className="title" dangerouslySetInnerHTML={{__html: item?.title}}></div>
                </div>
              </Col>
            </Row>
          );
        })}
      </div>
    </section>
  );
};

export default CompanyOverview;