/* I Know My Skin — shared chrome: Header, Footer, language toggle, emphasis theme */
const PAGES = { home: 'index.html', services: 'services.html', about: 'about.html', contact: 'contact.html', book: 'book.html' };
/* ---- colour-emphasis theme (teal / balanced / blush), persisted across pages ---- */
const EMPH_KEY = 'ikms_emphasis';
function applyEmphasis(v) {
document.body.setAttribute('data-emphasis', v || 'balanced');
localStorage.setItem(EMPH_KEY, v || 'balanced');
}
function getEmphasis() { return localStorage.getItem(EMPH_KEY) || 'balanced'; }
const LangToggle = ({ light }) => {
const [lang, setLang] = useLang();
const opts = [['de', 'DE'], ['en', 'EN']];
const border = light ? 'rgba(255,255,255,0.4)' : 'var(--teal-300)';
return (
{opts.map(([v, l]) => {
const on = lang === v;
const colorOn = light ? 'var(--deep-teal)' : 'var(--off-white)';
const bgOn = light ? 'var(--blush)' : 'var(--deep-teal)';
const colorOff = light ? 'var(--blush)' : 'var(--fg2)';
return (
);
})}
);
};
const Header = ({ active = 'home', overHero = false }) => {
const [lang] = useLang();
const t = I18N[lang];
const [scrolled, setScrolled] = React.useState(false);
const [menuOpen, setMenuOpen] = React.useState(false);
React.useEffect(() => {
const fn = () => setScrolled(window.scrollY > 20);
fn();
window.addEventListener('scroll', fn, { passive: true });
return () => window.removeEventListener('scroll', fn);
}, []);
// lock background scroll while the mobile menu is open
React.useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const solid = scrolled || menuOpen;
const light = overHero && !solid; // light text over dark hero, until scrolled or menu open
const links = [['home', t.nav.home], ['services', t.nav.services], ['about', t.nav.about], ['contact', t.nav.contact]];
const burgerColor = light ? '#FAFAF8' : 'var(--deep-teal)';
return (
);
};
const NavLink = ({ href, label, light, active }) => {
const [h, setH] = React.useState(false);
const rest = light ? 'var(--teal-100)' : 'var(--fg2)';
const color = active ? (light ? 'var(--blush)' : 'var(--deep-teal)') : (h ? 'var(--dusty-rose)' : rest);
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{ position: 'relative', fontFamily: 'var(--font-body)', fontSize: 15, color, textDecoration: 'none', cursor: 'pointer', transition: 'color 160ms', letterSpacing: '0.01em', paddingBottom: 3, whiteSpace: 'nowrap' }}>
{label}
);
};
const Footer = () => {
const [lang] = useLang();
const t = I18N[lang];
const linkStyle = { fontFamily: 'var(--font-body)', fontSize: 14, marginBottom: 9, color: 'var(--teal-300)', textDecoration: 'none', display: 'block', cursor: 'pointer', transition: 'color 160ms' };
return (
);
};
Object.assign(window, { Header, Footer, LangToggle, PAGES, applyEmphasis, getEmphasis });