---
// Demo section with live preview link
---

<section id="demo" class="py-20 lg:py-32 bg-background">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
		<!-- Section header -->
		<div class="text-center mb-16">
			<h2 class="text-3xl sm:text-4xl font-bold text-foreground mb-4">
				See Trackeep in Action
			</h2>
			<p class="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
				Experience the power and simplicity of Trackeep with our live demo. No registration required.
			</p>
		</div>
		
		<!-- Demo preview -->
		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
			<!-- Demo screenshot/mockup -->
			<div class="relative">
				<div class="relative bg-card rounded-2xl shadow-2xl overflow-hidden border border-border">
					<!-- Browser chrome -->
					<div class="bg-muted px-4 py-3 border-b border-border flex items-center space-x-2">
						<div class="w-3 h-3 bg-red-500 rounded-full"></div>
						<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
						<div class="w-3 h-3 bg-green-500 rounded-full"></div>
						<div class="flex-1 bg-background rounded px-3 py-1 text-xs text-muted-foreground ml-4">
							demo.trackeep.org
						</div>
					</div>
					
					<!-- Demo content -->
					<div class="p-6 bg-background min-h-[400px]">
						<div class="space-y-4">
							<!-- Navigation mock -->
							<div class="flex items-center justify-between pb-4 border-b border-border">
								<div class="flex items-center space-x-2">
									<div class="w-8 h-8 bg-primary rounded-lg"></div>
									<span class="font-semibold">Trackeep</span>
								</div>
								<div class="flex space-x-4">
									<div class="w-16 h-6 bg-muted rounded"></div>
									<div class="w-16 h-6 bg-muted rounded"></div>
									<div class="w-16 h-6 bg-muted rounded"></div>
								</div>
							</div>
							
							<!-- Dashboard mock -->
							<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
								<div class="bg-card p-4 rounded-lg border border-border">
									<div class="w-24 h-4 bg-muted rounded mb-3"></div>
									<div class="space-y-2">
										<div class="w-full h-3 bg-muted rounded"></div>
										<div class="w-3/4 h-3 bg-muted rounded"></div>
										<div class="w-5/6 h-3 bg-muted rounded"></div>
									</div>
								</div>
								<div class="bg-card p-4 rounded-lg border border-border">
									<div class="w-20 h-4 bg-muted rounded mb-3"></div>
									<div class="space-y-2">
										<div class="w-full h-3 bg-muted rounded"></div>
										<div class="w-2/3 h-3 bg-muted rounded"></div>
										<div class="w-4/5 h-3 bg-muted rounded"></div>
									</div>
								</div>
								<div class="bg-card p-4 rounded-lg border border-border">
									<div class="w-16 h-4 bg-muted rounded mb-3"></div>
									<div class="space-y-2">
										<div class="w-full h-3 bg-muted rounded"></div>
										<div class="w-5/6 h-3 bg-muted rounded"></div>
										<div class="w-3/4 h-3 bg-muted rounded"></div>
									</div>
								</div>
								<div class="bg-card p-4 rounded-lg border border-border">
									<div class="w-28 h-4 bg-muted rounded mb-3"></div>
									<div class="space-y-2">
										<div class="w-full h-3 bg-muted rounded"></div>
										<div class="w-2/3 h-3 bg-muted rounded"></div>
										<div class="w-4/5 h-3 bg-muted rounded"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Floating badges -->
				<div class="absolute -top-4 -right-4 bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium shadow-lg">
					Live Demo
				</div>
				<div class="absolute -bottom-4 -left-4 bg-trackeep-green text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
					No Registration
				</div>
			</div>
			
			<!-- Demo features -->
			<div class="space-y-8">
				<div>
					<h3 class="text-2xl font-semibold text-foreground mb-4">
						Try These Features in the Demo
					</h3>
					<div class="space-y-4">
						<div class="flex items-start space-x-4">
							<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
								<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
								</svg>
							</div>
							<div>
								<h4 class="font-semibold text-foreground mb-1">Smart Organization</h4>
								<p class="text-muted-foreground">Experience AI-powered categorization and intelligent tagging</p>
							</div>
						</div>
						
						<div class="flex items-start space-x-4">
							<div class="w-8 h-8 bg-trackeep-green/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
								<svg class="w-4 h-4 text-trackeep-green" fill="currentColor" viewBox="0 0 20 20">
									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
								</svg>
							</div>
							<div>
								<h4 class="font-semibold text-foreground mb-1">Lightning Search</h4>
								<p class="text-muted-foreground">Find anything instantly with our powerful search capabilities</p>
							</div>
						</div>
						
						<div class="flex items-start space-x-4">
							<div class="w-8 h-8 bg-trackeep-orange/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
								<svg class="w-4 h-4 text-trackeep-orange" fill="currentColor" viewBox="0 0 20 20">
									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
								</svg>
							</div>
							<div>
								<h4 class="font-semibold text-foreground mb-1">Mobile Responsive</h4>
								<p class="text-muted-foreground">Test the responsive design on different screen sizes</p>
							</div>
						</div>
						
						<div class="flex items-start space-x-4">
							<div class="w-8 h-8 bg-trackeep-purple/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
								<svg class="w-4 h-4 text-trackeep-purple" fill="currentColor" viewBox="0 0 20 20">
									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
								</svg>
							</div>
							<div>
								<h4 class="font-semibold text-foreground mb-1">Dark Mode</h4>
								<p class="text-muted-foreground">Toggle between light and dark themes seamlessly</p>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Demo credentials -->
				<div class="bg-muted/50 rounded-xl p-6">
					<h4 class="font-semibold text-foreground mb-3">Demo Access</h4>
					<div class="space-y-2 text-sm">
						<div class="flex items-center space-x-2">
							<span class="text-muted-foreground">Email:</span>
							<code class="bg-background px-2 py-1 rounded text-foreground">demo@trackeep.org</code>
						</div>
						<div class="flex items-center space-x-2">
							<span class="text-muted-foreground">Password:</span>
							<code class="bg-background px-2 py-1 rounded text-foreground">demo123</code>
						</div>
					</div>
					<p class="text-xs text-muted-foreground mt-3">
						Data resets every 24 hours. No real data is stored in the demo.
					</p>
				</div>
			</div>
		</div>
		
		<!-- CTA -->
		<div class="mt-16 text-center">
			<a 
				href="https://demo.trackeep.org" 
				target="_blank" 
				rel="noopener"
				class="btn-primary px-8 py-4 text-lg hover-lift group"
			>
				Launch Live Demo
				<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
				</svg>
			</a>
			<p class="text-muted-foreground mt-4">
				Opens in new tab • No registration required • Full feature access
			</p>
		</div>
	</div>
</section>
