---
import Layout from '../layouts/Layout.astro';
import Navigation from '../components/Navigation.astro';
import HeroSection from '../components/HeroSection.astro';
import FeaturesSection from '../components/FeaturesSection.astro';
import TechStackSection from '../components/TechStackSection.astro';
import DemoSection from '../components/DemoSection.astro';
import TestimonialsSection from '../components/TestimonialsSection.astro';
import BenefitsSection from '../components/BenefitsSection.astro';
import AISection from '../components/AISection.astro';
import PrivacySection from '../components/PrivacySection.astro';
import MobileSection from '../components/MobileSection.astro';
import Footer from '../components/Footer.astro';
---

<Layout title="Trackeep - Your Self-Hosted Productivity & Knowledge Hub" description="Track, save, and organize everything that matters to you. Self-hosted, privacy-first, and AI-powered productivity hub.">
	<Navigation />
	<HeroSection />
	
	<!-- Modern Copy Command Section -->
	<section class="py-16 lg:py-24 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-5"></div>
		
		<!-- Minimal particle field -->
		<div class="particle-field">
			<div class="particle" style="left: 20%; animation-delay: 0s; animation-duration: 20s;"></div>
			<div class="particle" style="left: 50%; animation-delay: 2s; animation-duration: 23s;"></div>
			<div class="particle" style="left: 80%; animation-delay: 1s; animation-duration: 21s;"></div>
		</div>
		
		<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
			<div class="text-center mb-12">
				<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">Quick Start</span>
				</div>
				<h2 class="text-3xl lg:text-4xl font-bold text-foreground mb-4">
					Get Started in <span class="gradient-text">Seconds</span>
				</h2>
				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
					One command is all it takes to deploy Trackeep on your own infrastructure
				</p>
			</div>
			
			<!-- Enhanced Terminal Box with Copy Functionality -->
			<div class="max-w-4xl mx-auto">
				<div class="terminal-box rounded-3xl border-2 border-border/30 shadow-2xl hover:shadow-glow transition-all duration-300 group">
					<!-- Terminal Header -->
					<div class="flex items-center justify-between px-6 py-4 border-b border-border/20">
						<div class="flex items-center space-x-3">
							<div class="w-3 h-3 bg-red-500 rounded-full hover:bg-red-600 transition-colors cursor-pointer"></div>
							<div class="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-600 transition-colors cursor-pointer"></div>
							<div class="w-3 h-3 bg-green-500 rounded-full hover:bg-green-600 transition-colors cursor-pointer"></div>
							<span class="ml-4 text-sm text-muted-foreground font-mono">terminal</span>
						</div>
						<div class="flex items-center space-x-2">
							<span class="text-xs text-muted-foreground font-mono">bash</span>
						</div>
					</div>
					
					<!-- Terminal Content -->
					<div class="p-6">
						<div class="flex items-center justify-between">
							<div class="flex items-center space-x-4 flex-1">
								<span class="text-green-400 font-mono text-sm">$</span>
								<code id="install-command" class="text-foreground font-mono text-lg flex-1">
									git clone https://github.com/Dvorinka/Trackeep.git && cd Trackeep && ./start.sh
								</code>
							</div>
							<button 
								id="copy-button" 
								class="ml-4 p-3 rounded-xl bg-trackeep-blue/10 hover:bg-trackeep-blue/20 text-trackeep-blue transition-all duration-300 group hover:scale-110 border border-trackeep-blue/20"
								aria-label="Copy command"
							>
								<svg id="copy-icon" class="w-5 h-5" 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"></path>
								</svg>
								<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"></path>
								</svg>
							</button>
						</div>
						
						<!-- Success Message -->
						<div id="copy-success" class="hidden mt-4 p-3 bg-green-500/10 border border-green-500/20 rounded-xl">
							<p class="text-green-400 text-sm font-medium flex items-center">
								<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
								</svg>
								Command copied to clipboard!
							</p>
						</div>
					</div>
				</div>
				
				<!-- Additional Info -->
				<div class="mt-8 text-center">
					<p class="text-muted-foreground mb-4">
						Or if you prefer Docker Compose:
					</p>
					<div class="inline-flex items-center space-x-4 text-sm">
						<code class="bg-muted/50 px-3 py-2 rounded-lg font-mono">docker compose up -d</code>
						<span class="text-muted-foreground">•</span>
						<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="text-trackeep-blue hover:text-trackkeep-blue/80 transition-colors font-medium">
							Try Live Demo →
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<!-- Demo Screenshots Section -->
	<section id="screenshots" class="py-24 lg:py-40 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-3"></div>
		
		<!-- Minimal particle field -->
		<div class="particle-field">
			<div class="particle" style="left: 15%; animation-delay: 1s; animation-duration: 22s;"></div>
			<div class="particle" style="left: 45%; animation-delay: 3s; animation-duration: 20s;"></div>
			<div class="particle" style="left: 75%; animation-delay: 2s; animation-duration: 24s;"></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">Visual Tour</span>
				</div>
				<h2 class="text-5xl sm:text-6xl lg:text-7xl font-black text-foreground mb-8 leading-tight">
					<span class="block">See Trackeep in</span>
					<span class="gradient-text">Action</span>
				</h2>
				<p class="text-2xl lg:text-3xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
					Explore the clean, intuitive interface that makes organizing your digital life a breeze
				</p>
			</div>
			
			<!-- Screenshots Grid -->
			<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
				<div class="space-y-8">
					<div class="group">
						<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
							Clean & Minimal Design
						</h3>
						<p class="text-xl text-muted-foreground leading-relaxed">
							Inspired by the best productivity apps, Trackeep puts your content first with a distraction-free interface that's beautiful and functional.
						</p>
					</div>
					
					<div class="group">
						<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
							Dark Mode Ready
						</h3>
						<p class="text-xl text-muted-foreground leading-relaxed">
							Beautiful dark theme that's easy on the eyes. Perfect for late-night work sessions and reducing eye strain.
						</p>
					</div>
					
					<div class="group">
						<h3 class="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
							Responsive & Fast
						</h3>
						<p class="text-xl text-muted-foreground leading-relaxed">
							Built with modern web technologies for lightning-fast performance across all your devices.
						</p>
					</div>
				</div>
				
				<div class="relative">
					<div class="grid grid-cols-2 gap-4">
						<div class="space-y-4">
							<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
								<img src="/image.png" alt="Trackeep Dashboard" class="w-full h-auto object-cover" />
								<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
									<span class="text-white font-semibold">Main Dashboard</span>
								</div>
							</div>
							<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
								<img src="/image copy.png" alt="Trackeep Bookmarks" class="w-full h-auto object-cover" />
								<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
									<span class="text-white font-semibold">Bookmarks View</span>
								</div>
							</div>
						</div>
						<div class="space-y-4 mt-8">
							<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
								<img src="/image copy 2.png" alt="Trackeep Tasks" class="w-full h-auto object-cover" />
								<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
									<span class="text-white font-semibold">Task Management</span>
								</div>
							</div>
							<div class="relative overflow-hidden rounded-2xl shadow-2xl hover-lift glow-border">
								<img src="/image copy 3.png" alt="Trackeep Files" class="w-full h-auto object-cover" />
								<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
									<span class="text-white font-semibold">File Storage</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<FeaturesSection />
	<AISection />
	<PrivacySection />
	<MobileSection />
	<BenefitsSection />
	<TechStackSection />
	<DemoSection />
	<TestimonialsSection />
	<Footer />
</Layout>
