/* global React, ReactDOM, COPY, Icon, Logo, Mark, Button, Eyebrow,
Hero, About, StatsBand, Services, Projects, QuoteBand, Contact, CTABand, SiteFooter */
const { useState, useEffect, useRef } = React;
const PAD_X = 'clamp(22px, 5.5vw, 76px)';
// Site settings (language / theme / accent / hero background / motion).
// Edit these defaults to change what loads first; values persist to localStorage
// so a visitor's language + theme choice survives reloads.
const TWEAK_DEFAULTS = {
"lang": "sr",
"theme": "dark",
"accent": "#D4AF37",
"heroBg": "spotlight", // 'spotlight' | 'mark' | 'minimal'
"motion": true
};
const TWEAKS_KEY = 'es-settings';
// localStorage-backed settings store. Keeps the [values, setTweak] interface the
// nav toggles use: setTweak('lang','en') / setTweak('theme','light').
function useTweaks(defaults) {
const [values, setValues] = useState(() => {
try { return { ...defaults, ...JSON.parse(localStorage.getItem(TWEAKS_KEY) || '{}') }; }
catch (_) { return defaults; }
});
const setTweak = (keyOrEdits, val) => {
const edits = (typeof keyOrEdits === 'object' && keyOrEdits !== null) ? keyOrEdits : { [keyOrEdits]: val };
setValues((prev) => {
const next = { ...prev, ...edits };
try { localStorage.setItem(TWEAKS_KEY, JSON.stringify(next)); } catch (_) {}
return next;
});
};
return [values, setTweak];
}
const SECTIONS = ['home', 'about', 'services', 'projects', 'contact'];
function ScrollProgress() {
const ref = useRef(null);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const p = h.scrollTop / (h.scrollHeight - h.clientHeight || 1);
if (ref.current) ref.current.style.transform = `scaleX(${p})`;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return ;
}
function Nav({ t, lang, theme, setTweak, active }) {
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const go = (id) => { setOpen(false); document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); };
const links = SECTIONS.map(id => [id, t.nav[id]]);
const veil = theme === 'dark' ? 'rgba(20,21,25,0.72)' : 'rgba(245,245,247,0.78)';
const LangToggle = ({ size = 'sm' }) => (
{['sr', 'en'].map(l => (
))}
);
const ThemeToggle = () => (
);
return (
<>
{/* mobile overlay */}
);
}
function App() {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const lang = tw.lang === 'en' ? 'en' : 'sr';
const theme = tw.theme === 'light' ? 'light' : 'dark';
const t = COPY[lang];
const [active, setActive] = useState('home');
// keep /body in sync with theme so letterbox + scrollbar match
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.lang = lang;
}, [theme, lang]);
// active section tracking
useEffect(() => {
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
}, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });
SECTIONS.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
return () => obs.disconnect();
}, [lang]);
const accentVars = {
'--accent': tw.accent,
'--gold': tw.accent,
'--accent-ink': theme === 'dark' ? tw.accent : shade(tw.accent, -0.28),
};
return (
);
}
// quick hex shade helper for accent-ink on light theme
function shade(hex, amt) {
const h = hex.replace('#', '');
let r = parseInt(h.substring(0, 2), 16), g = parseInt(h.substring(2, 4), 16), b = parseInt(h.substring(4, 6), 16);
r = Math.max(0, Math.min(255, Math.round(r + amt * 255)));
g = Math.max(0, Math.min(255, Math.round(g + amt * 255)));
b = Math.max(0, Math.min(255, Math.round(b + amt * 255)));
return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
}
ReactDOM.createRoot(document.getElementById('root')).render();