import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const Contact = () => {
	return (
		<section className="py-32">
			<div className="p-4">
				<div className="mx-auto flex max-w-screen-xl flex-col justify-between gap-10 lg:flex-row lg:gap-20">
					<div className="self-center max-w-lg flex flex-col justify-between gap-10">
						<div className="text-center lg:text-left">
							<h1 className="mb-2 text-5xl font-semibold lg:mb-1 lg:text-6xl">
								Contactez-nous !
							</h1>
							<p className="text-muted-foreground">
								Nous nous rendons disponible pour répondre à
								toutes vos questions.
							</p>
						</div>
						<div className="mx-auto w-fit lg:mx-0">
							<h3 className="mb-6 text-center text-2xl font-semibold lg:text-left">
								Informations de contact
							</h3>
							<ul className="ml-4 list-disc">
								<li>
									<span className="font-bold">
										Téléphone:{" "}
									</span>
									(123) 34567890
								</li>
								<li>
									<span className="font-bold">Email: </span>
									<a href="" className="underline">
										nicolas.goruk@orange.fr
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10">
						<div className="flex gap-4">
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="firstname">Prénom</Label>
								<Input
									type="text"
									id="firstname"
									placeholder="Prénom"
								/>
							</div>
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="lastname">Nom de famille</Label>
								<Input
									type="text"
									id="lastname"
									placeholder="Nom de famille"
								/>
							</div>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="email">Email</Label>
							<Input
								type="email"
								id="email"
								placeholder="Email"
							/>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="subject">Objet</Label>
							<Input
								type="text"
								id="subject"
								placeholder="Objet"
							/>
						</div>
						<div className="grid w-full gap-1.5">
							<Label htmlFor="message">Message</Label>
							<Textarea
								placeholder="Écrivez votre message ici."
								id="message"
							/>
						</div>
						<Button className="w-full">Envoyer</Button>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Contact;