---
import type { CollectionEntry } from "astro:content";
import { getEntry } from "astro:content";
import { Image } from "astro:assets";
import Footer from "../components/Footer.astro";
import Navbar from "../components/Navbar.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/prose.css";
import linkedinIcon from "../assets/linkedin.svg";
import githubIcon from "../assets/github.svg";

type BioEntry = CollectionEntry<"bio">;

const bioEntry: BioEntry | undefined = await getEntry("bio", "my-story");

if (!bioEntry) {
	throw new Error("Bio entry not found");
}

const { Content } = await bioEntry.render();
---

<BaseLayout title="Lorenzo Iovino >> Bio" description="Biography and life story of Lorenzo Iovino">
	<Navbar />
	<div class="min-h-screen pt-16 bg-secondary dark:bg-gray-900 transition-colors duration-200">
		<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
			<div class="mb-16 text-center">
				<h1 class="text-gray-800 dark:text-gray-100 mb-4">{bioEntry.data.title}</h1>
				<p class="text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
					{bioEntry.data.description}
				</p>
				<div class="h-1 w-20 bg-gray-600 dark:bg-primary rounded-full mx-auto mt-6"></div>
			</div>

			<div
				class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft-lg p-8 md:p-12 lg:p-16 transition-colors duration-200"
			>
				<div class="prose prose-xl max-w-none">
					<Content />
				</div>
			</div>

			<div
				class="mt-16 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl shadow-soft-lg p-10 md:p-14 lg:p-16 text-center border border-gray-100 dark:border-gray-600 transition-colors duration-200"
			>
				<h3 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-6">
					Let's Connect!
				</h3>
				<p
					class="text-gray-700 dark:text-gray-300 text-xl md:text-2xl leading-relaxed mb-10 max-w-3xl mx-auto font-light"
				>
					I'm always excited to connect with fellow developers, discuss interesting projects, or
					just have a chat about technology and life. Feel free to reach out!
				</p>
				<div class="flex flex-wrap gap-5 justify-center">
					<a
						href="https://www.linkedin.com/in/lorenzoiovino/"
						target="_blank"
						rel="noopener noreferrer"
						class="inline-flex items-center px-10 py-5 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transform hover:-translate-y-1 hover:scale-105"
					>
						<Image
							src={linkedinIcon}
							alt=""
							class="h-6 w-6 mr-3 opacity-80"
							width={24}
							height={24}
						/>
						LinkedIn
					</a>
					<a
						href="https://github.com/thisloke"
						target="_blank"
						rel="noopener noreferrer"
						class="inline-flex items-center px-10 py-5 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl border-2 border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transform hover:-translate-y-1 hover:scale-105"
					>
						<Image src={githubIcon} alt="" class="h-6 w-6 mr-3 opacity-80" width={24} height={24} />
						GitHub
					</a>
				</div>
			</div>
		</div>
	</div>
	<Footer />
</BaseLayout>