import Image from 'next/image'

import signUpImage from '../../public/images/sign-up.png'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'

export function SignUp() {
  return (
    <section className="w-full bg-gradient-to-r from-green-700 to-green-50 pb-6 md:py-6 md:pb-0">
      <div className="container overflow-hidden relative h-auto flex flex-col md:flex-row gap-2 justify-between items-center ">
        <p className="max-w-[268px] my-6 md:max-w-[420px] text-xl md:text-2xl lg:text-3xl text-center order-3 md:order-1">
          Inscreva-se e receba novidades sobre cursos ou areas de interesse
        </p>
        <Image
          src={signUpImage}
          height={450}
          width={331}
          alt="Imagem demonstrativa de uma pessoa se cadastrando na plataforma"
          className="mt-auto md:min-h-[550px] object-cover order-1 md:order-2"
        />
        <Separator className="h-2 w-screen order-2 md:hidden -mt-3 bg-yellow-100" />
        <form
          action=""
          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
        >
          <div>
            <Label htmlFor="name" className="text-gray-300 text-xs">
              Nome
            </Label>
            <Input type="text" id="name" placeholder="Digite aqui" />
          </div>
          <div>
            <Label htmlFor="email" className="text-gray-300 text-xs">
              E-mail
            </Label>
            <Input type="email" id="email" placeholder="Digite aqui" />
          </div>
          <div>
            <Label htmlFor="whatsapp" className="text-gray-300 text-xs">
              Whatsapp
            </Label>
            <Input type="number" id="whatsapp" placeholder="Digite aqui" />
          </div>
          <div>
            <Label htmlFor="interest" className="text-gray-300 text-xs">
              Área de interesse
            </Label>
            <Input type="text" id="interest" placeholder="Digite aqui" />
          </div>
          <div>
            <Label htmlFor="course" className="text-gray-300 text-xs">
              Curso desejado
            </Label>
            <Input type="text" id="course" placeholder="Digite aqui" />
          </div>
          <Button
            variant="secondary"
            className="uppercase max-w-32 mx-auto md:mb-6"
          >
            Inscrever
          </Button>
        </form>
      </div>
    </section>
  )
}
