/* global React */ /* Haven Home Loans — shared UI primitives */ const { useState: useStateShared, useEffect: useEffectShared } = React; // ---------- Logo ---------- function Logo({ dark = false, size = 28 }) { const navy = dark ? "#ffffff" : "#34495E"; const windowColor = dark ? "#34495E" : "#ffffff"; return ( ); } // ---------- Buttons ---------- function PrimaryButton({ children, onClick, small = false, as = "button", href, style = {}, disabled = false }) { const s = { background: disabled ? "#cbd5df" : "var(--hv-coral, #ff7a59)", color: "#fff", border: "none", padding: small ? "6px 12px" : "9px 16px", borderRadius: 4, fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'", fontSize: small ? 14 : 16, fontWeight: 400, cursor: disabled ? "not-allowed" : "pointer", lineHeight: 1, textDecoration: "none", display: "inline-block", transition: "background 180ms cubic-bezier(0.2,0.8,0.2,1)", ...style, }; const onEnter = (e) => { if (!disabled) e.currentTarget.style.background = "#e85f3d"; }; const onLeave = (e) => { if (!disabled) e.currentTarget.style.background = "var(--hv-coral, #ff7a59)"; }; if (as === "a") return {children}; return ; } function GhostButton({ children, onClick, small = false, as = "button", href, style = {} }) { const s = { background: "transparent", color: "#33475b", border: "1px solid #cbd5df", padding: small ? "5px 12px" : "8px 16px", borderRadius: 4, fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'", fontSize: small ? 14 : 16, fontWeight: 400, cursor: "pointer", lineHeight: 1, textDecoration: "none", display: "inline-block", transition: "background 180ms cubic-bezier(0.2,0.8,0.2,1)", ...style, }; const onEnter = (e) => { e.currentTarget.style.background = "#f5f8fb"; }; const onLeave = (e) => { e.currentTarget.style.background = "transparent"; }; if (as === "a") return {children}; return ; } // ---------- Nav ---------- function Nav({ current, home = "index.html" }) { const links = [ ["products.html", "Products", "products"], ["process.html", "Process", "process"], ["about.html", "About", "about"], ["community.html", "Community", "community"], ["reviews.html", "Reviews", "reviews"], ["blog.html", "Blog", "blog"], ]; const [menuOpen, setMenuOpen] = useStateShared(false); // Lock body scroll when overlay is open useEffectShared(() => { if (menuOpen) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; } }, [menuOpen]); return (

{links.map(([href, label, key]) => ( {label} ))}

Broker login Start now {/* Hamburger — hidden on desktop via responsive.css, shown on ≤768px */}

{/* Mobile overlay menu — hidden on desktop via responsive.css */} {menuOpen && ( )} ); } // ---------- Equal Housing Lender mark ---------- function EqualHousingMark({ size = 14, color = "#425a73", labelColor }) { return ( Equal Housing Lender ); } // ---------- Cookie consent banner ---------- function CookieBanner() { const [show, setShow] = useStateShared(false); useEffectShared(() => { try { if (!localStorage.getItem("hv-cookie-consent")) setShow(true); } catch (e) {} }, []); const set = (v) => { try { localStorage.setItem("hv-cookie-consent", v); } catch (e) {} setShow(false); }; if (!show) return null; return ( ); } // ---------- Footer ---------- function Footer() { return ( {/* Brand pillar ribbon — Local Expertise · Personal Service · Smart Solutions */}

{[ ["Local Expertise", "Atlanta-based, Atlanta-rooted. We know your zip code, your school zone, and your closing attorney.", ], ["Personal Service", "Same loan officer from first call to closing table. No relay race, no 800 numbers.", ], ["Smart Solutions", "Nine programs under one roof — non-QM, jumbo, DSCR, foreign national. Right tool, not the only tool.", ], ].map(([title, body, icon]) => (

{icon}

{title}

{body}

))}

); } // ---------- Eyebrow ---------- function Eyebrow({ children, tone = "muted" }) { const color = tone === "coral" ? "#c64a2b" : "#6b7c92"; return (

{children}

); } // ---------- Card ---------- function Card({ children, padding = 20, hover = false, style = {} }) { const base = { background: "#fff", border: "1px solid #e1e7ef", borderRadius: 6, padding, boxShadow: "rgba(31,45,61,0.06) 0 2px 4px", transition: "box-shadow 180ms cubic-bezier(0.2,0.8,0.2,1)", fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'", ...style, }; if (!hover) return

{children}

; return (

e.currentTarget.style.boxShadow = "rgba(31,45,61,0.22) 0 30px 45px -30px, rgba(0,0,0,0.08) 0 18px 36px -18px"} onMouseLeave={(e) => e.currentTarget.style.boxShadow = "rgba(31,45,61,0.06) 0 2px 4px"} >{children}

); } // ---------- Page shell ---------- function PageHeader({ eyebrow, title, subtitle, maxWidth = 720 }) { return (

{eyebrow && {eyebrow}}

{title}

{subtitle &&

{subtitle}

}

); } // ---------- URL query reader ---------- function useQueryParam(key) { const [value, setValue] = useStateShared(() => new URLSearchParams(window.location.search).get(key)); useEffectShared(() => { const update = () => setValue(new URLSearchParams(window.location.search).get(key)); window.addEventListener("popstate", update); return () => window.removeEventListener("popstate", update); }, [key]); return value; } Object.assign(window, { Logo, PrimaryButton, GhostButton, EqualHousingMark, CookieBanner, Nav, Footer, Eyebrow, Card, PageHeader, useQueryParam, });