---
import '../styles/global.css';

---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>PoKeys Core Library</title>
	</head>
	<body class="bg-gray-900 text-white">
		<!-- Navigation -->
		<nav
			class="fixed top-0 w-full z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800"
		>
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex justify-between items-center py-4">
					<div
						class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
					>
						PoKeys
					</div>
					<div class="hidden md:flex space-x-8">
						<a
							href="#home"
							class="hover:text-blue-400 transition-colors"
							>Home</a
						>
						<a
							href="#features"
							class="hover:text-blue-400 transition-colors"
							>Features</a
						>
						<a
							href="https://github.com/pokeys-toolkit/core"
							class="hover:text-blue-400 transition-colors"
							>GitHub</a
						>
						<a
							href="https://crates.io/crates/pokeys-lib"
							class="hover:text-blue-400 transition-colors"
							>Crates.io</a
						>
					</div>
				</div>
			</div>
		</nav>

		<!-- Hero Section -->
		<section id="home" class="relative overflow-hidden py-20">
			<div
				class="absolute inset-0 bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900"
			>
			</div>
			<div
				class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="
				60"
				height="60"
				viewBox="0 0 60 60"
				xmlns="http://www.w3.org/2000/svg"
				%3E%3Cg
				fill="none"
				fill-rule="evenodd"
				%3E%3Cg
				fill="%239C92AC"
				fill-opacity="0.1"
				%3E%3Ccircle
				cx="30"
				cy="30"
				r="2"
				%3E%3C
				g%3E%3C
				g%3E%3C
				svg%3E')]"
			>
			</div>

			<div class="relative z-10 text-center max-w-4xl mx-auto px-4">
				<h1
					class="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent"
				>
					PoKeys Core
				</h1>
				<p
					class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto"
				>
					A blazingly fast Pure Rust implementation of the PoKeysLib
					for controlling PoKeys devices.
				</p>
				<div
					class="flex flex-col sm:flex-row gap-4 justify-center mb-20"
				>
					<a
						href="/core/getting-started"
						class="px-8 py-4 border border-gray-600 rounded-full font-semibold hover:border-gray-400 transition-all transform hover:scale-105"
					>
						Getting Started
					</a>
						<a
						href="https://www.poscope.com/"
						class="px-8 py-4 border border-gray-600 rounded-full font-semibold hover:border-gray-400 transition-all transform hover:scale-105"
					>
						Get PoKeys Hardware
					</a>
					<a
						href="https://github.com/pokeys-toolkit/core"
						class="px-8 py-4 border border-gray-600 rounded-full font-semibold hover:border-gray-400 transition-all transform hover:scale-105"
					>
						View on GitHub
					</a>
				</div>
			</div>
			<!-- Documentation Section -->
			<div class="relative z-10 text-center max-w-4xl mx-auto px-4">
				<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
					<a
						href="/core/getting-started"
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-700/50 to-gray-800/50 border border-gray-600/50 backdrop-blur-sm hover:border-green-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">📚</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Getting Started
						</h3>
						<p class="text-gray-400 mb-6">
							Learn the basics and get up and running with PoKeys
							devices quickly.
						</p>
						<div
							class="inline-flex items-center text-green-400 hover:text-green-300 font-semibold"
						>
							Read Guide
							<svg
								class="ml-2 w-4 h-4"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M9 5l7 7-7 7"></path>
							</svg>
						</div>
					</a>

					<a
						href="/core/examples"
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-700/50 to-gray-800/50 border border-gray-600/50 backdrop-blur-sm hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">💡</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Examples
						</h3>
						<p class="text-gray-400 mb-6">
							Practical examples and code snippets for common use
							cases.
						</p>
						<div
							class="inline-flex items-center text-blue-400 hover:text-blue-300 font-semibold"
						>
							View Examples
							<svg
								class="ml-2 w-4 h-4"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M9 5l7 7-7 7"></path>
							</svg>
						</div>
					</a>

					<a
						href="https://docs.rs/pokeys-lib"
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-700/50 to-gray-800/50 border border-gray-600/50 backdrop-blur-sm hover:border-purple-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">🔧</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							API
						</h3>
						<p class="text-gray-400 mb-6">
							Complete API reference with detailed function
							documentation.
						</p>
						<div
							class="inline-flex items-center text-purple-400 hover:text-purple-300 font-semibold"
						>
							API Reference
							<svg
								class="ml-2 w-4 h-4"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
								></path>
							</svg>
						</div>
					</a>
				</div>
				<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
					<div class="text-center mb-16">
						<p class="text-xl text-gray-400 max-w-2xl mx-auto">
							<br/>
							Built based on the amazing <a style="color:blue" href="https://github.com/PoLabsEE/PoKeysLib">PokeysLib</a> from
							<a style="color: blue;" href="https://www.poscope.com/">PoLabs</a>

						</p>
					</div>
				</div>
			</div>
		</section>

		<!-- Features Section -->
		<section id="features" class="py-20 bg-gray-900">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="text-center mb-16">
					<h2
						class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"
					>
						Features
					</h2>
					<p class="text-xl text-gray-400 max-w-2xl mx-auto">
						Comprehensive PoKeys support with modern Rust
						performance and safety
					</p>
				</div>

				<div
					class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"
				>
					<div
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50 backdrop-blur-sm hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">🦀</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Rust Performance
						</h3>
						<p class="text-gray-400">
							Comprehensive PoKeys support that leverages the
							blazing fast Rust language.
						</p>
					</div>

					<div
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50 backdrop-blur-sm hover:border-purple-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">🚀</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Performance Breakthrough
						</h3>
						<p class="text-gray-400">
							96.4% time reduction with 28x faster pin
							configuration through dual optimization.
						</p>
					</div>

					<div
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50 backdrop-blur-sm hover:border-green-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">🔌</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Device Connectivity
						</h3>
						<p class="text-gray-400">
							Full USB and network support with auto-detection and
							multi-device management.
						</p>
					</div>

					<div
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50 backdrop-blur-sm hover:border-red-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">🛡️</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Safety & Reliability
						</h3>
						<p class="text-gray-400">
							Comprehensive validation, error handling, thread
							safety, and failsafe settings.
						</p>
					</div>

					<div
						class="group p-8 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50 backdrop-blur-sm hover:border-yellow-500/50 transition-all duration-300 hover:transform hover:scale-105"
					>
						<div class="text-4xl mb-4">⌨️</div>
						<h3 class="text-xl font-semibold mb-3 text-white">
							Matrix Keyboard
						</h3>
						<p class="text-gray-400">
							Protocol-compliant matrix keyboard support with real-time
							monitoring and up to 16x8 key matrices.
						</p>
					</div>
				</div>

				<div class="text-center mt-16">
					<a
						href="https://crates.io/crates/pokeys-lib"
						class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-orange-500 to-red-600 rounded-full font-semibold hover:from-orange-600 hover:to-red-700 transition-all transform hover:scale-105"
					>
						View on Crates.io
						<svg
							class="ml-2 w-5 h-5"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
							></path>
						</svg>
					</a>
				</div>
			</div>
		</section>
	</body>
</html>
