export default function BlogPage({ branding, navigate }) { const [posts, setPosts] = React.useState([]); const [selectedPost, setSelectedPost] = React.useState(null); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [page, setPage] = React.useState(1); const [total, setTotal] = React.useState(0); const [scrolled, setScrolled] = React.useState(false); const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false); const pc = branding.primaryColor || '#730027'; const sc = branding.secondaryColor && branding.secondaryColor !== '#ffffff' ? branding.secondaryColor : '#0e0868'; const loName = branding.fullName || 'your loan officer'; const LIMIT = 9; React.useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); React.useEffect(() => { const params = new URLSearchParams(window.location.search); const postSlug = params.get('post'); if (postSlug) { fetchSinglePost(postSlug); } else { fetchPosts(1); } }, []); const fetchPosts = async (p) => { setLoading(true); setError(null); try { const res = await fetch('/api/blog-posts/public?clerk_id=user_3C59zfzLMIiZjQoCsA1PXeVkmWF&page=' + p + '&limit=' + LIMIT); if (!res.ok) throw new Error('Failed to load posts'); const data = await res.json(); setPosts(data.posts || []); setTotal(data.total || 0); setPage(p); } catch (e) { setError(e.message); } finally { setLoading(false); } }; const fetchSinglePost = async (slug) => { setLoading(true); setError(null); try { const res = await fetch('/api/blog-posts/public?clerk_id=user_3C59zfzLMIiZjQoCsA1PXeVkmWF&slug=' + encodeURIComponent(slug)); if (!res.ok) throw new Error('Post not found'); const data = await res.json(); setSelectedPost(data.post); } catch (e) { setError(e.message); } finally { setLoading(false); } }; const openPost = (post) => { setSelectedPost(null); fetchSinglePost(post.slug); if (typeof window !== 'undefined') window.scrollTo(0, 0); }; const backToList = () => { setSelectedPost(null); fetchPosts(page); if (typeof window !== 'undefined') window.scrollTo(0, 0); }; const formatDate = (d) => { if (!d) return ''; return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); }; const totalPages = Math.ceil(total / LIMIT); const Navigation = () => (

{mobileMenuOpen && (

)}

); const Footer = () => ( ); // ── Detail View ── if (selectedPost) { return (

{formatDate(selectedPost.published_at || selectedPost.date_of)}

{selectedPost.title}

{selectedPost.cover_image_url && ( {selectedPost.title}

)}

{selectedPost.intro}

{selectedPost.paragraph_1}

{selectedPost.paragraph_2}

{selectedPost.paragraph_3}

{selectedPost.summary}

{/* CTA */}

{branding.headshotUrl && ( {loName}

)}

{selectedPost.cta_text}

{(branding.meetingLink || branding.applink) && ( Get in Touch )}

); } // ── List View ── return (

{/* Hero */}

Insights & Resources

Blog

Market insights and mortgage tips from {loName}

{/* Content */}

{loading && (

)} {error && (

{error}

)} {!loading && !error && posts.length === 0 && (

No blog posts yet. Check back soon!

)} {!loading && !error && posts.length > 0 && ( <>

{posts.map((post) => (

openPost(post)} className="group bg-white p-8 border border-gray-100 hover:border-gray-300 cursor-pointer transition-all hover:-translate-y-1" >

{formatDate(post.published_at || post.date_of)}

{post.title}

{post.intro}

))}

{/* Pagination */} {totalPages > 1 && (

Page {page} of {totalPages}

)} )}

); } function LoanEstimateSection({ branding }) { 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', 'f3425985-6de1-4348-a4e6-47bcf4f0e436'); 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' && ( )}

); }