---
// AI Services Section Component
---

<section id="ai-services" class="py-24 lg:py-40 bg-gradient-to-br from-background via-card/30 to-background relative overflow-hidden">
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-3"></div>
	
	<!-- Minimal particle field -->
	<div class="particle-field">
		<div class="particle" style="left: 10%; animation-delay: 1s; animation-duration: 22s;"></div>
		<div class="particle" style="left: 30%; animation-delay: 3s; animation-duration: 19s;"></div>
		<div class="particle" style="left: 50%; animation-delay: 2s; animation-duration: 24s;"></div>
		<div class="particle" style="left: 70%; animation-delay: 4s; animation-duration: 21s;"></div>
		<div class="particle" style="left: 90%; animation-delay: 1s; animation-duration: 20s;"></div>
	</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-primary/10 border border-primary/20 mb-8 animate-fade-in glass-effect">
				<span class="w-3 h-3 bg-primary rounded-full mr-3 animate-pulse"></span>
				<span class="text-sm font-semibold text-primary">AI-Powered Intelligence</span>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
				<span class="block">Smart Features</span>
				<span class="gradient-text">Your Choice</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
				Enhanced productivity with optional AI services that respect your privacy and budget
			</p>
		</div>

		<!-- AI Services Grid -->
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
			<!-- Budget Friendly -->
			<div class="feature-card group">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-orange to-trackeep-orange/80 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
						<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-10 h-10" />
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-orange transition-colors">
						Budget-Friendly AI
					</h3>
					<p class="text-muted-foreground leading-relaxed mb-6">
						Get powerful AI features without breaking the bank. DeepSeek and LongCat offer incredible value for content analysis and recommendations.
					</p>
					<div class="flex flex-wrap gap-2">
						<span class="px-3 py-1 bg-trackeep-orange/10 text-trackeep-orange rounded-full text-sm font-medium flex items-center">
							<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-4 h-4 mr-1" />
							DeepSeek
						</span>
						<span class="px-3 py-1 bg-trackeep-orange/10 text-trackeep-orange rounded-full text-sm font-medium flex items-center">
							<img src="/images/longcat-color.svg" alt="LongCat" class="w-4 h-4 mr-1" />
							LongCat AI
						</span>
					</div>
				</div>
			</div>

			<!-- Privacy First -->
			<div class="feature-card group">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-green to-trackeep-emerald rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
						<img src="/images/mistral-color.svg" alt="Mistral" class="w-10 h-10" />
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-green transition-colors">
						Privacy-First Options
					</h3>
					<p class="text-muted-foreground leading-relaxed mb-6">
						European GDPR-compliant AI with Mistral, or complete offline privacy with self-hosted Ollama models.
					</p>
					<div class="flex flex-wrap gap-2">
						<span class="px-3 py-1 bg-trackeep-green/10 text-trackeep-green rounded-full text-sm font-medium flex items-center">
							<img src="/images/mistral-color.svg" alt="Mistral" class="w-4 h-4 mr-1" />
							Mistral AI
						</span>
						<span class="px-3 py-1 bg-trackeep-green/10 text-trackeep-green rounded-full text-sm font-medium flex items-center">
							<img src="/images/ollama.svg" alt="Ollama" class="w-4 h-4 mr-1" />
							Ollama
						</span>
					</div>
				</div>
			</div>

			<!-- Complete Control -->
			<div class="feature-card group">
				<div class="relative z-10">
					<div class="w-16 h-16 bg-gradient-to-br from-trackeep-purple to-trackeep-pink rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
						<img src="/images/grok.svg" alt="Grok" class="w-10 h-10" />
					</div>
					<h3 class="text-2xl font-bold text-foreground mb-4 group-hover:text-trackeep-purple transition-colors">
						Complete Control
					</h3>
					<p class="text-muted-foreground leading-relaxed mb-6">
						Enable only what you need. Mix and match services, use custom endpoints, or disable AI entirely.
					</p>
					<div class="flex flex-wrap gap-2">
						<span class="px-3 py-1 bg-trackeep-purple/10 text-trackeep-purple rounded-full text-sm font-medium flex items-center">
							<img src="/images/grok.svg" alt="Grok" class="w-4 h-4 mr-1" />
							Grok
						</span>
						<span class="px-3 py-1 bg-trackeep-purple/10 text-trackeep-purple rounded-full text-sm font-medium flex items-center">
							<img src="/images/openrouter.svg" alt="OpenRouter" class="w-4 h-4 mr-1" />
							OpenRouter
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- Configuration Examples -->
		<div class="glass-effect rounded-3xl p-8 border border-border/50">
			<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Popular AI Configurations</h3>
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
				<div class="text-center">
					<div class="w-12 h-12 bg-trackeep-orange/20 rounded-xl flex items-center justify-center mx-auto mb-3">
						<img src="/images/deepseek-color.svg" alt="DeepSeek" class="w-8 h-8" />
					</div>
					<h4 class="font-semibold text-foreground mb-2">Budget Setup</h4>
					<p class="text-sm text-muted-foreground">DeepSeek + LongCat for maximum value</p>
				</div>
				<div class="text-center">
					<div class="w-12 h-12 bg-trackeep-green/20 rounded-xl flex items-center justify-center mx-auto mb-3">
						<img src="/images/mistral-color.svg" alt="Mistral" class="w-8 h-8" />
					</div>
					<h4 class="font-semibold text-foreground mb-2">Privacy Setup</h4>
					<p class="text-sm text-muted-foreground">Mistral + Ollama for GDPR compliance</p>
				</div>
				<div class="text-center">
					<div class="w-12 h-12 bg-trackeep-blue/20 rounded-xl flex items-center justify-center mx-auto mb-3">
						<img src="/images/grok.svg" alt="Grok" class="w-8 h-8" />
					</div>
					<h4 class="font-semibold text-foreground mb-2">Performance Setup</h4>
					<p class="text-sm text-muted-foreground">Mix services for optimal results</p>
				</div>
				<div class="text-center">
					<div class="w-12 h-12 bg-trackeep-purple/20 rounded-xl flex items-center justify-center mx-auto mb-3">
						<img src="/images/ollama.svg" alt="Ollama" class="w-8 h-8" />
					</div>
					<h4 class="font-semibold text-foreground mb-2">No AI Setup</h4>
					<p class="text-sm text-muted-foreground">Complete privacy, zero AI features</p>
				</div>
			</div>
		</div>

		<!-- Transparency Note -->
		<div class="mt-16 text-center">
			<div class="inline-flex items-center px-6 py-4 rounded-2xl bg-muted/50 border border-border/50 backdrop-blur-sm">
				<svg class="w-5 h-5 text-trackeep-blue mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
				</svg>
				<p class="text-sm text-muted-foreground">
					<span class="font-semibold text-foreground">Transparent by Design:</span> 
					All AI features are optional. You decide what data gets processed and where.
				</p>
			</div>
		</div>
	</div>
</section>
