// Header.jsx: Orbital Aerial Solutions const OASHeader = () => { const [scrolled, setScrolled] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); // Theme state can be: 'dark' | 'light' | 'system' const [theme, setTheme] = React.useState('system'); const [resolvedTheme, setResolvedTheme] = React.useState('dark'); // Load initial theme preference React.useEffect(() => { const saved = localStorage.getItem('oas-theme'); if (saved === 'light' || saved === 'dark' || saved === 'system') { setTheme(saved); } else { setTheme('system'); } }, []); // Sync resolved theme with page and system preference React.useEffect(() => { const updateTheme = () => { let active = 'dark'; if (theme === 'system') { const matchesLight = window.matchMedia('(prefers-color-scheme: light)').matches; active = matchesLight ? 'light' : 'dark'; } else { active = theme; } setResolvedTheme(active); document.documentElement.setAttribute('data-theme', active); localStorage.setItem('oas-theme', theme); }; updateTheme(); if (theme === 'system') { const mediaQuery = window.matchMedia('(prefers-color-scheme: light)'); const listener = () => { const matchesLight = mediaQuery.matches; const active = matchesLight ? 'light' : 'dark'; setResolvedTheme(active); document.documentElement.setAttribute('data-theme', active); }; // Modern and fallback listeners if (mediaQuery.addEventListener) { mediaQuery.addEventListener('change', listener); } else { mediaQuery.addListener(listener); } return () => { if (mediaQuery.removeEventListener) { mediaQuery.removeEventListener('change', listener); } else { mediaQuery.removeListener(listener); } }; } }, [theme]); const [themeHovered, setThemeHovered] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = ['Services', 'Advantage', 'Credentials', 'Contact']; const scrollTo = (id) => { const el = document.getElementById(id.toLowerCase().replace(' ', '-')); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); setMobileOpen(false); }; const navStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: scrolled ? '0 40px' : '0 48px', // 5. Make the header height a bit larger (original 72/96 -> 84/108) height: scrolled ? 84 : 108, // 5. Make the header extra translucent (lower opacity alpha from 0.72 to 0.45) background: scrolled ? (resolvedTheme === 'dark' ? 'rgba(9, 12, 18, 0.45)' : 'rgba(250, 250, 250, 0.45)') : 'transparent', borderBottom: `1px solid ${scrolled ? (resolvedTheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)') : 'transparent'}`, backdropFilter: scrolled ? 'saturate(180%) blur(24px)' : 'none', WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(24px)' : 'none', transition: 'height 400ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms ease, border-color 400ms ease, padding 400ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 400ms ease', }; const Logo = () => (
window.scrollTo({ top: 0, behavior: 'smooth' })}> {/* 5. Make the logo height a bit larger (original 48/56 -> 58/68) */} Orbital Aerial Solutions
); return (
{/* Mobile Navigation Drawer */}
); }; Object.assign(window, { OASHeader });