import { Search } from 'lucide-react'
import Link from 'next/link'

import { About } from '@/components/about'
import { Banner } from '@/components/banner'
import { CarouselComponent } from '@/components/corousel-component'
import { CourseCategory } from '@/components/course-category'
import { Differences } from '@/components/differences'
import { InputMui } from '@/components/mui/inputs'
import { NavLinkCategory } from '@/components/nav-link-category'
import { SignUp } from '@/components/sign-up'
import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
import { Button } from '@/components/ui/button'
import { Suspense } from 'react'

export default function Home() {
  return (
    <>
      <div className="absolute h-[200px] w-full bg-gradient-to-b from-gray-900 from-5% z-10" />
      <main className="overflow-hidden">
        <Banner />

        <div className="container flex flex-col">
          <Suspense fallback={<SkeletonSerachParams />}>
            <NavLinkCategory />
          </Suspense>
          <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
            <InputMui
              label="O que você quer aprender hoje?"
              variant="standard"
              type="text"
              className="w-full #fafafa"
            />
            <Search size={24} />
          </div>
          <CarouselComponent />
          <Button
            variant="secondary"
            className="uppercase mx-auto my-8"
            asChild
          >
            <Link href="#">Ver todos os cursos</Link>
          </Button>
        </div>
        <CourseCategory />
        <Differences />
        <SignUp />
        <About.Root>
          <About.Globo>
            <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>
          </About.Globo>
          <About.Companies className="hidden md:flex" />
        </About.Root>
      </main>
    </>
  )
}
