---
// Privacy & Self-Hosting Section Component
---

<section id="privacy" class="py-24 lg:py-40 bg-gradient-to-br from-background via-trackeep-green/5 to-background relative overflow-hidden">
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-5"></div>
	<div class="gradient-blob bg-trackeep-green w-[500px] h-[500px] top-10 left-10 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-emerald w-[400px] h-[400px] bottom-10 right-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">
		<div class="text-center mb-20">
			<div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-trackeep-green/10 to-trackeep-emerald/10 border border-trackeep-green/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
				<span class="w-3 h-3 bg-gradient-to-r from-trackeep-green to-trackeep-emerald rounded-full mr-3 animate-pulse"></span>
				<span class="text-sm font-semibold text-trackeep-green">Privacy First</span>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
				<span class="block">Your Data</span>
				<span class="gradient-text">Your Rules</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
				Complete ownership and control over your digital life, with transparent open-source code you can trust
			</p>
		</div>

		<!-- Privacy Features Grid -->
		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
			<!-- Self-Hosting Benefits -->
			<div class="space-y-8">
				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-green/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-green transition-colors">
								Fully Self-Hosted
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								No third-party servers required. Everything runs on your own infrastructure, giving you complete control over your data and systems.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-emerald/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-emerald" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-emerald transition-colors">
								Data Ownership
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Your data remains yours – encrypted, controlled, and never leaves your systems. No data mining, no tracking, no selling your information.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-blue/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-blue" 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"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-blue transition-colors">
								Open Source
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Transparent codebase you can audit, modify, and trust. No hidden code, no secret data collection – everything is out in the open.
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Technical Benefits -->
			<div class="space-y-8">
				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-purple/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-purple transition-colors">
								API Access
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Build custom applications on top of Trackeep with full API access. Integrate with your existing tools and workflows.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-orange/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-orange" 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"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-orange transition-colors">
								AI Control
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Full control over which AI services (if any) you want to use. Disable all AI, use only local models, or mix and match cloud services.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackeep-cyan/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackeep-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackeep-cyan transition-colors">
								High Performance
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Optimized for self-hosting with efficient resource usage. Runs smoothly on modest hardware while maintaining excellent performance.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Deployment Options -->
		<div class="glass-effect rounded-3xl p-8 border border-border/50">
			<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Flexible Deployment Options</h3>
			<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
				<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-blue to-trackeep-cyan rounded-2xl flex items-center justify-center mx-auto mb-4">
						<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"></path>
						</svg>
					</div>
					<h4 class="font-bold text-foreground mb-2">Quick Start</h4>
					<p class="text-sm text-muted-foreground mb-4">Docker Compose setup in minutes with pre-configured services</p>
					<code class="text-xs bg-muted px-2 py-1 rounded">docker compose up -d</code>
				</div>
				<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green to-trackeep-emerald rounded-2xl flex items-center justify-center mx-auto mb-4">
						<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
						</svg>
					</div>
					<h4 class="font-bold text-foreground mb-2">Production Ready</h4>
					<p class="text-sm text-muted-foreground mb-4">Scalable deployment with load balancing and monitoring</p>
					<code class="text-xs bg-muted px-2 py-1 rounded">docker-compose.prod.yml</code>
				</div>
				<div class="text-center p-6 rounded-2xl bg-card/50 border border-border/30">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple to-trackeep-pink rounded-2xl flex items-center justify-center mx-auto mb-4">
						<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
						</svg>
					</div>
					<h4 class="font-bold text-foreground mb-2">Custom Setup</h4>
					<p class="text-sm text-muted-foreground mb-4">Manual configuration for specific requirements and environments</p>
					<code class="text-xs bg-muted px-2 py-1 rounded">Custom deployment</code>
				</div>
			</div>
		</div>

		<!-- Trust Badges -->
		<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8">
			<div class="text-center">
				<div class="w-16 h-16 bg-trackeep-green/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
					<svg class="w-8 h-8 text-trackeep-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
					</svg>
				</div>
				<h4 class="font-semibold text-foreground mb-1">GDPR Compliant</h4>
				<p class="text-xs text-muted-foreground">Privacy by design</p>
			</div>
			<div class="text-center">
				<div class="w-16 h-16 bg-trackeep-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
					<svg class="w-8 h-8 text-trackeep-blue" 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-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
					</svg>
				</div>
				<h4 class="font-semibold text-foreground mb-1">End-to-End Encrypted</h4>
				<p class="text-xs text-muted-foreground">Secure by default</p>
			</div>
			<div class="text-center">
				<div class="w-16 h-16 bg-trackeep-purple/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
					<svg class="w-8 h-8 text-trackeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
					</svg>
				</div>
				<h4 class="font-semibold text-foreground mb-1">Open Source</h4>
				<p class="text-xs text-muted-foreground">Fully transparent</p>
			</div>
			<div class="text-center">
				<div class="w-16 h-16 bg-trackeep-orange/10 rounded-2xl flex items-center justify-center mx-auto mb-3">
					<svg class="w-8 h-8 text-trackeep-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
					</svg>
				</div>
				<h4 class="font-semibold text-foreground mb-1">Community Driven</h4>
				<p class="text-xs text-muted-foreground">Built together</p>
			</div>
		</div>
	</div>
</section>
