import Button from '@/components/Button'
import InfoBox from '@/components/InfoBox'
import { Activity, Headphone, Profile2User, ShieldTick } from 'iconsax-react'
import { FC } from 'react'

const WhyDanak: FC = () => {
    return (
        <div className='w-full py-32 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] mt-40 rounded-4xl'>
            <div className='max-w-maxWidth mx-auto flex items-center gap-20'>
                <div className='max-w-[300px]'>
                    <h2 className='text-3xl'>
                        چرا داناک؟
                    </h2>

                    <p className='mt-10 leading-7 text-sm'>
                        ما در داناک با ترکیب خلاقیت، تخصص و تکنولوژی‌های روز، راهکارهای نرم‌افزاری منحصربه‌فردی ارائه می‌دهیم که کسب‌وکار شما را به سطحی بالاتر می‌برد.
                    </p>

                    <Button
                        label='خدمات'
                        className='mt-10 w-fit px-12'
                    />
                </div>

                <div className='flex-1 flex gap-8 flex-wrap'>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Profile2User
                                size={24}
                                color='#0A66C2'
                            />}
                            title='مشاوره'
                            description='راهکارهای نرم‌افزاری مدرن با عملکرد بالا و کمترین زمان اجرا.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<ShieldTick
                                size={24}
                                color='#FF7B00'
                            />}
                            title='خدمات امنیت'
                            description='سرویس های قابل اعتماد با استانداردهای امنیتی پیشرفته.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Headphone
                                size={24}
                                color='#00980F'
                            />}
                            title='خدمات پشتیبانی'
                            description='همیشه در کنار شما هستیم تا بهترین تجربه را داشته باشید.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Activity
                                size={24}
                                color='#FF00B8'
                            />}
                            title='راهکارهای اختصاصی'
                            description='نرم‌افزارهایی متناسب با نیازهای خاص کسب‌وکار شما.'
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default WhyDanak