import React, { useState, useEffect, Suspense, useCallback } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { Menu, X, Phone, MapPin, Instagram } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; interface LayoutProps { children: React.ReactNode; } const PageLoader: React.FC = () => (

Loading...

); const Layout: React.FC = ({ children }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const location = useLocation(); const navigation = [ { name: 'Home', href: '/' }, { name: 'About', href: '/about' }, { name: 'Facilities', href: '/facilities' }, { name: 'Gallery', href: '/gallery' }, { name: 'News', href: '/news' }, { name: 'Testimonials', href: '/testimonials' }, { name: 'Membership', href: '/membership' }, { name: 'Champions', href: '/champions' }, { name: 'Contact', href: '/contact' }, ]; const handleScroll = useCallback(() => { const scrollY = window.scrollY; setIsScrolled(scrollY > 50); }, []); useEffect(() => { window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, [handleScroll]); // Close menu when navigating to a new page useEffect(() => { setIsMenuOpen(false); }, [location.pathname]); // Lock body scroll while the menu is open useEffect(() => { document.body.style.overflow = isMenuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [isMenuOpen]); const toggleMenu = useCallback(() => { setIsMenuOpen(prev => !prev); }, []); const closeMenu = useCallback(() => { setIsMenuOpen(false); }, []); return (
{/* Navigation */} {/* Main Content */}
}> {children}
{/* Footer */}
); }; export default Layout;