---
// Mobile App Section Component
---

<section id="mobile-app" class="py-24 lg:py-40 bg-gradient-to-br from-background via-trackeep-purple/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-purple w-[600px] h-[600px] top-20 right-20 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-pink w-[400px] h-[400px] bottom-20 left-20 animate-float parallax-slow" style="animation-delay: 3s"></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-purple/10 to-trackeep-pink/10 border border-trackeep-purple/20 mb-8 animate-fade-in glass-effect backdrop-blur-xl">
				<span class="w-3 h-3 bg-gradient-to-r from-trackkeep-purple to-trackeep-pink rounded-full mr-3 animate-pulse"></span>
				<span class="text-sm font-semibold text-trackeep-purple">Mobile First</span>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
				<span class="block">Productivity</span>
				<span class="gradient-text">On The Go</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
				Native mobile apps for iOS and Android that sync seamlessly with your self-hosted instance
			</p>
		</div>

		<!-- Mobile Features Grid -->
		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
			<!-- Features List -->
			<div class="space-y-8">
				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackkeep-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-trackkeep-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-purple transition-colors">
								Native Performance
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Built with React Native for smooth, responsive performance on both iOS and Android devices.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackkeep-pink/20 rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
							<svg class="w-6 h-6 text-trackkeep-pink" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-pink transition-colors">
								Real-time Sync
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Your data stays in sync across all devices. Changes made on mobile instantly appear on web and vice versa.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackkeep-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-trackkeep-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
							</svg>
						</div>
						<div>
							<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-trackkeep-blue transition-colors">
								Document Scanning
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Capture documents, receipts, and notes with your camera. Automatic text extraction and organization.
							</p>
						</div>
					</div>
				</div>

				<div class="group">
					<div class="flex items-start space-x-4">
						<div class="w-12 h-12 bg-trackkeep-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-trackkeep-green" 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-trackkeep-green transition-colors">
								Secure Authentication
							</h3>
							<p class="text-muted-foreground leading-relaxed">
								Biometric authentication and secure token management keep your data safe even if your device is lost.
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- App Preview -->
			<div class="relative">
				<div class="glass-effect rounded-3xl p-8 border border-border/50">
					<div class="aspect-[9/19] bg-gradient-to-br from-trackkeep-purple/10 to-trackkeep-pink/10 rounded-3xl border-2 border-border/30 relative overflow-hidden">
						<!-- Phone Frame -->
						<div class="absolute inset-0 flex flex-col">
							<!-- Status Bar -->
							<div class="bg-background/80 backdrop-blur-sm px-6 py-2 flex justify-between items-center border-b border-border/30">
								<span class="text-xs font-medium">9:41</span>
								<div class="flex space-x-1">
									<div class="w-4 h-3 bg-foreground rounded-sm"></div>
									<div class="w-4 h-3 bg-foreground rounded-sm"></div>
									<div class="w-4 h-3 bg-foreground rounded-sm"></div>
								</div>
							</div>
							
							<!-- App Content -->
							<div class="flex-1 p-4 space-y-4">
								<div class="text-center">
									<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-blue to-trackkeep-purple rounded-2xl mx-auto mb-2 flex items-center justify-center">
										<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>
									<h3 class="font-bold text-foreground">Trackeep</h3>
									<p class="text-xs text-muted-foreground">Your digital hub</p>
								</div>
								
								<!-- Mock Content -->
								<div class="space-y-3">
									<div class="bg-card/80 rounded-xl p-3 border border-border/30">
										<div class="flex items-center space-x-3">
											<div class="w-8 h-8 bg-trackkeep-blue/20 rounded-lg"></div>
											<div class="flex-1">
												<div class="h-3 bg-foreground/20 rounded w-3/4 mb-1"></div>
												<div class="h-2 bg-foreground/10 rounded w-1/2"></div>
											</div>
										</div>
									</div>
									<div class="bg-card/80 rounded-xl p-3 border border-border/30">
										<div class="flex items-center space-x-3">
											<div class="w-8 h-8 bg-trackkeep-green/20 rounded-lg"></div>
											<div class="flex-1">
												<div class="h-3 bg-foreground/20 rounded w-2/3 mb-1"></div>
												<div class="h-2 bg-foreground/10 rounded w-1/3"></div>
											</div>
										</div>
									</div>
									<div class="bg-card/80 rounded-xl p-3 border border-border/30">
										<div class="flex items-center space-x-3">
											<div class="w-8 h-8 bg-trackkeep-purple/20 rounded-lg"></div>
											<div class="flex-1">
												<div class="h-3 bg-foreground/20 rounded w-4/5 mb-1"></div>
												<div class="h-2 bg-foreground/10 rounded w-2/3"></div>
											</div>
										</div>
									</div>
								</div>
								
								<!-- Bottom Navigation -->
								<div class="absolute bottom-0 left-0 right-0 bg-background/80 backdrop-blur-sm border-t border-border/30 px-4 py-2">
									<div class="flex justify-around">
										<div class="w-8 h-8 bg-trackkeep-blue rounded-lg"></div>
										<div class="w-8 h-8 bg-muted rounded-lg"></div>
										<div class="w-8 h-8 bg-muted rounded-lg"></div>
										<div class="w-8 h-8 bg-muted rounded-lg"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<!-- App Store Badges -->
					<div class="flex justify-center space-x-4 mt-6">
						<div class="bg-black/80 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center space-x-2">
							<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
								<path d="M17.05 20.28c-.98.95-2.05.88-3.08.38-1.09-.53-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.38C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
							</svg>
							<div class="text-white">
								<div class="text-xs opacity-80">Download on the</div>
								<div class="text-sm font-semibold">App Store</div>
							</div>
						</div>
						<div class="bg-black/80 backdrop-blur-sm rounded-xl px-4 py-2 flex items-center space-x-2">
							<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
								<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
							</svg>
							<div class="text-white">
								<div class="text-xs opacity-80">Get it on</div>
								<div class="text-sm font-semibold">Google Play</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Tech Stack -->
		<div class="glass-effect rounded-3xl p-8 border border-border/50">
			<h3 class="text-2xl font-bold text-foreground mb-6 text-center">Mobile Technology Stack</h3>
			<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
				<div class="text-center">
					<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-blue to-trackkeep-cyan rounded-2xl flex items-center justify-center mx-auto mb-3">
						<span class="text-white font-bold text-sm">RN</span>
					</div>
					<h4 class="font-semibold text-foreground mb-1">React Native</h4>
					<p class="text-xs text-muted-foreground">Cross-platform framework</p>
				</div>
				<div class="text-center">
					<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-purple to-trackkeep-pink rounded-2xl flex items-center justify-center mx-auto mb-3">
						<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="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
						</svg>
					</div>
					<h4 class="font-semibold text-foreground mb-1">React Navigation</h4>
					<p class="text-xs text-muted-foreground">Navigation & routing</p>
				</div>
				<div class="text-center">
					<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-green to-trackkeep-emerald rounded-2xl flex items-center justify-center mx-auto mb-3">
						<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="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"></path>
						</svg>
					</div>
					<h4 class="font-semibold text-foreground mb-1">React Paper</h4>
					<p class="text-xs text-muted-foreground">Material Design UI</p>
				</div>
				<div class="text-center">
					<div class="w-16 h-16 bg-gradient-to-br from-trackkeep-orange to-trackkeep-orange/80 rounded-2xl flex items-center justify-center mx-auto mb-3">
						<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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
						</svg>
					</div>
					<h4 class="font-semibold text-foreground mb-1">SQLite Storage</h4>
					<p class="text-xs text-muted-foreground">Local data persistence</p>
				</div>
			</div>
		</div>
	</div>
</section>
