import { useTranslation } from 'next-i18next'
import Image from 'next/image'
import { useRouter } from 'next/router'
import checkIcon from '../../../../public/images/check-circle.svg'
import chica from '../../../../public/images/chica1.svg'
import pizarra from '../../../../public/images/pizarra.svg'

export function SectionManagment() {
  const { t } = useTranslation()
  const router = useRouter()

  return (
    <div className="relative grid lg:grid-cols-2 grid-cols-1 gap-14">
      <div className="flex flex-col items-center justify-center">
        <div>
          <h5 className="font-roboto text-black mb-6 desktop:text-[48px] text-3xl font-bold">El gestor perfecto</h5>
          <p className="text-xl font-sans text-black">
            Ten un control completo de tus competiciones en cualquier disciplina.
          </p>
          <ul className="flex flex-col mt-6 gap-7">
            <li className="flex text-xs text-black">
              <Image src={checkIcon} alt="check icon" width={24} height={24} className="mr-2" />
              Crea tu propia liga
            </li>
            <li className="flex text-xs text-black">
              <Image src={checkIcon} alt="check icon" width={24} height={24} className="mr-2" />
              Une a tus equipos y jugadores
            </li>
            <li className="flex text-xs text-black">
              <Image src={checkIcon} alt="check icon" width={24} height={24} className="mr-2" />
              Crea el calendario de partidos
            </li>
            <li className="flex text-xs text-black">
              <Image src={checkIcon} alt="check icon" width={24} height={24} className="mr-2" />
              Sigue todos los resultados
            </li>
          </ul>
        </div>
      </div>
      <div className="relative z-60 ">
        <div className="absolute -bottom-[300px] right-10 md:static">
          <Image src={chica} alt="check icon" sizes="100vw" style={{ width: '100%', height: 'auto' }} />
        </div>
      </div>
      <div className="md:w-[550px] w-[350px] absolute lg:flex -left-24 md:-left-32 top-8 md:-top-36 rotate-45 z-10">
        <Image src={pizarra} alt="check icon" sizes="100vw" style={{ width: '100%', height: 'auto' }} />
      </div>
      <div className="max-w-[550px] absolute lg:flex hidden -right-20 -top-36 rotate-90 z-10">
        <Image src={pizarra} alt="check icon" sizes="100vw" style={{ width: '100%', height: 'auto' }} />
      </div>
    </div>
  )
}
