import React from 'react'

export default function Right() {
  return (
    <div className="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'>Wrench</div><div className='color-purple'>Agent</div>
            </h3>
        </div>
        <div className='p-2 w-100 bg-white my-2'> 
            <div className='color-purple text-center'>
                <h3 className='color-purple font-25 mb-10'>Ask our "WrenchAgent" Generative AI to assist</h3>
                <h3 className='color-purple font-20 mb-10'>Recommend  4 summer chores for a 12 years old</h3>
            </div>
        </div>
        <div className="p-2 bg-white custom-w-90 mx-auto border-thin border-r-10 border-purple">
        {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'>
            <button className='btn btn-get-started px-1 py-2 border-r-5 border-purple border-normal color-purple'>Get Started</button>
        </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'
]