package components

templ LandingPage() {
	@rootLayout() {
		<script defer src="assets/js/landing-page-animations.js"></script>
		<main class="flex items-center justify-center h-full bg-gradient-to-b from-slate-900 to-slate-800">
			<!-- Hero Section -->
			<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 mb-24 sm:py-24">
				<div class="max-w-7xl mx-auto">
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
						<!-- Left Content -->
						<div class="space-y-8">
							<div class="space-y-4">
								<span class="px-4 py-2 bg-emerald-900/50 text-emerald-400 rounded-full text-sm font-medium">Software Developer</span>
								<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight">
									Hey there! I'm Mohammad Hariri
								</h1>
								<p class="text-xl text-slate-400 leading-relaxed">
									I turn complex problems into elegant code solutions. Passionate about building robust applications that make a real difference in people's lives.
								</p>
							</div>
							<div class="flex flex-col sm:flex-row gap-4">
								<a href="#contact" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 transition duration-300 shadow-lg hover:shadow-xl">
									Let's get in touch
								</a>
								<a href="#portfolio" class="inline-flex items-center justify-center px-6 py-3 border-2 border-slate-700 text-base font-medium rounded-lg text-slate-300 hover:bg-slate-800 transition duration-300">
									View My Work
								</a>
							</div>
							<!-- Social Links -->
							<div class="flex gap-6 pt-4">
								<a href="https://github.com/moh682" class="text-slate-400 hover:text-emerald-400 transition-colors">
									<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
										<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
									</svg>
								</a>
								<a href="https://www.linkedin.com/in/mohammad-hariri-337a0116b/" class="text-gray-600 hover:text-emerald-600 transition-colors">
									<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
										<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
									</svg>
								</a>
							</div>
						</div>
						<!-- Right Content - Hero Image -->
						<div class="relative">
							<div class="absolute -inset-4 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-2xl opacity-30 blur-xl"></div>
							<div class="relative bg-slate-800 p-4 rounded-2xl shadow-xl">
								<img
									src="/images/profile.jpg"
									alt="Mohammad Hariri"
									class="w-full h-full object-cover rounded-xl"
								/>
							</div>
						</div>
					</div>
					<!-- Stats Section -->
					<div class="mt-20 grid grid-cols-2 sm:grid-cols-4 gap-8">
						<div class="text-center">
							<div id="years-experience" class="text-4xl font-bold text-emerald-400">0</div>
							<div class="text-slate-400 mt-2">Years Experience</div>
						</div>
						<div class="text-center">
							<div id="programming-languages" class="text-4xl font-bold text-emerald-600">0</div>
							<div class="text-gray-600 mt-2">Programming Languages</div>
						</div>
					</div>
				</div>
			</div>
		</main>
	}
}