/* Wired CIO marketing site — Header (navigation organized around the four pillars) */ (function () { const DS = window.WiredCIODesignSystem_afa0a4; const I = window.WCIcons; const { Button, Logo, OUTCOMES } = DS; const OUTCOME_ICONS = { grow: I.Rocket, protect: I.ShieldCheck, automate: I.Burst, align: I.BadgeCheck }; const ORDER = ['grow', 'protect', 'automate', 'align']; const svcSlug = (name) => String(name).toLowerCase().replace(/&/g, ' ').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''); const svcHref = (name) => 'service.html?slug=' + svcSlug(name); const ABOUT = [ { label: 'Why Wired CIO', blurb: 'The in-house IT leadership model, without the overhead.', href: '#' }, { label: 'Wired CIO Team', blurb: 'Meet the strategists and engineers behind your IT.', href: 'team.html' }, { label: 'Case Studies', blurb: 'Real outcomes from real Wired CIO engagements.', href: 'case-studies.html' }, { label: 'Industries', blurb: 'Healthcare, legal, manufacturing, biotech, and SMB.', href: '#' }, { label: 'Insights', blurb: 'Guides and articles from the Wired desk.', href: '#' }, ]; function OutcomeMenu({ k }) { const o = OUTCOMES[k] || {}; const Ico = OUTCOME_ICONS[k]; const services = o.services || []; return (
{o.label}
{o.tagline}

{o.long}

); } function AboutMenu() { return (
{ABOUT.map((a) => ( { e.currentTarget.style.background = 'var(--wc-green-50)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}> {a.label} {a.blurb} ))}
); } function SiteHeader({ onCta }) { const [y, setY] = React.useState(0); const [open, setOpen] = React.useState(false); const [menu, setMenu] = React.useState(null); const [, force] = React.useReducer((x) => x + 1, 0); React.useEffect(() => { const el = document.querySelector('[data-scroll]') || window; const onScroll = () => setY(el === window ? window.scrollY : el.scrollTop); onScroll(); el.addEventListener('scroll', onScroll); return () => el.removeEventListener('scroll', onScroll); }, []); React.useEffect(() => { const h = () => force(); window.addEventListener('tweakchange', h); return () => window.removeEventListener('tweakchange', h); }, []); // Header styling combines the transparent-overlay tweak with scroll position: // over the hero it is fully transparent with light nav; once the hero scrolls // past it becomes the translucent-white bar with dark nav. const rootEl = document.documentElement; const transparent = rootEl.getAttribute('data-headerstyle') === 'transparent'; const dark = rootEl.getAttribute('data-scheme') === 'dark'; const heroEl = document.querySelector('#top > section'); const switchAt = transparent ? Math.max(120, (heroEl ? heroEl.offsetHeight : 640) - 76) : 12; const scrolled = y > switchAt; const overlay = transparent && !scrolled; const lightLogo = dark || overlay; const headerFg = overlay ? '#EAF3F2' : 'var(--text-strong)'; return (
{open ? (
{ORDER.map((k) => { const o = OUTCOMES[k] || {}; return ( {o.label} {o.tagline} ); })} {ABOUT.map((a) => {a.label})}
) : null}
); } window.WCKit = Object.assign(window.WCKit || {}, { SiteHeader }); })();