import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Clock4, Mail, Smartphone } from 'lucide-react'

export default function Contact() {
  return (
    <main className="container flex flex-col justify-center items-center py-20">
      <h1 className="text-center font-normal md:font-extrabold text-green-800 text-2xl md:text-4xl">
        Fale com a SevenPro
      </h1>
      <div className="flex flex-col md:flex-row justify-between w-full mt-10 gap-10 md:gap-4">
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Atendimento aos alunos e parceiros
          </h2>
          <ul className="flex flex-col gap-4 mt-6">
            <li className="flex items-center gap-4">
              <Clock4 className="text-green-800" />
              <span>De XXh à XXh</span>
            </li>
            <li className="flex items-center gap-4">
              <Smartphone className="text-green-800" />
              <span>Telefones: (XX) XXXX-XXXX</span>
            </li>
            <li className="flex items-center gap-4">
              <Mail className="text-green-800" />
              <span>E-mail: sevenpro@sevenpro.com.br</span>
            </li>
          </ul>
        </div>
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Envie uma mensagem
          </h2>
          <form action="" className="mt-6 flex flex-col gap-6">
            <label htmlFor="name" className="relative w-full">
              <input
                id="name"
                type="text"
                className="px-4 py-2 text-lg outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
              />
              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
                Nome completo
              </span>
            </label>
            <label htmlFor="mensage" className="relative w-full">
              <textarea
                id="mensage"
                className="px-4 py-2 text-lg h-36 outline-none w-full border border-gray-50 rounded-sm hover:border-1 duration-200 peer focus:border-green-800 bg-inherit"
              />
              <span className="absolute left-0 top-2 px-1 text-lg bg-gray-900 tracking-wide peer-focus:text-green-800 pointer-events-none duration-200 peer-focus:text-sm peer-focus:-translate-y-5 ml-2 peer-valid:text-sm peer-valid:-translate-y-5">
                Mensagem
              </span>
            </label>
            <Select>
              <SelectTrigger className="border-x border-y rounded-sm focus-visible:border-green-800">
                <SelectValue placeholder="Assunto" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="recent">Mais recentes</SelectItem>
                  <SelectItem value="fast">Cursos rápidos</SelectItem>
                  <SelectItem value="students">Estudantes</SelectItem>
                  <SelectItem value="immediate">Início imediato</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <div className="flex">
              <Button type="submit" className="w-auto">
                Enviar
              </Button>
            </div>
          </form>
        </div>
      </div>
    </main>
  )
}
