import Image from 'next/image'
import globo from '../../public/images/globo.svg'
import { Button } from './ui/button'
import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'
import imgFooter from '../../public/images/img-footer.svg'

export function Hub() {
  return (
    <section className="flex flex-col py-20">
      <div className="container flex justify-center md:justify-around">
        <div className="flex flex-col items-center justify-center w-72 md:w-6/12 gap-10">
          <Image src={globo} alt="Imagem demonstrativa de um globo" />
          <p className="text-center text-2xl font-thin text-green-400 w-full md:max-w-96">
            Somos um <b className="text-3xl font-bold">hub</b> de inovação,
            tecnologia e negócios
          </p>
          <p className="hidden md:block text-center max-w-96">
            Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
            e assessoria profissional a instituições públicas e privadas. Nossa
            meta é conectar pessoas, empresas e instituições por meio do
            conhecimento técnico-científico aplicado aos negócios.
          </p>
          <Button
            variant="outline"
            className="uppercase rounded-sm bg-green-400/10 text-sm text-green-400 font-thin hover:bg-green-400/5 hover:text-green-400"
          >
            Saiba mais
          </Button>
        </div>
        <div className="hidden md:flex items-center justify-center w-6/12">
          <ul className="flex flex-col gap-8">
            <li className="flex items-center gap-4">
              <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
                <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
                  <Clock4 size={35} />
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <span className="font-thin">Duração:</span>
                <span className="text-xl">30 Hrs/Curso Rápido</span>
              </div>
            </li>
            <li className="flex items-center gap-4">
              <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
                <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
                  <UserRound size={35} />
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <span className="font-thin">Indicado para:</span>
                <span className="text-xl">Estudantes</span>
              </div>
            </li>
            <li className="flex items-center gap-4">
              <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
                <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
                  <Calendar size={35} />
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <span className="font-thin">Início:</span>
                <span className="text-xl">Imediato</span>
              </div>
            </li>
            <li className="flex items-center gap-4">
              <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
                <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
                  <DollarSign size={35} />
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <span className="font-thin">Investimento:</span>
                <span className="text-xl">R$200,00</span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div className="container hidden md:flex flex-col justify-center items-center gap-6 mt-8">
        <h5 className="text-green-400 text-xl">Empresas Parceiras</h5>
        <div className="flex flex-wrap justify-center gap-6">
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
          <Image
            src={imgFooter}
            alt="Educação Adventista"
            className="hidden md:flex"
          />
        </div>
      </div>
    </section>
  )
}
