import { Button } from "./ui/button";
import { Card, CardContent, CardHeader } from "./ui/card";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Alert, AlertDescription } from "./ui/alert";
import { Mail, Phone, MapPin, Check, AlertCircle } from "lucide-react";
import { motion } from "motion/react";
import { useState, useEffect } from "react";
interface FormData {
firstName: string;
lastName: string;
email: string;
company: string;
teamSize: string;
message: string;
}
interface FormErrors {
firstName?: string;
lastName?: string;
email?: string;
company?: string;
message?: string;
}
export function Contact() {
const [isVisible, setIsVisible] = useState(false);
const [formData, setFormData] = useState({
firstName: "",
lastName: "",
email: "",
company: "",
teamSize: "",
message: ""
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle");
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
}
},
{ threshold: 0.1 }
);
const element = document.getElementById("contact");
if (element) {
observer.observe(element);
}
return () => observer.disconnect();
}, []);
const validateForm = (): boolean => {
const newErrors: FormErrors = {};
if (!formData.firstName.trim()) {
newErrors.firstName = "First name is required";
}
if (!formData.lastName.trim()) {
newErrors.lastName = "Last name is required";
}
if (!formData.email.trim()) {
newErrors.email = "Email is required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "Please enter a valid email";
}
if (!formData.company.trim()) {
newErrors.company = "Company is required";
}
if (!formData.message.trim()) {
newErrors.message = "Message is required";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
setSubmitStatus("idle");
// Simulate API call
try {
await new Promise(resolve => setTimeout(resolve, 2000));
setSubmitStatus("success");
setFormData({
firstName: "",
lastName: "",
email: "",
company: "",
teamSize: "",
message: ""
});
} catch (error) {
setSubmitStatus("error");
} finally {
setIsSubmitting(false);
}
};
const handleInputChange = (field: keyof FormData, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors(prev => ({ ...prev, [field]: undefined }));
}
};
return (
Ready to{" "}
get started?
Get in touch with our team to learn how we can help transform your business
with our intelligent automation platform.
Send us a message
We'll get back to you within 24 hours.
{submitStatus === "success" && (
Thank you! Your message has been sent successfully. We'll get back to you soon.
)}
{submitStatus === "error" && (
Sorry, there was an error sending your message. Please try again.
)}