---
// Navigation component with glassmorphism effect
---

<nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-border/30 shadow-xl transition-all duration-300">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
		<div class="flex items-center justify-between h-20">
			<!-- Enhanced Logo -->
			<div class="flex items-center">
				<a href="/" class="flex items-center space-x-4 group">
					<div class="w-12 h-12 bg-gradient-to-br from-primary via-trackeep-blue to-trackeep-purple rounded-2xl flex items-center justify-center group-hover:rotate-12 group-hover:scale-110 transition-all duration-500 shadow-lg group-hover:shadow-glow border border-primary/20">
						<svg class="w-7 h-7 text-primary-foreground group-hover:animate-pulse" fill="currentColor" viewBox="0 0 20 20">
							<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
							<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000 2H6a2 2 0 100 4h2a2 2 0 100-4h2a1 1 0 100-2 2 2 0 00-2 2v11a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H6z" clip-rule="evenodd"/>
						</svg>
					</div>
					<span class="text-2xl font-black text-foreground group-hover:text-primary transition-colors gradient-text">Trackeep</span>
				</a>
			</div>

			<!-- Enhanced Desktop Navigation -->
			<div class="hidden lg:flex items-center space-x-10">
				<a href="#features" class="nav-item-papra relative group font-semibold">
					Features
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
				<a href="#ai-services" class="nav-item-papra relative group font-semibold">
					AI Features
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
				<a href="#privacy" class="nav-item-papra relative group font-semibold">
					Privacy
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
				<a href="#mobile-app" class="nav-item-papra relative group font-semibold">
					Mobile
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
				<a href="#testimonials" class="nav-item-papra relative group font-semibold">
					Testimonials
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
				<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="nav-item-papra relative group font-semibold">
					Demo
					<span class="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-primary to-trackeep-purple transition-all duration-300 group-hover:w-full rounded-full"></span>
				</a>
			</div>

			<!-- Enhanced Right side actions -->
			<div class="flex items-center space-x-4">
				<!-- Enhanced Social Links -->
				<div class="hidden sm:flex items-center space-x-3">
					<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="p-3 rounded-xl text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300 group hover:scale-110 hover:shadow-lg" aria-label="GitHub">
						<svg class="w-6 h-6 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
							<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
						</svg>
					</a>
					<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="p-3 rounded-xl text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300 group hover:scale-110 hover:shadow-lg" aria-label="Discord">
						<svg class="w-6 h-6 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
							<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
						</svg>
					</a>
				</div>

				<!-- Enhanced CTA Button (hidden on mobile) -->
				<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="hidden sm:flex btn-primary px-6 py-3 text-sm font-bold shadow-glow hover-lift rounded-xl bg-gradient-to-r from-primary to-trackeep-blue hover:from-trackeep-blue hover:to-primary transition-all duration-300 hover:scale-105">
					Try Demo
				</a>

				<!-- Enhanced Mobile menu button -->
				<button id="mobile-menu-button" class="lg:hidden p-3 rounded-xl bg-muted/50 hover:bg-muted/80 transition-all duration-300 hover:scale-110 hover:shadow-lg border border-border/30" aria-label="Toggle mobile menu">
					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
					</svg>
				</button>
			</div>
		</div>

		<!-- Mobile Navigation -->
		<div id="mobile-menu" class="hidden lg:hidden bg-background/95 backdrop-blur-xl border-t border-border/40">
			<div class="px-2 pt-2 pb-3 space-y-1">
				<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Features</a>
				<a href="#ai-services" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">AI Features</a>
				<a href="#privacy" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Privacy</a>
				<a href="#mobile-app" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Mobile</a>
				<a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Testimonials</a>
				<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors">Demo</a>
				<div class="pt-2 border-t border-border/40">
					<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="block mx-2 mb-2 btn-primary text-center shadow-glow">
						Try Demo
					</a>
					<div class="flex justify-center space-x-4 px-2 py-2">
						<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="p-2 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300" aria-label="GitHub">
							<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
								<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
							</svg>
						</a>
						<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="p-2 rounded-lg text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all duration-300" aria-label="Discord">
							<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
								<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
							</svg>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</nav>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const mobileMenuButton = document.getElementById('mobile-menu-button');
		const mobileMenu = document.getElementById('mobile-menu');
		
		if (mobileMenuButton && mobileMenu) {
			mobileMenuButton.addEventListener('click', () => {
				mobileMenu.classList.toggle('hidden');
			});
		}
		
		// Close mobile menu when clicking on links
		const mobileLinks = mobileMenu?.querySelectorAll('a');
		mobileLinks?.forEach(link => {
			link.addEventListener('click', () => {
				mobileMenu?.classList.add('hidden');
			});
		});
	});
</script>
