import React, { useState, useEffect, useRef } from 'react'; import { Search, Menu, X, ArrowUpRight, MessageCircle, Scale, Building2, User } from 'lucide-react'; import { Logo, BRAND } from './Brand'; import { SearchDialog } from './SearchDialog'; import { useComparison } from '../context/ComparisonContext'; interface LayoutProps { currentPath: string; onNavigate: (path: string) => void; children: React.ReactNode; } export function Layout({ currentPath, onNavigate, children }: LayoutProps) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const { selectedSlugs, setDrawerOpen } = useComparison(); const mobileMenuRef = useRef(null); const mobileTriggerRef = useRef(null); // Grouped navigation to clearly distinguish individual learning from corporate training const primaryNavLinks = [ { label: 'Programmes', to: '/programmes', group: 'individual' }, { label: 'How Learning Works', to: '/learning', group: 'individual' }, { label: 'Career Support', to: '/career-support', group: 'individual' }, { label: 'For Organisations', to: '/organisations', group: 'corporate' }, { label: 'About', to: '/about', group: 'academy' }, ]; const handleNav = (to: string) => { onNavigate(to); setMobileMenuOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }; // Body scroll lock & Escape listener for mobile drawer useEffect(() => { if (!mobileMenuOpen) return; const originalOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { setMobileMenuOpen(false); mobileTriggerRef.current?.focus(); } }; window.addEventListener('keydown', handleKeyDown); return () => { document.body.style.overflow = originalOverflow; window.removeEventListener('keydown', handleKeyDown); }; }, [mobileMenuOpen]); return (

{/* Accessible Skip-to-Content Link */} Skip to main content {/* Header Landmark */}

{/* Logo */} { if (!e.ctrlKey && !e.metaKey && e.button === 0) { e.preventDefault(); handleNav('/'); } }} className="flex items-center gap-3 cursor-pointer group text-left min-h-[44px] select-none" aria-label="PANIA Digital Academy Home" > {/* Desktop Nav Links (Semantic Links) */} {/* Desktop Actions */}

{/* Quick Search Button (⌘K) */} {/* Compare Tracks Button */} {/* WhatsApp CTA Pill */}

{/* Mobile Menu Trigger & Search (Touch Targets >= 44px) */}

{/* Mobile Full Drawer */} {mobileMenuOpen && ( )}

{/* Main Page Slot with Semantic Landmark and Focus Target */}

{children}

{/* Footer Landmark */} {/* Search Dialog */}

); }