import Image from 'next/image'

import Link from 'next/link'
import globo from '../../public/images/globo.svg'
import imgFooter from '../../public/images/img-footer.svg'
import { Button } from '../ui/button'

export function AboutComponent() {
  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 max-w-[1152px] gap-10">
          <Image src={globo} alt="Imagem demonstrativa de um globo" />
          <p className="text-center text-2xl font-thin text-green-400 w-full">
            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">
            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 className="uppercase">
            <Link href="/sobre">Saiba mais</Link>
          </Button>
        </div>
      </div>

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