---
// Hero section with install command and CTAs
---

<section class="relative min-h-screen flex items-center justify-center bg-grid-pattern bg-grid-48 overflow-hidden">
	<!-- Simple background -->
	<div class="absolute inset-0 bg-gradient-to-b from-background to-background"></div>
	
	<!-- Minimal particle field -->
	<div class="particle-field">
		<div class="particle" style="left: 10%; animation-delay: 0s; animation-duration: 20s;"></div>
		<div class="particle" style="left: 30%; animation-delay: 2s; animation-duration: 25s;"></div>
		<div class="particle" style="left: 50%; animation-delay: 1s; animation-duration: 22s;"></div>
		<div class="particle" style="left: 70%; animation-delay: 3s; animation-duration: 18s;"></div>
		<div class="particle" style="left: 90%; animation-delay: 2s; animation-duration: 24s;"></div>
	</div>
	
	<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
		<div class="max-w-5xl mx-auto">
			<!-- Clean badge -->
			<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-bold text-primary">✨ Self-Hosted & Privacy-First</span>
			</div>
			
			<!-- Clean headline -->
			<h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black text-foreground mb-8 leading-tight animate-fade-in">
				<span class="block">Your Self-Hosted</span>
				<span class="text-gradient">Productivity Hub</span>
			</h1>
			
			<!-- Clean subheading -->
			<p class="text-2xl sm:text-3xl lg:text-4xl text-muted-foreground mb-12 max-w-4xl mx-auto leading-relaxed animate-fade-in">
				Track, save, and organize everything that matters to you — 
				<span class="font-bold text-primary">all in one place</span>, under your control
			</p>
			
			<!-- Clean CTA Buttons -->
			<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16 animate-fade-in">
				<a href="https://demo.trackeep.org" target="_blank" rel="noopener" class="btn-primary">
					Try Live Demo
					<svg class="w-5 h-5 ml-2" 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"></path>
					</svg>
				</a>
				<a href="#install" class="btn-outline">
					Quick Install
					<svg class="w-5 h-5 ml-2" 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"></path>
					</svg>
				</a>
			</div>
			
			<!-- Clean feature highlights -->
			<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 mb-20 animate-fade-in">
				<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
					<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
						<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
							<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
						</svg>
					</div>
					<span class="font-semibold text-lg text-primary">Privacy First</span>
					<span class="text-sm text-center opacity-70">Your data stays yours</span>
				</div>
				<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
					<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
						<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
							<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
						</svg>
					</div>
					<span class="font-semibold text-lg text-primary">Open Source</span>
					<span class="text-sm text-center opacity-70">Transparent & customizable</span>
				</div>
				<div class="flex flex-col items-center justify-center space-y-4 text-muted-foreground">
					<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center">
						<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
							<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
						</svg>
					</div>
					<span class="font-semibold text-lg text-primary">AI Powered</span>
					<span class="text-sm text-center opacity-70">Smart recommendations</span>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Simple scroll indicator -->
	<div class="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
		<a href="#install" class="text-muted-foreground hover:text-primary transition-all duration-300 flex flex-col items-center">
			<span class="text-sm mb-3 font-medium">Get Started</span>
			<div class="p-3 rounded-full bg-primary/10 hover:bg-primary/20 transition-colors">
				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
				</svg>
			</div>
		</a>
	</div>
</section>
