export default function BlogPage({ branding, navigate, blogPostSlug }) { const [posts, setPosts] = useState([]); const [selectedPost, setSelectedPost] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] = useState(1); const [total, setTotal] = useState(0); const [copied, setCopied] = useState(false); const pc = branding.primaryColor || '#171d38'; const sc = branding.secondaryColor && branding.secondaryColor !== '#ffffff' ? branding.secondaryColor : '#003297'; const loName = branding.fullName || 'your loan officer'; const LIMIT = 9; useEffect(() => { const params = new URLSearchParams(window.location.search); const postSlug = blogPostSlug || 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_3AEg1BnvqJBEK9g3h1DMADJm1f2&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_3AEg1BnvqJBEK9g3h1DMADJm1f2&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) => { navigate('/blog/' + post.slug); }; const backToList = () => { navigate('/blog'); }; const getShareUrl = (slug) => { const base = (branding.siteUrl || window.location.origin || '').replace(/\/$/, ''); return base + '/blog/' + slug; }; const fallbackCopy = (text) => { try { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.focus(); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (e) {} }; const copyShareLink = (slug) => { if (!slug) return; const url = getShareUrl(slug); try { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(url).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }).catch(() => fallbackCopy(url)); } else { fallbackCopy(url); } } catch (e) { fallbackCopy(url); } }; 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); // ── Detail View ── if (selectedPost) { return (

{/* HEADER AND FOOTER WILL BE ADDED BY THE AI TO MATCH THE SITE */}

{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 (

{/* HEADER AND FOOTER WILL BE ADDED BY THE AI TO MATCH THE SITE */} {/* Hero */}

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="bg-white rounded-xl overflow-hidden border border-gray-200 cursor-pointer transition-all hover:shadow-lg hover:-translate-y-1" > {post.cover_image_url ? (

) : (

)}

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

{post.title}

{post.intro}

))}

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

Page {page} of {totalPages}

)} )}

{/* Footer */}

); }