---
import PostLayout from "@/layouts/PostLayout.astro";
import PageHeader from "@/components/elements/PageHeader.astro";
import SeparatorLine from "@/components/elements/SeparatorLine.astro";
import Button from "@/components/ui/Button.astro";
import { ArrowRight } from "@lucide/astro";
---
<PostLayout
	title="Homelab Infrastructure"
	description="Self-hosted production-grade infrastructure with Kubernetes, Proxmox, and comprehensive monitoring."
	keywords="Homelab, Infrastructure, Kubernetes, Proxmox, Docker, Self-hosted"
>
	<div class="work article">
		<main class="work-wrapper">
			<PageHeader
				title="Homelab Infrastructure"
				tags={["Kubernetes", "Proxmox", "Docker", "Monitoring"]}
				className="mb-6 md:mb-8"
			>
			</PageHeader>
			<div class="site-container m-auto">
				<SeparatorLine />
			</div>
			<section class="article-content">
				<div class="site-container mx-auto my-8 md:my-16 max-w-3xl">
					<div class="prose dark:prose-invert">
						<h2 class="text-2xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">The Story</h2>
						<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
							What started as a simple Raspberry Pi running Pi-hole evolved into a full production-grade infrastructure. The goal was to learn by doing: understanding how enterprise systems work by building them myself.
						</p>
						
						<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">Current Stack</h2>
						<ul class="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6">
							<li><strong>Virtualization:</strong> Proxmox VE</li>
							<li><strong>Orchestration:</strong> Kubernetes</li>
							<li><strong>Containers:</strong> Docker</li>
							<li><strong>Monitoring:</strong> Grafana, Prometheus, InfluxDB</li>
							<li><strong>Reverse Proxy:</strong> Caddy, FRP</li>
							<li><strong>Auth:</strong> Authentik (OIDC)</li>
						</ul>

						<h2 class="text-2xl font-brand mb-4 mt-8 text-neutral-800 dark:text-neutral-100">What I Learned</h2>
						<p class="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6">
							Building infrastructure from scratch taught me more than any course could. Debugging network issues at 2am, recovering from failed upgrades, designing for redundancy - these experiences shaped how I approach technical problems.
						</p>

						<div class="mt-12">
							<Button url="/infrastructure" type="fill">
								View Full Architecture <ArrowRight size={16} />
							</Button>
						</div>
					</div>
				</div>
			</section>
		</main>
	</div>
</PostLayout>
