"use client"; import { useEffect, useRef, useState } from "react"; import NextLink from "next/link"; import Image from "next/image"; // --- Navigation temporarily disabled ------------------------------------- // Every below is shadowed by this non-navigating stub so all header // menu items render exactly as before but go nowhere. The logo still uses the // real link via `NextLink`. To restore full navigation, delete this stub and // rename `NextLink` back to `Link`. const Link = ({ href, onClick, children, ...props }) => ( { e.preventDefault(); onClick?.(e); }} {...props} > {children} ); // ------------------------------------------------------------------------- import { usePathname } from "next/navigation"; import { AnimatePresence, motion } from "framer-motion"; import { mainNav, headerCta } from "@/config/navigation"; import { serviceCategories } from "@/data/services"; import { cn } from "@/lib/utils"; import { ArrowRight, ChevronDown, Close, Menu, Sparkles, categoryIcons, navIcons, } from "@/components/ui/icons"; import AnimatedButton from "@/components/ui/AnimatedButton"; import MobileNav from "@/components/layout/MobileNav"; /* ------------------------------------------------------------------ */ /* Logo */ /* ------------------------------------------------------------------ */ function Logo() { return ( Cerkel logo Cerkel ); } /* ------------------------------------------------------------------ */ /* Services mega menu — 4 category columns + featured promo card */ /* ------------------------------------------------------------------ */ function ServicesMega() { return (
{/* Intro rail */}

Our services

Everything you need to build & scale.

Strategy, engineering, AI and operations — one senior team, end to end.

View all services {/* Featured card */} Featured Cerkel AI
Talk to an expert
{/* Category columns — one category per column. Each category now has six services, so the menu stays short and fits the viewport without wrapping or scrolling. */}
{serviceCategories.map((cat, ci) => { const Icon = categoryIcons[cat.slug]; return (
{Icon ? : null} {cat.title}
{cat.services.map((svc, si) => ( {/* left accent grows on hover */} {svc.name} {svc.description && ( {svc.description} )} ))}
); })}
); } /* ------------------------------------------------------------------ */ /* Simple dropdown panel — 2 columns for long lists + view-all footer */ /* ------------------------------------------------------------------ */ const DROPDOWN_FOOTER = { Portfolio: { href: "/portfolio", label: "View all work" }, "About Us": { href: "/about", label: "More about Cerkel" }, Insights: { href: "/blog", label: "Visit the blog" }, }; /* Featured image panel shown alongside wide dropdowns. */ const DROPDOWN_PROMO = { Industries: { href: "/industries", image: "/images/opt/HeroBanner2.webp", title: "Industry expertise", text: "Software tailored to the users, rules and economics of your sector.", cta: "Explore industries", }, }; function Dropdown({ items, title }) { const wide = items.length > 4; const footer = DROPDOWN_FOOTER[title]; const promo = DROPDOWN_PROMO[title]; return (
{items.map((item, i) => { const Icon = navIcons[item.icon]; return ( {Icon ? : null} {item.title} {item.description && ( {item.description} )} ); })}
{/* Featured image panel */} {promo && (

{promo.title}

{promo.text}

{promo.cta}
)}
{footer && (
{footer.label}
)}
); } /* ------------------------------------------------------------------ */ /* Header */ /* ------------------------------------------------------------------ */ export default function Header() { const [scrolled, setScrolled] = useState(false); const [hidden, setHidden] = useState(false); const [openMenu, setOpenMenu] = useState(null); const [hovered, setHovered] = useState(null); const [mobileOpen, setMobileOpen] = useState(false); const closeTimer = useRef(null); const lastY = useRef(0); const pathname = usePathname(); // Solidify on scroll; hide on scroll-down, reveal on scroll-up. useEffect(() => { const onScroll = () => { const y = window.scrollY; setScrolled(y > 8); if (y > lastY.current + 6 && y > 140) setHidden(true); else if (y < lastY.current - 6 || y <= 140) setHidden(false); lastY.current = y; }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { setOpenMenu(null); setMobileOpen(false); }, [pathname]); const open = (title) => { if (closeTimer.current) clearTimeout(closeTimer.current); setOpenMenu(title); }; const scheduleClose = () => { closeTimer.current = setTimeout(() => setOpenMenu(null), 120); }; const isActive = (href) => href && (href === "/" ? pathname === "/" : pathname.startsWith(href)); const reveal = !hidden || openMenu || mobileOpen; return (
{/* Desktop nav — always visible, no hamburger */} {/* Right cluster */} {headerCta.title} {/* mobile-only menu toggle */}
setMobileOpen(false)} />
); }