// SiteNav — sticky translucent header with services mega-menu. const { useState: useStateNav } = React; const NAV_SERVICE_SLUGS = { 'AB Group Platform': 'ab-group-platform', 'Customs Brokerage': 'customs-brokerage', 'Ocean Freight': 'ocean-freight', 'Air Freight': 'air-freight', 'Less than Container': 'less-than-container', "Buyer's Consolidation": 'buyers-consolidation', 'Trucking': 'trucking', 'Order Management': 'order-management', 'Warehousing': 'warehousing', 'Automotive Logistics': 'automotive-logistics', 'Break Bulk': 'break-bulk', 'Frozen Logistics': 'frozen-logistics', 'Purchasing Agent': 'purchasing-agent', 'International Moves': 'international-moves', 'Booking Management': 'booking-management', 'Mexico Shipping': 'mexico-shipping', 'Warehouse Relocation': 'warehouse-relocation', 'Tradeshow Logistics': 'tradeshow-logistics', 'D2C Fulfillment': 'd2c-fulfillment', 'Wholesale Fulfillment': 'wholesale-fulfillment', 'Parcel': 'parcel', 'Replenishment': 'replenishment', 'Prep': 'prep', 'Returns': 'returns', 'Trade Advisory': 'trade-advisory', 'Duty Drawback': 'duty-drawback', 'Cargo Insurance': 'cargo-insurance', 'Product Classification': 'product-classification', 'Duty Optimization': 'duty-optimization', }; const NAV_DIVISIONS = [ { id: 'logistics', label: 'Logistics & Transportation', accent: '#1846B0', items: ['AB Group Platform', 'Customs Brokerage', 'Ocean Freight', 'Air Freight', 'Less than Container', "Buyer's Consolidation", 'Trucking', 'Order Management', 'Warehousing', 'Automotive Logistics', 'Break Bulk', 'Frozen Logistics', 'Purchasing Agent', 'International Moves', 'Booking Management', 'Mexico Shipping', 'Warehouse Relocation', 'Tradeshow Logistics'] }, { id: 'fulfillment', label: 'Fulfillment', accent: '#4F46E5', items: ['D2C Fulfillment', 'Wholesale Fulfillment', 'Parcel', 'Replenishment', 'Prep', 'Returns'] }, { id: 'trade', label: 'Trade Management', accent: '#B45309', items: ['Trade Advisory', 'Duty Drawback', 'Cargo Insurance', 'Product Classification', 'Duty Optimization'] }, ]; const SERVICE_ICONS = { 'AB Group Platform': 'sliders', 'Customs Brokerage': 'clipboard', 'Ocean Freight': 'ship', 'Air Freight': 'plane', 'Less than Container': 'container', "Buyer's Consolidation": 'stack', 'Trucking': 'truck', 'Order Management': 'docs', 'Warehousing': 'warehouse', 'Automotive Logistics': 'truck', 'Break Bulk': 'packageOpen', 'Frozen Logistics': 'snowflake', 'Purchasing Agent': 'users', 'International Moves': 'homeMove', 'Booking Management': 'calculator', 'Mexico Shipping': 'pin', 'Warehouse Relocation': 'homeMove', 'Tradeshow Logistics': 'flag', 'D2C Fulfillment': 'zap', 'Wholesale Fulfillment': 'box', 'Parcel': 'shipments', 'Replenishment': 'refreshCw', 'Prep': 'packageOpen', 'Returns': 'returnIcon', 'Trade Advisory': 'compass', 'Duty Drawback': 'coins', 'Cargo Insurance': 'shieldCheck', 'Product Classification': 'tag', 'Duty Optimization': 'scale', }; // ——— Resources mega-menu data // Resolve relative paths whether the nav renders from project root // (Homepage.html) or from inside services/*.html. const NAV_IS_SUBPAGE = /\/services\//.test(window.location.pathname); const NAV_PREFIX = NAV_IS_SUBPAGE ? '../' : ''; const RESOURCES_FEATURED = { eyebrow: 'Featured', badge: 'C-TPAT · NVOCC · IAC · HAZMAT · CBW', title: 'Compliance & Licenses', desc: 'Every U.S. authority required to move freight across borders — validated, current, and audit-ready. Plus a 22-year company timeline.', href: `${NAV_PREFIX}services/compliance-certification.html`, cta: 'Open hub', }; const RESOURCES_SECTIONS = [ { id: 'trust', label: 'Trust & Compliance', accent: '#1846B0', items: [ { name: 'Compliance & Licenses', icon: 'shieldCheck', href: `${NAV_PREFIX}services/compliance-certification.html`, desc: 'Licenses, certifications, agency IDs' }, { name: 'Company history', icon: 'clock', href: `${NAV_PREFIX}services/company-history.html`, desc: 'Our timeline since 2004' }, ] }, { id: 'knowledge', label: 'Knowledge', accent: '#4F46E5', items: [ { name: 'Calculators', icon: 'calculator', href: `${NAV_PREFIX}services/calculators.html`, desc: 'Quote, CBM, duty, Incoterms' }, { name: 'Glossary', icon: 'book', href: `${NAV_PREFIX}services/glossary.html`, desc: 'Logistics & customs terms A–Z' }, ] }, { id: 'company', label: 'Company', accent: '#B45309', items: [ { name: 'About', icon: 'warehouse', href: `${NAV_PREFIX}services/about.html`, desc: 'Who we are' }, { name: 'Careers', icon: 'award', href: `${NAV_PREFIX}services/careers.html`, desc: 'Join the team' }, ] }, ]; // ——— Platform mega-menu data const PLATFORM_FEATURED = { eyebrow: 'The platform', title: 'AB Group Platform', desc: 'Control tower for shipments, quotes, customs, finance, and analytics — one workspace across every mode and market.', href: `${NAV_PREFIX}services/ab-group-platform.html`, cta: 'Tour the platform', }; const PLATFORM_SECTIONS = [ { id: 'modules', label: 'Modules', accent: '#1846B0', items: [ { name: 'Shipments', icon: 'shipments', href: `${NAV_PREFIX}services/ab-group-platform.html#modules`, desc: 'Live milestones across modes' }, { name: 'Quote', icon: 'quote', href: `${NAV_PREFIX}services/calculators.html`, desc: 'Instant rates, all carriers' }, { name: 'Customs', icon: 'shieldCheck',href: `${NAV_PREFIX}services/customs-brokerage.html`, desc: 'Filings, classification, duty' }, { name: 'Finance', icon: 'coins', href: `${NAV_PREFIX}services/ab-group-platform.html`, desc: 'Invoices, AP, landed cost' }, { name: 'Analytics', icon: 'analytics', href: `${NAV_PREFIX}services/ab-group-platform.html`, desc: 'Lane, spend, on-time KPIs' }, ] }, { id: 'platform', label: 'Platform', accent: '#4F46E5', items: [ { name: 'Integrations', icon: 'globe', href: `${NAV_PREFIX}services/ab-group-platform.html#integrations`, desc: 'Carriers, ERPs, marketplaces' }, { name: 'API & webhooks', icon: 'docs', href: `${NAV_PREFIX}services/ab-group-platform.html#api`, desc: 'REST + events for every object' }, ] }, ]; function SiteNav() { const [open, setOpen] = useStateNav(false); const [resOpen, setResOpen] = useStateNav(false); const [platOpen, setPlatOpen] = useStateNav(false); // Close other menus when one opens const openServices = () => { setOpen(true); setResOpen(false); setPlatOpen(false); }; const openResources = () => { setResOpen(true); setOpen(false); setPlatOpen(false); }; const openPlatform = () => { setPlatOpen(true); setOpen(false); setResOpen(false); }; const closeAll = () => { setOpen(false); setResOpen(false); setPlatOpen(false); }; return (
{[ { label: 'Facebook', href: 'https://www.facebook.com/abgroupshipping', path: 'M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.91h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z' }, { label: 'X', href: 'https://x.com/abgroupshipping', path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z' }, { label: 'Instagram', href: 'https://www.instagram.com/abgroupshipping', path: 'M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.13 1.39C1.34 2.69.93 3.36.62 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.39 2.13.67.67 1.34 1.08 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.31 1.46-.72 2.13-1.39.67-.67 1.08-1.34 1.39-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.31-.79-.72-1.46-1.39-2.13C21.31 1.34 20.64.93 19.86.62 19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.41-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z' }, { label: 'LinkedIn', href: 'https://www.linkedin.com/company/abgroupshipping', path: 'M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.23 0z' }, ].map((s) => ( { e.currentTarget.style.background = '#f2f4f7'; e.currentTarget.style.color = '#1846B0'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#667085'; }}> ))}
{ closeAll(); e.currentTarget.style.background = '#DBEAFE'; e.currentTarget.style.borderColor = 'rgba(30,87,214,0.32)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = '#EFF6FF'; e.currentTarget.style.borderColor = 'rgba(30,87,214,0.18)'; }} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 9999, background: '#EFF6FF', border: '1px solid rgba(30,87,214,0.18)', color: '#1846B0', fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em', textDecoration: 'none', whiteSpace: 'nowrap', transition: 'all 160ms cubic-bezier(0.16,1,0.3,1)' }}> For partners Sign in { e.currentTarget.style.background = '#f9fafb'; }} onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; }} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 8, background: '#fff', border: '1px solid #d0d5dd', color: '#101828', fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em', textDecoration: 'none', whiteSpace: 'nowrap', transition: 'all 180ms cubic-bezier(0.16,1,0.3,1)' }}> Talk to an expert
{open && (
{ setOpen(true); setResOpen(false); setPlatOpen(false); }}>
{/* Featured tile — Full service catalog */} e.currentTarget.style.transform = 'translateY(-1px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}> {/* Subtle grid texture */}
)} {resOpen && (
{ setResOpen(true); setOpen(false); setPlatOpen(false); }}> )} {platOpen && (
{(() => { const C = typeof window !== 'undefined' ? window.ContactModalRoot : null; return C ? : null; })()} ); } const navLinkStyle = { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13.5, fontWeight: 500, color: '#344054', textDecoration: 'none', letterSpacing: '-0.005em' }; window.SiteNav = SiteNav;