import { useState, useEffect } from 'react'; import { Shield, Phone, Mail, User, CheckCircle, AlertCircle, Loader2 } from 'lucide-react'; import { validateName, validatePhone, validateEmail, formatPhoneNumber, submitHeroForm } from '../utils/formUtils'; const Hero = () => { const [formData, setFormData] = useState({ name: '', phone: '', email: '', serviceType: 'medicare' }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [submitStatus, setSubmitStatus] = useState(null); // 'success' or 'error' const validateForm = () => { const newErrors = {}; if (!validateName(formData.name)) { newErrors.name = 'Please enter your full name (at least 2 characters)'; } if (!validatePhone(formData.phone)) { newErrors.phone = 'Please enter a valid 10-digit phone number'; } if (!validateEmail(formData.email)) { newErrors.email = 'Please enter a valid email address'; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = async (e) => { e.preventDefault(); console.log('=== HERO FORM SUBMIT STARTED ==='); console.log('Form data:', formData); console.log('TCPA checkbox checked:', document.getElementById('leadid_tcpa_disclosure')?.checked); if (!validateForm()) { console.log('Form validation failed'); return; } console.log('Form validation passed, starting submission'); setIsSubmitting(true); setSubmitStatus(null); try { console.log('Calling submitHeroForm with data:', formData); await submitHeroForm(formData); console.log('Hero form submission completed successfully'); setSubmitStatus('success'); setFormData({ name: '', phone: '', email: '', serviceType: 'medicare' }); // Reset success message after 5 seconds setTimeout(() => { setSubmitStatus(null); }, 5000); } catch (error) { console.error('Hero form submission error:', error); setSubmitStatus('error'); } finally { setIsSubmitting(false); } }; const handleChange = (e) => { const { name, value } = e.target; // Format phone number as user types if (name === 'phone') { const formatted = formatPhoneNumber(value); setFormData({ ...formData, [name]: formatted, }); } else { setFormData({ ...formData, [name]: value, }); } // Clear error when user starts typing if (errors[name]) { setErrors({ ...errors, [name]: '', }); } }; return (

{/* Background Image with Overlay */}