/* global React */ // Shared building blocks for the Ajaia Enterprise Training redesign. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── Hook: scroll reveal (IntersectionObserver) ────────────────────── function useReveal() { useEffect(() => { const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } } }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); document.querySelectorAll(".reveal:not(.in)").forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // ─── Hook: count-up tickers ────────────────────────────────────────── function useCountUp(target, durationMs = 1400, deps = []) { const ref = useRef(null); const [value, setValue] = useState(0); useEffect(() => { let raf,started = false,startedAt = 0; const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !started) { started = true; const step = (t) => { if (!startedAt) startedAt = t; const p = Math.min(1, (t - startedAt) / durationMs); const eased = 1 - Math.pow(1 - p, 3); setValue(Math.round(target * eased)); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); } }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => {io.disconnect();cancelAnimationFrame(raf);}; }, [target, durationMs, ...deps]); return [ref, value]; } // ─── Icons (Lucide-style, 1.5px strokes) ───────────────────────────── const AjIcon = { ArrowRight: ({ size = 16, stroke = 1.6 }) => , ArrowUpRight: ({ size = 14 }) => , Plus: ({ size = 14 }) => , Check: ({ size = 14 }) => , Spark: ({ size = 18 }) => , Layers: ({ size = 20 }) => , Shield: ({ size = 20 }) => , Workflow: ({ size = 20 }) => , Users: ({ size = 20 }) => , Bolt: ({ size = 20 }) => , Code: ({ size = 20 }) => , Compass: ({ size = 20 }) => , Chart: ({ size = 20 }) => , Book: ({ size = 20 }) => , Quote: ({ size = 28 }) => , Star: ({ size = 14 }) => , Briefcase: ({ size = 18 }) => }; // ─── Decorative paired squares ─────────────────────────────────────── function Squares({ color = "var(--ink-900)", corner = "tr", size = 16 }) { const base = { position: "absolute", width: size, height: size, background: color, display: "block" }; let p1, p2; if (corner === "tr") {p1 = { top: size, right: 0 };p2 = { top: 0, right: size };} if (corner === "tl") {p1 = { top: size, left: 0 };p2 = { top: 0, left: size };} if (corner === "br") {p1 = { bottom: size, right: 0 };p2 = { bottom: 0, right: size };} if (corner === "bl") {p1 = { bottom: size, left: 0 };p2 = { bottom: 0, left: size };} return <>; } // ─── Button (split CTA) ───────────────────────────────────────────── function AjButton({ children, variant = "primary", size = "md", href = "#", onClick, style = {} }) { const heights = { sm: 38, md: 48, lg: 54 }; const padding = { sm: "0 16px", md: "0 22px", lg: "0 26px" }; const arrowW = { sm: 40, md: 50, lg: 56 }; const h = heights[size]; const palettes = { primary: { bg: "var(--sky-400)", fg: "var(--ink-900)", line: "rgba(0,29,107,0.18)" }, dark: { bg: "var(--ink-900)", fg: "var(--paper)", line: "rgba(255,255,255,0.18)" }, ghost: { bg: "transparent", fg: "var(--ink-900)", border: "1px solid rgba(0,29,107,0.18)", line: "rgba(0,29,107,0.18)" }, outline: { bg: "rgba(255,255,255,0.04)", fg: "var(--paper)", border: "1px solid rgba(255,255,255,0.18)", line: "rgba(255,255,255,0.18)" }, glow: { bg: "var(--sky-400)", fg: "var(--ink-900)", line: "rgba(0,29,107,0.18)", glow: true } }; const p = palettes[variant]; const fontSize = size === "lg" ? 16 : size === "sm" ? 13 : 14.5; return ( {children} ); } // ─── Eyebrow (small tracked tag) ───────────────────────────────────── function Eyebrow({ children, tone = "light", icon = true }) { const dark = tone === "dark"; return ( {icon && } {children} ); } // ─── Top Nav ───────────────────────────────────────────────────────── function AjNav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const links = ["Services", "Who We Serve", "Insights", "About", "Products"]; return (
Ajaia
Book training
); } // ─── Footer ────────────────────────────────────────────────────────── function AjFooter() { return ( ); } Object.assign(window, { useReveal, useCountUp, AjIcon, Squares, AjButton, Eyebrow, AjNav, AjFooter });