"use client";

import { useState } from "react";

export default function EventRegistrationForm() {
	const [formData, setFormData] = useState({
		firstName: "",
		lastName: "",
		email: "",
		phone: "",
		artForm: "",
		experience: "",
	});

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		console.log("Form submitted:", formData);
	};

	const handleChange = (
		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
	) => {
		setFormData((prev) => ({
			...prev,
			[e.target.name]: e.target.value,
		}));
	};

	return (
		<section
			id="registration"
			className="snap-section relative z-30 min-h-screen w-full bg-[#214e51]/96 px-12 py-16"
		>
			<div className="mx-auto flex h-full max-w-6xl flex-col">
				<h2 className="mb-2 font-['Intro',sans-serif] text-4xl text-white">
					Schrijf je nu in!
				</h2>
				<p className="mb-12 max-w-3xl font-['Intro',sans-serif] text-white/80 text-xl">
					Doet dit jouw creatieve geest borellen? Vul nog even dit formulier in
				</p>

				<form onSubmit={handleSubmit} className="flex flex-1 flex-col">
					<div className="flex flex-col gap-8">
						{/* Row 1: First Name + Last Name */}
						<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
							<div className="flex flex-col gap-2">
								<label
									htmlFor="firstName"
									className="font-['Intro',sans-serif] text-2xl text-white"
								>
									Voornaam
								</label>
								<input
									type="text"
									id="firstName"
									name="firstName"
									value={formData.firstName}
									onChange={handleChange}
									placeholder="Jouw voornaam"
									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
								/>
							</div>

							<div className="flex flex-col gap-2">
								<label
									htmlFor="lastName"
									className="font-['Intro',sans-serif] text-2xl text-white"
								>
									Achternaam
								</label>
								<input
									type="text"
									id="lastName"
									name="lastName"
									value={formData.lastName}
									onChange={handleChange}
									placeholder="Jouw achternaam"
									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
								/>
							</div>
						</div>

						{/* Row 2: Email + Phone */}
						<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
							<div className="flex flex-col gap-2">
								<label
									htmlFor="email"
									className="font-['Intro',sans-serif] text-2xl text-white"
								>
									E-mail
								</label>
								<input
									type="email"
									id="email"
									name="email"
									value={formData.email}
									onChange={handleChange}
									placeholder="jouw@email.nl"
									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
								/>
							</div>

							<div className="flex flex-col gap-2">
								<label
									htmlFor="phone"
									className="font-['Intro',sans-serif] text-2xl text-white"
								>
									Telefoon
								</label>
								<input
									type="tel"
									id="phone"
									name="phone"
									value={formData.phone}
									onChange={handleChange}
									placeholder="06-12345678"
									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
								/>
							</div>
						</div>

						{/* Row 3: Art Form (full width) */}
						<div className="flex flex-col gap-2">
							<label
								htmlFor="artForm"
								className="font-['Intro',sans-serif] text-2xl text-white"
							>
								Kunstvorm
							</label>
							<input
								type="text"
								id="artForm"
								name="artForm"
								value={formData.artForm}
								onChange={handleChange}
								placeholder="Muziek, Theater, Dans, etc."
								className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
							/>
						</div>

						{/* Row 4: Experience (full width) */}
						<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
							<div className="flex flex-col gap-2">
								<label
									htmlFor="experience"
									className="font-['Intro',sans-serif] text-2xl text-white"
								>
									Ervaring
								</label>
								<input
									type="text"
									id="experience"
									name="experience"
									value={formData.experience}
									onChange={handleChange}
									placeholder="Beginner / Gevorderd / Professional"
									className="border-white/30 border-b bg-transparent pb-2 font-['Intro',sans-serif] text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none"
								/>
							</div>
						</div>
					</div>

					{/* Submit button */}
					<div className="mt-auto flex flex-col items-center gap-4 pt-12">
						<button
							type="submit"
							className="bg-white px-12 py-4 font-['Intro',sans-serif] text-2xl text-[#214e51] transition-all hover:scale-105 hover:bg-gray-100"
						>
							Bevestigen
						</button>

						<p className="text-center font-['Intro',sans-serif] text-sm text-white/60">
							Nu al een act / idee van wat jij graag zou willen brengen,{" "}
							<span className="cursor-pointer underline hover:text-white">
								klik HIER
							</span>
						</p>
					</div>
				</form>
			</div>
		</section>
	);
}
