/* === SHARED MODULES — icons, hooks, router, Nav, Footer, helpers === */
const { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } = React;
/* =================================================================
ICONS — minimal lucide-style set
================================================================= */
const Icon = ({ size = 18, color = "currentColor", strokeWidth = 1.7, children }) => (
);
const I = {
ArrowRight: (p) => ,
ArrowUpRight: (p) => ,
Chevron: (p) => ,
ChevronDown: (p) => ,
Check: (p) => ,
Brain: (p) => ,
Bot: (p) => ,
Code: (p) => ,
Globe: (p) => ,
HomeSmart: (p) => ,
Currency: (p) => ,
Factory: (p) => ,
Hotel: (p) => ,
Mail: (p) => ,
Phone: (p) => ,
MapPin: (p) => ,
Menu: (p) => ,
X: (p) => ,
Linkedin: (p) => ,
ArrowDown: (p) => ,
Layers: (p) => ,
Zap: (p) => ,
Sparkle: (p) => ,
Shield: (p) => ,
Server: (p) => ,
Package: (p) => ,
Cpu: (p) => ,
TrendingUp: (p) => ,
Truck: (p) => ,
Compass: (p) => ,
};
window.I = I;
/* =================================================================
ROUTER — simple hash-based
path like "/", "/services", "/services/business-ai-automation"
================================================================= */
function parseHash() {
const h = (window.location.hash || "#/").replace(/^#/, "");
const norm = h.startsWith("/") ? h : "/" + h;
const parts = norm.split("/").filter(Boolean);
if (parts.length === 0) return { name: "home", slug: null, path: "/" };
return { name: parts[0], slug: parts[1] || null, path: norm };
}
function navigate(path, opts = {}) {
if (!path.startsWith("/")) path = "/" + path;
const target = "#" + path;
if (window.location.hash !== target) {
window.location.hash = target;
}
if (!opts.noScroll) {
window.scrollTo({ top: 0, behavior: "auto" });
}
}
function useRoute() {
const [route, setRoute] = useState(parseHash());
useEffect(() => {
const onHash = () => setRoute(parseHash());
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
return route;
}
function Link({ to, children, className = "", style = {}, onClick, ...rest }) {
const onAct = (e) => {
e.preventDefault();
onClick && onClick(e);
navigate(to);
};
return (
{children}
);
}
window.parseHash = parseHash;
window.navigate = navigate;
window.useRoute = useRoute;
window.Link = Link;
/* =================================================================
useReveal — opacity+slide on enter viewport
Falls back to immediate reveal if IntersectionObserver is throttled
(e.g. when the tab is backgrounded), to avoid invisible pages.
================================================================= */
function useReveal(cls = "reveal", delay = 0) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
el.classList.add(cls);
let revealed = false;
const reveal = () => {
if (revealed) return;
revealed = true;
el.classList.add("in");
};
const obs = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setTimeout(reveal, delay);
obs.unobserve(el);
}
});
}, { threshold: 0.12 });
obs.observe(el);
// Fallback: if observer hasn't fired within 600ms (hidden tab,
// throttled, element already onscreen) — reveal anyway.
const fallback = setTimeout(reveal, 600 + delay);
return () => { obs.disconnect(); clearTimeout(fallback); };
}, [cls, delay]);
return ref;
}
window.useReveal = useReveal;
/* =================================================================
useInView — fire callback when visible
================================================================= */
function useInView(threshold = 0.4) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) { setInView(true); obs.unobserve(el); }
}, { threshold });
obs.observe(el);
return () => obs.disconnect();
}, [threshold]);
return [ref, inView];
}
window.useInView = useInView;
/* =================================================================
LOGO
================================================================= */
function Logo({ white = false }) {
return (
);
}
/* =================================================================
NAV — with dropdowns for Services / Industries
================================================================= */
const NAV_LINKS = [
{ to: "/services", key: "nav.services", hasDropdown: "services" },
{ to: "/work", key: "nav.work" },
{ to: "/industries", key: "nav.industries", hasDropdown: "industries" },
{ to: "/logistics", key: "nav.logistics" },
{ to: "/company", key: "nav.company" },
];
function NavDropdown({ items, accent = "#0a6ef5" }) {
return (
{items.map((it) => (
(e.currentTarget.style.background = "rgba(10,110,245,0.06)")}
onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
>
{it.iconNode}
{it.label}
))}
);
}
function Nav() {
const route = useRoute();
const [scrolled, setScrolled] = useState(false);
const [openDrop, setOpenDrop] = useState(null);
const [mobileOpen, setMobileOpen] = useState(false);
const dropTimerRef = useRef(null);
const t = window.useT ? window.useT() : (k) => k;
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
setMobileOpen(false);
}, [route.path]);
const SERVICES_DROP = window.SITE_DATA.services.map((s) => ({
slug: s.slug,
to: `/services/${s.slug}`,
label: s.title,
accent: s.accent,
iconNode: I[s.icon] ? I[s.icon]({ size: 14, color: s.accent }) : null,
}));
const INDUSTRIES_DROP = window.SITE_DATA.industries.map((s) => ({
slug: s.slug,
to: `/industries/${s.slug}`,
label: s.title,
accent: s.accent,
iconNode: I[s.icon] ? I[s.icon]({ size: 14, color: s.accent }) : null,
}));
const onEnter = (key) => {
clearTimeout(dropTimerRef.current);
setOpenDrop(key);
};
const onLeave = () => {
clearTimeout(dropTimerRef.current);
dropTimerRef.current = setTimeout(() => setOpenDrop(null), 120);
};
const isActive = (to) => {
if (to === "/" && route.name === "home") return true;
return route.path.startsWith(to);
};
return (
);
}
window.Nav = Nav;
/* =================================================================
FOOTER
================================================================= */
function Footer() {
const services = window.SITE_DATA.services.slice(0, 5);
const industries = window.SITE_DATA.industries;
const t = window.useT ? window.useT() : (k) => k;
return (
);
}
window.Footer = Footer;
/* =================================================================
SHARED UI HELPERS — Tag, Breadcrumb, SectionLabel, PageHeader
================================================================= */
function Tag({ accent = "#0a6ef5", children }) {
const content = (children && typeof children === "object" && !Array.isArray(children) && !children.$$typeof)
? (window.tx ? window.tx(children) : (children.ru || children.en || ""))
: children;
return (
{content}
);
}
window.Tag = Tag;
function Breadcrumb({ items }) {
return (
{items.map((it, i) => (
{it.to ? (
{it.label}
) : (
{it.label}
)}
{i < items.length - 1 && ›}
))}
);
}
window.Breadcrumb = Breadcrumb;
function SectionTag({ tone = "blue", children }) {
const dotColor = tone === "warm" ? "#e85d00" : tone === "teal" ? "#05b89c" : "#0a6ef5";
return (
{children}
);
}
window.SectionTag = SectionTag;