import AnimationTextHead from '@/app/component/AnimationTextHead';
import UnderlineLG from '../icons/UnderlineLG';
import TickOrangeA from '../icons/TickOrangeA';

const ourServices = [
    'برگزاری دوره های آنلاین',
    'معرفی بهترین باشگاه های گردشگری',
    'معرفی بهترین باشگاه های گردشگری',
    'ارتباط با راهنمایان گردشگری',
    'معرفی جاذبه های گردشگری',
    'ارتباط با راهنمایان گردشگری',
    'برگزاری تور ها و برنامه های متنوع',
    'معرفی بومگردی های سراسر کشور',
    'برگزاری تور ها و برنامه های متنوع'
]

function Services() {
    return (
        <div className='mt-[40px] px-[12%]'>
            <div className='flex justify-center'>
                <AnimationTextHead name='zoom-in-up' text='خدمات ما'>
                    <UnderlineLG />
                </AnimationTextHead>
            </div>
            <ul className='mt-[40px] grid grid-cols-3 gap-x-[72px] gap-y-[56px]'>
                {ourServices.map((item, idx) => (
                    <li
                        key={idx}
                        className='flex items-center justify-start gap-[8px]'
                    >
                        <TickOrangeA />
                        <p className='text-[#525252] text-[16px] font-medium'>{item}</p>
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default Services