export default function HomePage({ branding, navigate, onContactSubmit }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [programsOpen, setProgramsOpen] = useState(false); const [loanAmount, setLoanAmount] = useState('400000'); const [interestRate, setInterestRate] = useState('6.500'); const [loanTerm, setLoanTerm] = useState('30'); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const t = setTimeout(() => setIsLoaded(true), 100); return () => clearTimeout(t); }, []); const pc = branding.primaryColor || '#171d38'; const sc = branding.secondaryColor && branding.secondaryColor !== '#ffffff' ? branding.secondaryColor : '#003297'; const formatLoanAmount = (v) => { const n = v.replace(/\D/g, ''); return n ? parseInt(n).toLocaleString() : ''; }; const calcPayment = () => { const p = parseFloat(loanAmount.replace(/,/g, '')); const r = parseFloat(interestRate) / 100 / 12; const n = parseInt(loanTerm) * 12; const pay = p * (r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1); return isNaN(pay) ? '0' : pay.toFixed(0); }; const navLinks = [ { label: 'Home', path: '/' }, { label: 'About', path: '/about' }, { label: 'Services', path: '/services' }, { label: 'Blog', path: '/blog' }, { label: 'Contact', path: '/contact' }, ]; const loanPrograms = [{ label: 'FHA Loans', path: '/fha-loans' }, { label: 'VA Loans', path: '/va-loans' }, { label: 'Conventional Loans', path: '/conventional-loans' }, { label: 'USDA Loans', path: '/usda-loans' }, { label: 'Jumbo Loans', path: '/jumbo-loans' }]; const loanProducts = [ { title: 'Conventional Loans', desc: 'Traditional mortgages with competitive rates for borrowers with good credit. Down payments as low as 3%.', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1', features: ['Loan amounts up to $832,750', 'No PMI with 20% down', 'Fixed & adjustable rates'], path: '/conventional-loans' }, { title: 'FHA Loans', desc: 'Government-backed loans perfect for first-time buyers with flexible credit requirements.', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016', features: ['Down payments as low as 3.5%', 'Credit Scores from 500+', 'Gift funds allowed'], path: '/fha-loans' }, { title: 'VA Loans', desc: 'Exclusive benefits for veterans, active military, and eligible spouses. Thank you for your service!', icon: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z', features: ['$0 down payment required', 'No mortgage insurance', 'Competitive interest rates'], path: '/va-loans' }, { title: 'USDA Loans', desc: 'Zero down payment loans for eligible rural and suburban homebuyers. Great for first-time buyers!', icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z', features: ['100% financing available', 'Low mortgage insurance', 'Flexible credit guidelines'], path: '/usda-loans' }, { title: 'Jumbo Loans', desc: 'Financing for luxury properties and high-value homes that exceed conventional loan limits.', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', features: ['Loan amounts up to $3 million', 'Competitive jumbo rates', 'Flexible down payment options'], path: '/jumbo-loans' }, { title: 'Refinancing', desc: 'Lower your rate, reduce your payment, or tap into your equity with our refinance options.', icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z', features: ['Rate & term refinancing', 'Cash-out refinancing', 'Streamline options'], path: '/services' }, ]; const steps = [ { num: '1', title: 'Get Pre-Approved', desc: 'Quick online application. Get your approval letter in minutes, not days.' }, { num: '2', title: 'Find Your Home', desc: 'Shop with confidence knowing exactly what you can afford.' }, { num: '3', title: 'Lock Your Rate', desc: 'Secure your rate and upload documents through our secure portal.' }, { num: '4', title: 'Close On Time', desc: 'We will be there every step of the way to a smooth closing.' }, ]; return (

{/* Skip Navigation */} { e.target.style.position = 'fixed'; e.target.style.width = 'auto'; e.target.style.height = 'auto'; e.target.style.padding = '8px 16px'; e.target.style.margin = '0'; e.target.style.overflow = 'visible'; e.target.style.clip = 'auto'; e.target.style.whiteSpace = 'normal'; }} onBlur={(e) => { e.target.style.position = 'absolute'; e.target.style.width = '1px'; e.target.style.height = '1px'; e.target.style.padding = '0'; e.target.style.margin = '-1px'; e.target.style.overflow = 'hidden'; e.target.style.clip = 'rect(0,0,0,0)'; e.target.style.whiteSpace = 'nowrap'; }}>Skip to main content {/* ── Navigation ── */}

navigate('/')}> {branding.logoUrl ? (

) : ( {branding.company || branding.fullName || 'Mortgage Pro'} )}

{navLinks.slice(0, 2).map((link) => ( ))}

setProgramsOpen(true)} onMouseLeave={() => setProgramsOpen(false)}> {programsOpen && }

