---
import Layout from "@/layouts/Layout.astro";
import { Server, Database, Shield, Globe, Activity, Lock } from "@lucide/astro";
---

<Layout 
	title="Infrastructure" 
	description="Technical overview of my homelab infrastructure."
	keywords="Infrastructure, Homelab, Kubernetes, Proxmox, Docker, Monitoring"
>
	<div class="site-container mx-auto my-8 md:my-16 px-4">
		<header class="mb-12">
			<h1 class="text-4xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">Infrastructure</h1>
			<p class="text-neutral-600 dark:text-neutral-400">Technical overview of my homelab stack.</p>
		</header>

		<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
			<!-- Virtualization -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Server size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Virtualization</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>Proxmox VE</strong> - Hypervisor</li>
					<li>Multiple VMs and LXC containers</li>
					<li>ZFS storage pools</li>
				</ul>
			</div>

			<!-- Orchestration -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Database size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Orchestration</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>Kubernetes</strong> - Container orchestration</li>
					<li><strong>Docker</strong> - Containerization</li>
					<li>GitOps deployment workflow</li>
				</ul>
			</div>

			<!-- PKI & Security -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Shield size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">PKI & Security</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>step-ca</strong> - Internal Certificate Authority</li>
					<li>Automated certificate provisioning</li>
					<li>mTLS for service communication</li>
				</ul>
			</div>

			<!-- DNS -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Globe size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">DNS</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>Technitium</strong> - DNS Server</li>
					<li>Split-horizon DNS</li>
					<li>Internal service discovery</li>
				</ul>
			</div>

			<!-- Monitoring -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Activity size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Monitoring</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>Grafana</strong> - Visualization</li>
					<li><strong>Prometheus</strong> - Metrics</li>
					<li><strong>InfluxDB</strong> - Time-series data</li>
				</ul>
			</div>

			<!-- Access & Auth -->
			<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
				<div class="flex items-center gap-3 mb-4">
					<Lock size={24} class="text-primary dark:text-primary-light" />
					<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Access & Auth</h2>
				</div>
				<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
					<li><strong>Authentik</strong> - Identity Provider</li>
					<li>OIDC/SAML SSO</li>
					<li><strong>Caddy</strong> - Reverse proxy</li>
					<li><strong>FRP</strong> - Tunnel access</li>
				</ul>
			</div>
		</div>

		<div class="mt-12 p-6 rounded-xl bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
			<h2 class="text-xl font-medium mb-4 text-neutral-800 dark:text-neutral-100">Architecture Notes</h2>
			<p class="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
				Everything runs on-premise. Services communicate over an internal network with mTLS. External access goes through authenticated reverse proxy. Monitoring covers infrastructure and application metrics.
			</p>
		</div>

		<div class="mt-8">
			<a href="/work/homelab" class="text-primary dark:text-primary-light hover:underline text-sm">
				&larr; Back to Homelab project
			</a>
		</div>
	</div>
</Layout>
