---
// Enhanced QuickInstall component with terminal styling and animations
---

<section id="quick-install" class="py-20 lg:py-32 bg-gradient-to-b from-background via-card/30 to-background relative overflow-hidden">
	<!-- Background decoration -->
	<div class="absolute inset-0 bg-grid-pattern bg-grid-48 opacity-20"></div>
	<div class="gradient-blob bg-primary w-[400px] h-[400px] top-10 right-10 animate-float parallax-slow"></div>
	<div class="gradient-blob bg-trackeep-purple w-[350px] h-[350px] bottom-10 left-10 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">
		<!-- Section header -->
		<div class="text-center mb-16">
			<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 hover-lift group cursor-pointer glow-border">
				<span class="w-3 h-3 bg-gradient-to-r from-primary to-trackeep-purple rounded-full mr-3 animate-pulse shadow-glow"></span>
				<span class="text-sm font-semibold text-primary text-shimmer">Quick Install</span>
				<svg class="w-4 h-4 ml-2 text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 group-hover:translate-x-1" 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>
			</div>
			<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight animate-fade-in">
				<span class="block">Get Started in</span>
				<span class="gradient-text animate-glow text-shadow-glow text-shimmer">Seconds</span>
			</h2>
			<p class="text-2xl lg:text-3xl text-muted-foreground max-w-5xl mx-auto leading-relaxed animate-slide-up font-medium" style="animation-delay: 0.1s">
				One command is all it takes to deploy Trackkeep on your own infrastructure.
			</p>
		</div>
		
		<!-- Enhanced terminal box -->
		<div class="max-w-4xl mx-auto animate-scale-in" style="animation-delay: 0.2s">
			<div class="feature-card group cursor-pointer scroll-reveal hover-3d glow-border">
				<!-- Enhanced terminal header -->
				<div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-gray-900/90 to-gray-800/90 backdrop-blur-xl border-b border-gray-700/50 rounded-t-2xl">
					<div class="flex items-center space-x-3">
						<div class="flex space-x-2">
							<div class="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors cursor-pointer shadow-glow-red"></div>
							<div class="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors cursor-pointer shadow-glow-yellow"></div>
							<div class="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors cursor-pointer shadow-glow-green"></div>
						</div>
						<div class="flex items-center space-x-2 text-gray-400">
							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M2 8a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8z"/>
							</svg>
							<span class="text-sm font-mono">terminal</span>
						</div>
					</div>
					<div class="flex items-center space-x-2">
						<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-glow-green"></div>
						<span class="text-xs text-green-400 font-mono">connected</span>
					</div>
				</div>
				
				<!-- Terminal content -->
				<div class="p-6 bg-gradient-to-br from-gray-900/80 to-gray-800/80 backdrop-blur-sm">
					<div class="font-mono text-sm space-y-4">
						<!-- Command line with enhanced styling -->
						<div class="flex items-center space-x-3 group">
							<span class="text-gray-400">$</span>
							<code class="flex-1 text-green-400 animate-text-glow" id="install-command">
								curl -sSL https://trackeep.org/install.sh | sh
							</code>
							
							<!-- Enhanced copy button with magnetic effect -->
							<button 
								id="copy-button" 
								class="ml-6 px-4 py-3 bg-gradient-to-r from-gray-700/50 to-gray-600/50 hover:from-gray-600/50 hover:to-gray-500/50 text-gray-200 text-sm rounded-xl transition-all duration-300 flex items-center space-x-2 border border-gray-600/50 hover:border-gray-500/50 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow"
								aria-label="Copy command"
							>
								<svg id="copy-icon" class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
								</svg>
								<span id="copy-text" class="font-medium">Copy</span>
								<svg id="check-icon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
								</svg>
							</button>
						</div>
						
						<!-- Animated terminal output preview -->
						<div class="mt-4 space-y-2 animate-slide-up" style="animation-delay: 0.5s">
							<div class="text-gray-500 animate-typing">
								<span class="text-blue-400">[INFO]</span> Downloading Trackkeep installer...
							</div>
							<div class="text-gray-500 animate-typing" style="animation-delay: 1s">
								<span class="text-green-400">[SUCCESS]</span> Installation completed successfully!
							</div>
							<div class="text-gray-500 animate-typing" style="animation-delay: 2s">
								<span class="text-yellow-400">[INFO]</span> Starting Trackkeep dashboard...
							</div>
							<div class="text-gray-500 animate-typing" style="animation-delay: 3s">
								<span class="text-green-400">[READY]</span> Trackkeep is running at http://localhost:3000
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Enhanced social proof buttons -->
		<div class="mt-12 text-center animate-slide-up" style="animation-delay: 0.8s">
			<div class="inline-flex items-center justify-center p-8 rounded-2xl bg-card/50 backdrop-blur-sm border border-border/50">
				<div class="text-center mb-6">
					<h3 class="text-2xl font-semibold text-foreground mb-4">
						Join the Community
					</h3>
					<p class="text-muted-foreground mb-6 max-w-md">
						Get help, share ideas, and connect with other Trackkeep users.
					</p>
				</div>
				<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
					<a href="https://github.com/Dvorinka/Trackeep" target="_blank" rel="noopener" class="btn-outline px-6 py-3 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow-blue">
						<svg class="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
							<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
						</svg>
						GitHub
					</a>
					<a href="https://discord.gg/trackeep" target="_blank" rel="noopener" class="btn-outline px-6 py-3 backdrop-blur-sm hover-lift group magnetic-button glow-border hover:shadow-glow-purple">
						<svg class="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform" fill="currentColor" viewBox="0 0 24 24">
							<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.268 18.268 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078.0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.13 10.2 10.2 0 0 0 1.872-.892.077.077 0 0 1 .041-.106c.36.698.772 1.363 1.225 1.993a.076.076 0 0 0 .083.028 19.9 19.9 0 0 0 6.003-3.03.077.077 0 0 0 .032-.054c.465-4.94-.838-9.462-3.548-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
						</svg>
						Discord
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
	const copyButton = document.getElementById('copy-button');
	const copyIcon = document.getElementById('copy-icon');
	const checkIcon = document.getElementById('check-icon');
	const copyText = document.getElementById('copy-text');
	const command = 'curl -sSL https://trackeep.org/install.sh | sh';

	copyButton?.addEventListener('click', async () => {
		try {
			await navigator.clipboard.writeText(command);
			
			// Show success state
			copyIcon?.classList.add('hidden');
			checkIcon?.classList.remove('hidden');
			if (copyText) copyText.textContent = 'Copied!';
			copyButton.classList.add('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50');
			copyButton.classList.remove('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
			
			// Reset after 2 seconds
			setTimeout(() => {
				copyIcon?.classList.remove('hidden');
				checkIcon?.classList.add('hidden');
				if (copyText) copyText.textContent = 'Copy';
				copyButton.classList.remove('bg-green-600/50', 'hover:bg-green-700/50', 'border-green-500/50');
				copyButton.classList.add('bg-gray-700/50', 'hover:bg-gray-600/50', 'border-gray-600/50');
			}, 2000);
		} catch (err) {
			console.error('Failed to copy text: ', err);
		}
	});
</script>
