/* Harupa.pro — shared chrome: language-aware NavBar wrapper + Footer. Exports window.HPChrome = { SiteNav, SiteFooter, useLangState, scrollToId }. */ (function () { const { useState, useEffect } = React; const DS = window.HarupaProDesignSystem_4a4a6a; const { NavBar } = DS; const I = window.HPIcons; const css = ` .ft { background: var(--graphite); color: var(--on-dark-soft); padding: 72px 28px 40px; } .ft__wrap { max-width: var(--container); margin: 0 auto; } .ft__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--graphite-line); } .ft__brand { display: flex; gap: 13px; align-items: center; } .ft__name { font-family: var(--font-serif); font-size: 24px; color: var(--on-dark); letter-spacing: -0.4px; } .ft__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--on-dark-faint); margin-top: 3px; } .ft__links { display: flex; gap: 14px; } .ft__icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--graphite-line); color: var(--on-dark-soft); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: var(--transition-control); } .ft__icon:hover { color: var(--on-dark); border-color: var(--amber-light); background: var(--graphite-3); } .ft__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; } .ft__copy { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-faint); } .ft__mail { color: var(--amber-light); text-decoration: none; font-family: var(--font-mono); font-size: 13px; } .ft__mail:hover { text-decoration: underline; } @media (max-width: 700px) { .ft__top { flex-direction: column; } } /* Chrome ignores var() colors on :visited anchors — pin literal token values. */ a.hp-btn:visited { color: #1b1813; } a.svc__link:visited, a.art__read:visited { color: #8a5418; } a.ft__icon:visited { color: #b8ae9c; } a.ft__mail:visited { color: #d69a52; } /* Responsive override: the DS NavBar ships no media queries; its non-wrapping links row forces a min-content width wider than tablet viewports. Collapse the centre links first, then trim chrome on phones. */ @media (max-width: 1120px) { .hp-nav .hp-nav__links { display: none; } } @media (max-width: 560px) { .hp-nav.hp-nav { padding: 0 16px; gap: 12px; } .hp-nav .hp-nav__brand-sub { display: none; } .hp-nav .hp-nav__right { gap: 10px; } } `; if (!document.getElementById("hp-chrome-css")) { const s = document.createElement("style"); s.id = "hp-chrome-css"; s.textContent = css; document.head.appendChild(s); } function scrollToId(id) { if (id === "home") { window.scrollTo({ top: 0, behavior: "smooth" }); return; } const el = document.getElementById(id); if (!el) return; const y = el.getBoundingClientRect().top + window.scrollY - 58; window.scrollTo({ top: Math.max(0, y), behavior: "smooth" }); } /* Language state hook: syncs , , meta description, ?lang=. */ function useLangState(page) { const [lang, setLang] = useState(window.hpGetLang()); useEffect(() => { window.hpApplyLangMeta(lang, page); }, [lang, page]); /* Workaround for a style-invalidation race: <button class="hp-btn"> rendered by React before the dynamically injected hp-btn-css / @import tokens settle can get stuck with UA button styles. Reattaching the node (same position) forces a clean style resolution. Runs a few delayed passes after mount. */ useEffect(() => { const fix = () => { document.querySelectorAll("button.hp-btn").forEach((b) => { const p = b.parentNode; if (!p) return; const next = b.nextSibling; p.removeChild(b); p.insertBefore(b, next); }); }; const timers = [50, 400, 1200].map((ms) => setTimeout(fix, ms)); window.addEventListener("load", fix); return () => { timers.forEach(clearTimeout); window.removeEventListener("load", fix); }; }, []); const t = window.hpMakeT(lang); return { lang, setLang, t }; } function SiteNav({ t, lang, setLang, links, ctaId, onNavigate }) { return ( React.createElement("div", { style: { position: "sticky", top: 0, zIndex: 50 } }, React.createElement(NavBar, { links, languages: ["EN", "RU", "UA", "BY", "PL"], activeLang: lang.toUpperCase(), cta: { label: t("nav-cta"), id: ctaId || "contact" }, onNavigate: onNavigate || scrollToId, onLangChange: (l) => setLang(String(l).toLowerCase()), })) ); } function Mark() { return React.createElement("svg", { width: 38, height: 38, viewBox: "0 0 48 48", fill: "none", style: { color: "var(--on-dark)" } }, React.createElement("polygon", { points: "24,4 41.32,14 41.32,34 24,44 6.68,34 6.68,14", stroke: "currentColor", strokeWidth: 1.75, fill: "none", strokeLinejoin: "round" }), React.createElement("g", { stroke: "var(--amber-light)", strokeWidth: 1.4 }, React.createElement("line", { x1: 24, y1: 15, x2: 16, y2: 31 }), React.createElement("line", { x1: 24, y1: 15, x2: 32, y2: 31 }), React.createElement("line", { x1: 16, y1: 31, x2: 32, y2: 31 })), React.createElement("g", { fill: "var(--amber-light)" }, React.createElement("circle", { cx: 24, cy: 15, r: 2.6 }), React.createElement("circle", { cx: 16, cy: 31, r: 2.6 }), React.createElement("circle", { cx: 32, cy: 31, r: 2.6 }))); } function SiteFooter({ t }) { return ( React.createElement("footer", { className: "ft" }, React.createElement("div", { className: "ft__wrap" }, React.createElement("div", { className: "ft__top" }, React.createElement("div", { className: "ft__brand" }, React.createElement(Mark), React.createElement("div", null, React.createElement("div", { className: "ft__name" }, "Harupa"), React.createElement("div", { className: "ft__tag" }, t("ft-tag")))), React.createElement("div", { className: "ft__links" }, React.createElement("a", { className: "ft__icon", href: "https://www.linkedin.com/in/dzmitry-harupa-332131137/", target: "_blank", rel: "noopener noreferrer", "aria-label": "LinkedIn" }, React.createElement(I.Linkedin, { width: 19, height: 19 })), React.createElement("a", { className: "ft__icon", href: "https://t.me/d7561985", target: "_blank", rel: "noopener noreferrer", "aria-label": "Telegram" }, React.createElement(I.Telegram, { width: 19, height: 19 })), React.createElement("a", { className: "ft__icon", href: "https://github.com/d7561985", target: "_blank", rel: "noopener noreferrer", "aria-label": "GitHub" }, React.createElement(I.Github, { width: 19, height: 19 })), React.createElement("a", { className: "ft__icon", href: "mailto:d7561985@gmail.com", "aria-label": "Email" }, React.createElement(I.Mail, { width: 19, height: 19 })))), React.createElement("div", { className: "ft__bottom" }, React.createElement("div", { className: "ft__copy" }, t("ft-copy")), React.createElement("a", { className: "ft__mail", href: "mailto:d7561985@gmail.com" }, "d7561985@gmail.com"))) ) ); } window.HPChrome = { SiteNav, SiteFooter, useLangState, scrollToId }; })();