// Dalflow — main app, router, layout (Nav + Footer)
// Loads content from window.DALFLOW_CONTENT and pages from window.DALFLOW_PAGES.
const { useState, useEffect, useMemo, useCallback } = React;
const ROUTES = [
{ key: 'home', hash: '#/' },
{ key: 'services', hash: '#/services' },
{ key: 'cases', hash: '#/cases' },
{ key: 'about', hash: '#/about' },
{ key: 'contact', hash: '#/contact' },
];
function getRouteFromHash() {
const h = window.location.hash || '#/';
const found = ROUTES.find(r => r.hash === h);
return found ? found.key : 'home';
}
function useHashRoute() {
const [route, setRoute] = useState(getRouteFromHash());
useEffect(() => {
const onHash = () => {
setRoute(getRouteFromHash());
// scroll to top on route change
window.scrollTo({ top: 0, behavior: 'instant' });
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
}
// ===== Language context =====
function useLang() {
const [lang, setLang] = useState(() => {
return localStorage.getItem('dalflow-lang') || 'ca';
});
useEffect(() => {
localStorage.setItem('dalflow-lang', lang);
document.documentElement.lang = lang;
}, [lang]);
return [lang, setLang];
}
// ===== Nav =====
function Nav({ route, lang, setLang, t }) {
const [open, setOpen] = useState(false);
useEffect(() => { setOpen(false); }, [route]);
const navItem = (key, hash) => (
{t.nav[key]}
);
return (
<>
);
}
// ===== Footer =====
function Footer({ t }) {
return (
);
}
// ===== App =====
function App() {
const route = useHashRoute();
const [lang, setLang] = useLang();
const t = window.DALFLOW_CONTENT[lang];
// Tweaks state
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dalflow",
"font": "geist",
"showFinalCta": true,
"heroVariant": "serif"
}/*EDITMODE-END*/;
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply theme + font live via data attributes on
useEffect(() => {
const html = document.documentElement;
if (tweaks.theme && tweaks.theme !== 'dalflow') html.setAttribute('data-theme', tweaks.theme);
else html.removeAttribute('data-theme');
}, [tweaks.theme]);
useEffect(() => {
const html = document.documentElement;
if (tweaks.font && tweaks.font !== 'geist') html.setAttribute('data-font', tweaks.font);
else html.removeAttribute('data-font');
}, [tweaks.font]);
// Render the right page
const pages = window.DALFLOW_PAGES;
const PageComp = pages[route] || pages.home;
return (
<>
setTweak('theme', v)}
/>
setTweak('font', v)}
/>
setTweak('heroVariant', v)}
/>
setTweak('showFinalCta', v)}
/>
);
}
// Mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();