/* ============================================================ App root — hash-based routing + dynamic SEO meta per page ============================================================ */ /* Page-level SEO metadata — title and description update in as the user navigates, which helps crawlers that execute JS and makes shared links resolve to the correct section. */ const PAGE_META = { home: { title: 'Mak Group · RCIC Immigration, Mortgages & Real Estate · Lower Mainland BC', desc: 'Mak Group: licensed RCIC immigration consultant, mortgage broker & REALTOR® serving the Lower Mainland, BC. One family team in Mandarin, Cantonese & English.', }, mortgages: { title: 'Mortgage Broker · New-to-Canada Programs · Mak Group, Lower Mainland BC', desc: 'BCFSA-licensed mortgage brokers at Mak Group shop 30+ lenders for your best rate. New-to-Canada programs, pre-approvals, refinancing, and renewals. Mandarin & Cantonese service.', }, immigration: { title: 'RCIC Immigration Consultant · Express Entry, BC PNP · Mak Group, BC', desc: 'Victor Mak, RCIC (CICC-licensed), provides immigration consulting for PR, Express Entry, BC PNP, work permits, study permits, and family sponsorship in BC. Mandarin & Cantonese.', }, realestate: { title: 'REALTOR® Lower Mainland · Buy & Sell with Mak Group, BC', desc: 'Neville Mak is a licensed REALTOR® and mortgage broker serving buyers and sellers across the Lower Mainland, BC. Local market expertise in Mandarin, Cantonese, and English.', }, team: { title: 'Victor & Neville Mak · Licensed RCIC, Mortgage Broker & REALTOR® · Mak Group', desc: 'Meet Victor Mak (RCIC & mortgage broker) and Neville Mak (REALTOR® & mortgage broker) — a family team for immigration, mortgages, and real estate in the Lower Mainland, BC.', }, resources: { title: 'Guides: BC Immigration, Mortgages & Real Estate · Mak Group', desc: 'Free guides on BC immigration, mortgages, and real estate for newcomers and first-time buyers. Topics: Express Entry, BC PNP, new-to-Canada mortgages, first-time buyer rebates.', }, contact: { title: 'Book a Free Consultation · Mak Group · Immigration, Mortgages, Real Estate', desc: 'Book a free 15-minute consultation with Mak Group. Immigration, mortgage, and real estate advice in Mandarin, Cantonese, and English. Victor: (604) 831-8833 · Neville: (778) 688-6667.', }, }; function App() { /* Read the initial page from the URL hash, then fall back to localStorage (for existing bookmarks), then default to home. */ const [page, setPage] = useState(() => { const hash = window.location.hash.replace(/^#/, ''); return hash || localStorage.getItem('cfg_page') || 'home'; }); const go = (p) => { setPage(p); localStorage.setItem('cfg_page', p); /* pushState keeps the back button working and gives each section a distinct URL for sharing / indexing. */ history.pushState({ page: p }, '', p === 'home' ? window.location.pathname : '#' + p); window.scrollTo({ top: 0, behavior: 'auto' }); }; /* Handle browser back / forward */ useEffect(() => { const onPop = (e) => { const hash = window.location.hash.replace(/^#/, ''); const newPage = (e.state && e.state.page) || hash || 'home'; setPage(newPage); }; window.addEventListener('popstate', onPop); return () => window.removeEventListener('popstate', onPop); }, []); /* Update and meta description when page changes */ useEffect(() => { const meta = PAGE_META[page] || PAGE_META.home; document.title = meta.title; const descEl = document.querySelector('meta[name="description"]'); if (descEl) descEl.setAttribute('content', meta.desc); const ogTitle = document.querySelector('meta[property="og:title"]'); if (ogTitle) ogTitle.setAttribute('content', meta.title); const ogDesc = document.querySelector('meta[property="og:description"]'); if (ogDesc) ogDesc.setAttribute('content', meta.desc); /* Update canonical to reflect the current hash */ const canonical = document.querySelector('link[rel="canonical"]'); if (canonical) { const base = 'https://mak-group.ca/'; canonical.setAttribute('href', page === 'home' ? base : base + '#' + page); } }, [page]); const pages = { home: window.HomePage, mortgages: window.MortgagesPage, immigration: window.ImmigrationPage, realestate: window.RealEstatePage, team: window.TeamPage, resources: window.ResourcesPage, contact: window.ContactPage, }; const Page = pages[page] || window.HomePage; return ( <React.Fragment> <window.Header page={page} go={go} /> <div key={page} className="rise"> <Page go={go} /> </div> <window.Footer go={go} /> <window.ContactBar go={go} /> </React.Fragment> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />);