---
// Benefits section highlighting key advantages
---

<section class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/20 to-background relative overflow-hidden">
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-10"></div>
	<div class="gradient-blob bg-primary w-[400px] h-[400px] top-20 right-10 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-20 left-10 animate-float parallax-slow" style="animation-delay: 2s"></div>
	
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
		<!-- Enhanced Section header -->
		<div class="text-center mb-20">
			<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-primary/10 to-trackeep-purple/10 border border-primary/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
				<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse"></span>
				<span class="text-sm font-semibold text-primary">Why Trackeep?</span>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
				<span class="block">The Perfect Blend of</span>
				<span class="gradient-text">Privacy & Power</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
				Discover why thousands of users have made the switch to Trackeep for their digital organization needs
			</p>
		</div>
		
		<!-- Benefits grid -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
			<!-- Privacy -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-red-500/20 to-red-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-red-500/30">
					<svg class="w-10 h-10 text-red-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-red-500 transition-colors">Privacy First</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					Your data stays yours with end-to-end encryption. No data mining, no tracking, no selling your information. Complete ownership and control.
				</p>
			</div>
			
			<!-- Open Source -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-green-500/20 to-green-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-green border border-green-500/30">
					<svg class="w-10 h-10 text-green-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-green-500 transition-colors">Transparent & Open</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					Fully open source with GPL v3 license. Audit the code, contribute improvements, or customize it to fit your exact needs.
				</p>
			</div>
			
			<!-- All-in-One -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-primary/20 to-primary/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-primary/30">
					<svg class="w-10 h-10 text-primary group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">All-in-One Platform</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					Bookmarks, tasks, files, notes, and learning tracking in one place. Replace multiple apps and simplify your digital workflow.
				</p>
			</div>
			
			<!-- AI Optional -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-trackeep-purple/20 to-trackeep-purple/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow-purple border border-trackeep-purple/30">
					<svg class="w-10 h-10 text-trackeep-purple group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">AI On Your Terms</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					Powerful AI features with multiple providers. Use cloud AI, local AI with Ollama, or disable completely. You're always in control.
				</p>
			</div>
			
			<!-- Self-Hosted -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-trackeep-orange/20 to-trackeep-orange/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-trackeep-orange/30">
					<svg class="w-10 h-10 text-trackeep-orange group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">No Subscriptions</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					One-time setup, lifetime usage. No monthly fees, no feature gates, no vendor lock-in. Your infrastructure, your rules.
				</p>
			</div>
			
			<!-- Developer Friendly -->
			<div class="feature-card group cursor-pointer text-center hover-3d">
				<div class="w-20 h-20 bg-gradient-to-br from-blue-500/20 to-blue-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 group-hover:shadow-glow border border-blue-500/30">
					<svg class="w-10 h-10 text-blue-500 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
					</svg>
				</div>
				<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-blue-500 transition-colors">Developer First</h3>
				<p class="text-muted-foreground leading-relaxed text-lg">
					Rich REST API, webhooks, and extensibility. Full-text search, OAuth integration, and custom workflows support.
				</p>
			</div>
		</div>
		
		<!-- Call to action -->
		<div class="mt-16 text-center bg-muted/50 rounded-2xl p-8">
			<h3 class="text-2xl font-semibold text-foreground mb-4">
				Ready to take control of your digital life?
			</h3>
			<p class="text-muted-foreground mb-6 max-w-2xl mx-auto">
				Join thousands of users who have already made the switch to a more private, productive way of organizing their digital world.
			</p>
			<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
				<a href="#quick-install" class="btn-primary shadow-glow">
					Get Started Now
					<svg class="w-4 h-4 ml-2" 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>
				<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-outline">
					See It In Action
					<svg class="w-4 h-4 ml-2" 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>
			</div>
		</div>
	</div>
</section>
