export default function HomePage({ branding, navigate, onContactSubmit }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [programsOpen, setProgramsOpen] = useState(false); const [isLoaded, setIsLoaded] = useState(false); const [showStickyBar, setShowStickyBar] = useState(false); useEffect(() => { const t = setTimeout(() => setIsLoaded(true), 100); return () => clearTimeout(t); }, []); useEffect(() => { const handler = () => setShowStickyBar(window.scrollY > 600); window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, []); const pc = '#1B2A4A'; const sc = '#E8514A'; const navLinks = [ { label: 'Home', path: '/' }, { label: 'About', path: '/about' }, { label: 'Team', path: '/team' }, { 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 teamMembers = [ { name: 'Roxanne Chung', title: 'Founder & CEO', nmls: '546205', image: 'https://ykpmcgklarfoqsorbdgf.supabase.co/storage/v1/object/public/userData/user_3ARSSmVPPPGzfct7S0Zzq6l3ecL/headshot_1774548581889.jpg' }, { name: 'Robert Paucar', title: 'Senior Loan Officer', nmls: '1950605', image: 'https://ykpmcgklarfoqsorbdgf.supabase.co/storage/v1/object/public/chat_images/website-builder/user_3ARSSmVPPPGzfct7S0Zzq6l3ecL/1774968805008.jpeg' }, { name: 'Valerie Chung', title: 'Mortgage Loan Officer', nmls: '2247450', image: 'https://ykpmcgklarfoqsorbdgf.supabase.co/storage/v1/object/public/chat_images/website-builder/user_3ARSSmVPPPGzfct7S0Zzq6l3ecL/1775149731782.png' } ]; return (

{/* Skip Navigation */} { e.target.style.position = 'fixed'; }} onBlur={(e) => { e.target.style.position = 'absolute'; }}>Skip to main content {/* ── Navigation ── */}

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

{mobileMenuOpen && (

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

)}

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

{/* Subtle geometric shapes */}

Get Approved Faster. Close Smarter.

Modern mortgage solutions designed to go beyond conventional limits—whether you're buying, refinancing, or investing.

{branding.phone && (

Or call us directly at {branding.phone}

)}

Modern luxury home with contemporary architecture

{/* Floating badge */}

24-Hour Pre-Approval

Fast, secure, online

{/* ── Trust Bar ── */}

{[ { icon: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z', text: '5-Star Client Experience' }, { icon: 'M13 10V3L4 14h7v7l9-11h-7z', text: 'Fast, Transparent Closings' }, { icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', text: 'Solutions for Every Scenario' }, ].map((item, i) => (

{item.text}

))}

{/* ── Loan Programs Section ── */}

Financing That Fits Your Life

No cookie-cutter loans here. We match you with the right strategy.

{[ { title: 'First-Time Buyers', desc: 'Step into homeownership with confidence.', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' }, { title: 'Refinance', desc: 'Lower your rate, payment, or access equity.', icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' }, { title: 'Investor Loans', desc: 'Scale your portfolio with flexible options.', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' }, { title: 'Non-QM Solutions', desc: 'Creative financing when traditional doesn\'t fit.', icon: 'M13 10V3L4 14h7v7l9-11h-7z' }, ].map((loan, i) => (

navigate('/services')}>

{loan.title}

{loan.desc}

))}

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

Not Your Typical Mortgage Experience

We built The Loan Pros Team to be different. Here's what sets us apart:

{[ { title: 'Speed That Wins Deals', desc: 'We move fast so you don\'t miss opportunities.', icon: 'M13 10V3L4 14h7v7l9-11h-7z' }, { title: 'Creative Financing Solutions', desc: 'We solve problems other lenders can\'t.', icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' }, { title: 'Real Human Guidance', desc: 'No call center runaround—just clear, honest advice.', 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: 'Strategy Over Sales', desc: 'We build plans, not just push loans.', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' }, ].map((item, i) => (

{item.title}

{item.desc}

))}

Your Home Journey

Starts with the right partner

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

Simple. Clear. Done.

Three steps to your new home or better loan.

{[ { step: '01', title: 'Apply in Minutes', desc: 'Quick, easy, and secure online application.' }, { step: '02', title: 'Get a Game Plan', desc: 'We map out your best options with transparent guidance.' }, { step: '03', title: 'Close with Confidence', desc: 'No surprises. No stress. Just keys in your hand.' }, ].map((item, i) => (

{item.step}

{item.title}

{item.desc}

))}

{/* ── 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', 'bd1f960b-576c-4359-8fbd-aba7aed87e21'); 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' && ( )}

); })()} {/* ── Team Preview Section ── */}

Meet Your Loan Experts

A team that actually picks up the phone and gets things done.

{teamMembers.map((member, i) => (

navigate('/team')}>

NMLS {member.nmls}

{member.name}

{member.title}

))}

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

Ready to Make Your Move?

Whether you're buying, refinancing, or investing—we'll guide you every step of the way.

{branding.phone && (

Prefer to talk? Call us at {branding.phone}

)}

{/* ── Footer ── */} {/* ── Sticky Bottom CTA Bar (mobile only) ── */} {showStickyBar && (

)} {/* ── Optimal Blue Rate Widget + Get my Rate CTA ── */} {(() => { const [rateEmail, setRateEmail] = useState(''); const [rateStatus, setRateStatus] = useState('idle'); const [rateError, setRateError] = useState(''); const handleRateSubmit = useCallback(async (e) => { e.preventDefault(); setRateError(''); if (!rateEmail.trim()) { setRateError('Please enter your email.'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rateEmail.trim())) { setRateError('Please enter a valid email.'); return; } setRateStatus('sending'); try { const res = await fetch('/api/website-builder/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ websiteId: 'bd1f960b-576c-4359-8fbd-aba7aed87e21', name: 'Rate Widget Lead', email: rateEmail.trim(), message: 'This visitor requested their personalized rate via the Rate Widget.', }), }); if (!res.ok) throw new Error('Failed'); setRateStatus('sent'); } catch { setRateError('Something went wrong. Please try again.'); setRateStatus('idle'); } }, [rateEmail]); return (

The Loan Pros Team Inc