import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
const DetailsData = [
    {
        title: "",
        description: "Thanks to the special technology of Valcucine’s Artematica® door, composed of an anodized aluminum structural frame and an aesthetic panel just 5 mm thick, we are able to offer the lightest natural stone kitchen on the market. The integration of a composite honeycomb panel with carbon fiber also ensures its solidity, increasing resistance to impacts.",
        image:"/image/stain-resistance/01.png",
    },
     {
        title: "Continuity of veining",
        description: "For all surfaces of natural stone kitchens, an acceptance check is carried out to ensure integrity and, for all adjacent faces, vein continuity where possible. This check is repeated at the end of all processing stages to ensure full conformity of the product shipped",
        image:"/image/stain-resistance/02.png",
    },
     {
        title: "Care in the handling of materials",
        description: "All the materials in Valcucine, including the natural stone doors, from the moment they are received to the moment they are packed, are handled with the utmost care and with special surfaces that preserve their integrity and aesthetic qualities.",
        image:"/image/stain-resistance/03.png",
    },
     {
        title: "Packaging and shipping",
        description: "To ensure integrity during each stage of handling and shipping. All natural stone tops and doors are packed with special protective cages made of wood or chipboard, depending on the destination. The doors are additionally protected with perimeter protection and wrapped in bubble wrap.",
        image:"/image/stain-resistance/04.png",
    },
]
const Details = ({DetailsItem,bottomInfo}) => {
  return (
    <>
    <section className="about-section about-info-section">
        <div className="container">
          <Row className="justify-content-center">
            <Col md={12}>
               
                  {DetailsItem?.map((item, index) => {
                    const isEven = index % 2 === 0;

                    return (
                       <div className='stain-Details-item'>
                      <div className='row' key={index}>
                         {/* Image */}
                        <div className={`col-md-7 mb-4 mb-md-0 ${!isEven ? 'order-md-2' : ''}`}>
                          <div className='stain-Details-image'>
                            <img className='img-fluid w-100' src={cleanImage(item?.image?.url)} alt={item?.title || ''} />
                          </div>
                        </div>
                        {/* Content */}
                        <div className={`col-md-5 ${!isEven ? 'order-md-1' : ''}`}>
                          <div className='stain-Details-content'>
                            <h3>{item.title}</h3>
                            <div dangerouslySetInnerHTML={{ __html: item?.description || "" }} />
                          </div>
                        </div>

                       

                      </div>
                      
  </div>
                    );
                  })}
              
            </Col>
          </Row>
        </div>
      </section> 
      </>
  )
}

export default Details