{navLinks.slice(2).map((link) => ( ))}

{mobileMenuOpen && (

{navLinks.map((link) => ( ))}

LOAN PROGRAMS

{loanPrograms.map((p) => )}

)}

{/* ── Hero Section ── */}

{/* Background decorative elements */}

{/* Left column — copy */}

{branding.nmls ? `NMLS# ${branding.nmls}` : 'Licensed Mortgage Professional'}

Your Home Loan,{' '} Simplified

With access to hundreds of lenders, we compare options so you don't have to. One application. Multiple offers. A loan built around you.

{branding.phone && ( {branding.phone} )}

{/* Right column — Calculator Card */}

Payment Calculator

Estimate your monthly mortgage

Loan Amount

$ setLoanAmount(e.target.value.replace(/\D/g, ''))} className="w-full pl-8 pr-4 py-3 rounded-lg text-base sm:text-lg font-medium text-white outline-none" style={{ backgroundColor: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)' }} onFocus={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.4)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.12)'} />

Rate

setInterestRate(e.target.value.replace(/[^\d.]/g, ''))} className="w-full pr-8 pl-4 py-3 rounded-lg text-base sm:text-lg font-medium text-white outline-none" style={{ backgroundColor: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)' }} onFocus={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.4)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.12)'} /> %

Term

Estimated Monthly Payment

${parseFloat(calcPayment()).toLocaleString()}

Principal & Interest Only

{/* Curved bottom edge */}

{/* ── Loan Products Grid ── */}

Find Your Perfect Loan

Whether you are buying your first home or your fifth, we have the right mortgage solution for you.

{loanProducts.map((loan) => (

e.currentTarget.style.borderColor = pc} onMouseLeave={(e) => e.currentTarget.style.borderColor = '#e5e7eb'} onClick={() => navigate(loan.path || '/services')}>

{loan.title}

{loan.desc}

Learn More

))}

{/* ── Process Section ── */}

Fast, Simple, Transparent

Our streamlined process gets you from application to keys in hand faster than traditional lenders.

{steps.map((step) => (

{step.num}

{step.title}

{step.desc}

))}

{/* ── Why Choose Us ── */}

Why Homebuyers Choose {branding.fullName?.split(' ')[0] || 'Us'}

We're not just another mortgage company. We're committed to making homeownership accessible and stress-free.

{[ { title: 'Lightning Fast Closings', desc: 'Your dream home will not wait, and neither should you.', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' }, { title: 'Local Expert', desc: `Neil knows the market, every trend, and every opportunity to save you money.`, icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' }, { title: 'No Surprises Policy', desc: 'What we quote is what you get. No hidden fees, no last-minute changes.', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016' }, ].map((item) => (

{item.title}

{item.desc}

))}

{/* Testimonial Card */}

Client Review

{[1,2,3,4,5].map((s) => ( ))}

I have recommended Neil to all of my friends, family and co-workers because he is a pleasure to work with and always secures the best rate possible! I will definitely use Neil for all my future mortgage needs!

Candice S.

Home Purchase

{/* ── CTA Section ── */}

Ready to Make Your Move?

Join the thousands of families who trusted the Shelton Mortgage Team to help them find the perfect place to call home.

{branding.phone && ( {branding.phone} )}

