import { useState, useEffect, useCallback, Suspense } from 'react'; import { useAuth0 } from '@auth0/auth0-react'; import { useNavigate } from 'react-router-dom'; import { GuideTableOfContents } from './GuideTableOfContents'; import { guideSections } from './guideTypes'; import { GettingStartedSection, DashboardSection, VehiclesSection, FuelLogsSection, MaintenanceSection, GasStationsSection, DocumentsSection, SettingsSection, SubscriptionSection, MobileExperienceSection, } from './sections'; export const GuidePage = () => { const { loginWithRedirect, isAuthenticated } = useAuth0(); const navigate = useNavigate(); const [activeSection, setActiveSection] = useState(guideSections[0].id); const [isScrolled, setIsScrolled] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const handleAuthAction = useCallback(() => { if (isAuthenticated) { navigate('/garage'); return; } loginWithRedirect({ appState: { returnTo: '/garage' } }); }, [isAuthenticated, navigate, loginWithRedirect]); const handleSignup = useCallback(() => { navigate('/signup'); }, [navigate]); // Track scroll position for nav background and active section useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); // Determine active section from scroll position const sectionElements = guideSections.map((s) => ({ id: s.id, element: document.getElementById(s.id), })); for (let i = sectionElements.length - 1; i >= 0; i--) { const { id, element } = sectionElements[i]; if (element) { const rect = element.getBoundingClientRect(); if (rect.top <= 120) { setActiveSection(id); break; } } } }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); const sectionFallback = (
Loading section...
); return (
{/* Navigation Bar - matches HomePage style */} {/* Page Content */}
{/* Page Header */}

User Guide

Precision Vehicle Management -- Track every mile. Own every detail.

{/* Layout: TOC sidebar + content */}
{/* Footer */}
); };