import { useState } from 'react' import { Button } from "/components/ui/button" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { RadioGroup, RadioGroupItem } from "/components/ui/radio-group" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "/components/ui/card" import { Check } from "lucide-react" export default function CarWashSignup() { const [formData, setFormData] = useState({ name: '', phone: '', email: '', serviceType: 'car-wash', }) const [errors, setErrors] = useState({ name: '', phone: '', email: '', }) const [isSubmitted, setIsSubmitted] = useState(false) const validate = () => { let valid = true const newErrors = { name: '', phone: '', email: '' } if (!formData.name.trim()) { newErrors.name = 'Name is required' valid = false } if (!formData.phone.trim()) { newErrors.phone = 'Phone number is required' valid = false } if (!formData.email.trim()) { newErrors.email = 'Email is required' } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = 'Email is invalid' valid = false } setErrors(newErrors) return valid } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validate()) { setIsSubmitted(true) } } const resetForm = () => { setFormData({ name: '', phone: '', email: '', serviceType: 'car-wash' }) setErrors({ name: '', phone: '', email: '' }) setIsSubmitted(false) } return (

Car Wash & Detailing Signup Sign up for our services {!isSubmitted ? (

Name setFormData({ ...formData, name: e.target.value })} className="mt-2" /> {errors.name &&

{errors.name}

}

Phone Number setFormData({ ...formData, phone: e.target.value })} className="mt-2" /> {errors.phone &&

{errors.phone}

}

Email setFormData({ ...formData, email: e.target.value })} className="mt-2" /> {errors.email &&

{errors.email}

}

Service Type setFormData({ ...formData, serviceType: value })} >

Car Wash

Detailing

) : (

Thank you for signing up!

We will contact you shortly to confirm your appointment.

)}

) }