{/* ── Loan Estimate Analyzer Section ── */} {(() => { const [leStep, setLeStep] = useState(1); const [leForm, setLeForm] = useState({ name: '', email: '', phone: '', creditScore: '' }); const [leFile, setLeFile] = useState(null); const [leFileName, setLeFileName] = useState(''); const [leDragging, setLeDragging] = useState(false); const [leStatus, setLeStatus] = useState('idle'); const [leError, setLeError] = useState(''); const [leStepError, setLeStepError] = useState(''); const fileInputRef = useRef(null); const leSteps = ['Your Information', 'Loan Details', 'Review & Submit']; const formatPhone = useCallback((value) => { const digits = value.replace(/\D/g, '').slice(0, 10); if (digits.length === 0) return ''; if (digits.length <= 3) return '(' + digits; if (digits.length <= 6) return '(' + digits.slice(0, 3) + ') ' + digits.slice(3); return '(' + digits.slice(0, 3) + ') ' + digits.slice(3, 6) + '-' + digits.slice(6); }, []); const handleLeDrop = useCallback((e) => { e.preventDefault(); e.stopPropagation(); setLeDragging(false); const file = e.dataTransfer?.files?.[0]; if (file) { if (file.type !== 'application/pdf' && !file.name?.toLowerCase().endsWith('.pdf')) { setLeStepError('Please upload a PDF file.'); return; } if (file.size > 10 * 1024 * 1024) { setLeStepError('File must be under 10MB.'); return; } setLeFile(file); setLeFileName(file.name); setLeStepError(''); } }, []); const handleLeFileSelect = useCallback((e) => { const file = e.target?.files?.[0]; if (file) { if (file.type !== 'application/pdf' && !file.name?.toLowerCase().endsWith('.pdf')) { setLeStepError('Please upload a PDF file.'); return; } if (file.size > 10 * 1024 * 1024) { setLeStepError('File must be under 10MB.'); return; } setLeFile(file); setLeFileName(file.name); setLeStepError(''); } }, []); const validateStep = useCallback((step) => { if (step === 1) { if (!leForm.name.trim()) { setLeStepError('Please enter your full name.'); return false; } if (!leForm.email.trim()) { setLeStepError('Please enter your email address.'); return false; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(leForm.email.trim())) { setLeStepError('Please enter a valid email address.'); return false; } if (!leForm.phone.trim()) { setLeStepError('Please enter your phone number.'); return false; } } if (step === 2) { if (!leFile) { setLeStepError('Please upload your Loan Estimate PDF.'); return false; } } setLeStepError(''); return true; }, [leForm, leFile]); const goNext = useCallback(() => { if (validateStep(leStep)) setLeStep(leStep + 1); }, [leStep, validateStep]); const goBack = useCallback(() => { setLeStepError(''); setLeStep(leStep - 1); }, [leStep]); const handleLeSubmit = useCallback(async () => { setLeStatus('uploading'); setLeError(''); try { const fd = new FormData(); fd.append('websiteId', 'b261c7b3-556a-4f87-8d8f-1bf5c4939184'); fd.append('name', leForm.name.trim()); fd.append('email', leForm.email.trim()); fd.append('phone', leForm.phone.trim()); fd.append('creditScore', leForm.creditScore); fd.append('file', leFile); const res = await fetch('/api/website-builder/loan-estimate', { method: 'POST', body: fd }); if (!res.ok) { const body = await res.json().catch(() => ({})); throw new Error(body.error || 'Submission failed'); } setLeStatus('success'); } catch (err) { setLeStatus('error'); setLeError(err.message || 'Something went wrong. Please try again.'); } }, [leForm, leFile]); if (leStatus === 'success') { return (

We're On It!

We are analyzing your loan for potential savings. We'll be in touch soon!

); } return (

See How Much You Could Save

Upload your Loan Estimate and we'll analyze it for potential savings on your mortgage.

{/* Step Progress Indicator */}

{leSteps.map((label, i) => { const stepNum = i + 1; const isActive = stepNum === leStep; const isCompleted = stepNum < leStep; return ( {i > 0 && (

)}

{isCompleted ? ( ) : stepNum}

{label}

); })}

{/* Step 1: Your Information */} {leStep === 1 && (

Full Name * { setLeForm({ ...leForm, name: e.target.value }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="John Smith" />

Email Address * { setLeForm({ ...leForm, email: e.target.value }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="john@example.com" />

Phone Number * { setLeForm({ ...leForm, phone: formatPhone(e.target.value) }); setLeStepError(''); }} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-shadow" style={{ '--tw-ring-color': branding.primaryColor }} placeholder="(555) 123-4567" />

)} {/* Step 2: Loan Details */} {leStep === 2 && (

Estimated Credit Score

Upload Loan Estimate (PDF) *

{ e.preventDefault(); e.stopPropagation(); setLeDragging(true); }} onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); setLeDragging(false); }} onDrop={handleLeDrop} onClick={() => fileInputRef.current?.click()} className="border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors" style={{ borderColor: leDragging ? branding.primaryColor : (leFileName ? branding.primaryColor + '80' : '#d1d5db'), backgroundColor: leDragging ? branding.primaryColor + '08' : (leFileName ? branding.primaryColor + '05' : '#fafafa'), }} > {leFileName ? (

{leFileName}

Click or drag to replace

) : (

Drag & drop your Loan Estimate here

or click to browse (PDF, max 10MB)

)}

)} {/* Step 3: Review & Submit */} {leStep === 3 && (

Name {leForm.name}

Email {leForm.email}

Phone {leForm.phone}

{leForm.creditScore && (

Credit Score {leForm.creditScore}

)}

Document

{leFileName}

Please confirm your information is correct before submitting.

)} {/* Error Messages */} {(leStepError || leError) && (

{leStepError || leError}

)} {/* Navigation Buttons */}

{leStep > 1 && leStatus !== 'uploading' && ( )} {leStep < 3 && ( )} {leStep === 3 && ( )}

{leStatus === 'error' && ( )}

); })()} {/* ── Footer ── */}

); }

Neil Shelton | Edge Home Finance