import Image from 'next/image'

import certificateOutline from '../../public/images/certificate-outline.svg'
import schoolOnline from '../../public/images/school-online.svg'
import tableClock from '../../public/images/table-clock.svg'

export function Differences() {
  return (
    <section className="flex">
      <div className="container py-20 flex flex-col gap-20">
        <h2 className="hidden md:flex justify-center text-3xl">
          Conheça os nossos diferenciais:
        </h2>
        <ul className="flex flex-col md:flex-row h-full justify-around items-center gap-8 md:gap-4">
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={schoolOnline} alt="100% online" />
            <span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
              100% online
            </span>
          </li>
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={tableClock} alt="Prazos flexíveis" />
            <span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
              Prazos flexíveis
            </span>
          </li>
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={certificateOutline} alt="Certificados" />
            <span className="text-gray-50 md:font-extrabold text-xl md:text-3xl">
              Certificados
            </span>
          </li>
        </ul>
      </div>
    </section>
  )
}
