import Image from 'next/image'
import React from 'react'

const WhyChoose = () => {
  return (
    <div className='WhyChoose bg-[#FFF] py-16 md:py-24 relative px-5 md:px-0'>
      <div className='right_orange_sado absolute top-0 right-0 w-full md:w-auto'>
        <Image src="/images/right_orange_sado.png" className='w-full md:w-auto' alt="" width={1200} height={600} />
      </div>
      
      <div className='max-w-[1200px] mx-auto'>
        <div className='text-center'>
          <h2 data-aos="zoom-in" className="text-[32px] md:text-[30px] lg:text-[52px] font-bold text-[#000] Manrope">Why We’re Your Best Choice</h2>
        </div>

        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3 mt-12'>
          {/** Card 1 **/}
          <div className='why_choose_card p-7 flex flex-col justify-center items-center min-h-[100px] bg-[#F9F9F9] rounded-[27px]'>
            <div className='h-[70px] w-[70px] rounded-full bg-[#E77025] p-3 flex justify-center items-center'>
              <Image src="/images/make-website.svg" alt="We make websites — Fruxinfo" width={1200} height={600} />
            </div>
            <div className='text-center'>
              <h3 className="text-[18px] md:text-[25px] font-bold text-[#E77025] my-3 Manrope">We Make Websites That Work</h3>
              <p className="text-[16px] md:text-[18px] text-[#141414]">At Fruxinfo, we create clean and simple websites that load fast, look good on every device and help you grow online with SEO-friendly design.</p>
            </div>
          </div>

          {/** Card 2 **/}
          <div className='why_choose_card p-7 flex flex-col justify-center items-center min-h-[100px] bg-[#F9F9F9] rounded-[27px]'>
            <div className='h-[70px] w-[70px] rounded-full bg-[#E77025] p-3 flex justify-center items-center'>
              <Image src="/images/helping-business-grow.svg" alt="Helping businesses grow online — Fruxinfo" width={1200} height={600} />
            </div>
            <div className='text-center'>
              <h3 className="text-[18px] md:text-[25px] font-bold text-[#E77025] my-3 Manrope">Helping Your Business Grow Online</h3>
              <p className="text-[16px] md:text-[18px] text-[#141414]">From website design to SEO and marketing, our team focuses on easy solutions that bring more visitors, more leads and better results for your business.</p>
            </div>
          </div>

          {/** Card 3 **/}
          <div className='why_choose_card p-7 flex flex-col justify-center items-center min-h-[100px] bg-[#F9F9F9] rounded-[27px]'>
            <div className='h-[70px] w-[70px] rounded-full bg-[#E77025] p-3 flex justify-center items-center'>
              <Image src="/images/simple-solution-make.svg" alt="Simple solutions, made for you — Fruxinfo" width={1200} height={600} />
            </div>
            <div className='text-center'>
              <h3 className="text-[18px] md:text-[25px] font-bold text-[#E77025] my-3 Manrope">Simple Solutions, Real Results</h3>
              <p className="text-[16px] md:text-[18px] text-[#141414]">We believe in keeping things easy. Our websites, SEO and digital marketing services are built to help you reach more people and grow faster.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default WhyChoose
