---
import { Image } from "astro:assets";
import mePhoto from "../assets/photos/me.png";
import linkedinIcon from "../assets/linkedin.svg";
import githubIcon from "../assets/github.svg";
---

<div class="w-full">
	<div class="relative px-6 lg:px-8">
		<div class="mx-auto max-w-5xl">
			<div
				class="relative overflow-hidden rounded-3xl bg-white shadow-soft-lg hover:shadow-soft-lg transition-shadow duration-300"
			>
				<div class="relative flex flex-col md:flex-row items-center md:items-end">
					<!-- Photo Section -->
					<div class="w-full md:w-auto flex-shrink-0 order-2 md:order-none">
						<div class="relative overflow-hidden md:rounded-l-3xl flex justify-center md:block">
							<Image
								src={mePhoto}
								alt="Photo of Lorenzo Iovino"
								class="w-48 h-auto md:w-full object-cover object-center"
								width={300}
								height={300}
								quality={90}
								format="webp"
							/>
							<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
							<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
						</div>
					</div>

					<!-- Content Section -->
					<div class="flex-1 p-6 md:p-12 flex flex-col justify-center order-1 md:order-none">
						<div class="space-y-4 md:space-y-6">
							<!-- Greeting -->
							<div class="text-center md:text-left">
								<h1 class="mb-3">
									Hey, I'm <span class="text-gray-900 font-extrabold">Lorenzo</span>!
								</h1>
								<div class="h-1 w-20 bg-secondary rounded-full mx-auto md:mx-0"></div>
							</div>

							<!-- Description -->
							<div class="space-y-3 md:space-y-4">
								<p class="text-base md:text-lg text-gray-700">
									I'm on a quest to uncover life's meaning while diving deep into my passion for
									Computer Science as a
									<span class="font-semibold text-gray-900 relative inline-block">
										Software Engineer
										<span class="absolute bottom-0 left-0 w-full h-0.5 bg-secondary"></span>
									</span>
								</p>
								<p class="text-sm md:text-lg text-gray-600">
									Here, on my personal website, I share my projects and occasional thoughts.
								</p>
							</div>

							<!-- Social Links -->
							<div class="flex gap-3 md:gap-4 pt-2 justify-center md:justify-end">
								<a
									href="https://www.linkedin.com/in/lorenzoiovino/"
									class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
									aria-label="LinkedIn"
								>
									<Image
										src={linkedinIcon}
										alt="LinkedIn"
										class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
										width={24}
										height={24}
										loading="lazy"
									/>
								</a>
								<a
									href="https://github.com/thisloke"
									class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
									aria-label="GitHub"
								>
									<Image
										src={githubIcon}
										alt="GitHub"
										class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
										width={24}
										height={24}
										loading="lazy"
									/>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>