import React from 'react'
import BGImage from "../../../assets/images/sec-background.jpg";

export default function Right() {
  return (
    <div className="p-1 w-100">
        {/* <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
            <h3 className='title text-center'>Assign Faster with</h3>
            <h3 className='title text-center d-flex justify-content-center flex-nowrap'>
                <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
            </h3>
        </div> */}
        {/* <div className='px-2 w-100 mb-2'>  */}
        <div className='color-purple text-center mb-2'>
            {/* <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3> */}
            <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
            <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
        </div>
        {/* </div> */}
        {/* withFadeEdge-light-purple border-skyblue border-thin*/}
        <div className="p-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
            style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}
        >
            <div className='generative-ai'>
                {list?.map((item, idx) => (
                    <div className="col-12 mb-20" key={idx}>
                        <div
                            className={`appie-traffic-service-two features appie-modern-design`}
                        >
                            <div className="icon">
                            <i className='fal fa-check' />
                            </div>
                            <h5 className="title italic color-purple">{item}</h5>
                        </div>
                    </div>
                ))}
                <div className='w-100 d-flex justify-content-end'>
                    <a className='main-btn' href={process.env.REACT_APP_DASH_URL_SIGNUP}>Get Started</a>
                </div>
            </div>
        </div>
    </div>
  )
}



const list = [
    'Watering the plants and garden',
    'Helping with meal preparation and cooking',
    'Assisting with organizing and cleaning out a specific area of the house',
    'Taking care of a pet, such as feeding, walking, and grooming'
]