{% load static %}
<footer class="bg-white border-t border-zinc-200 pt-10 pb-6">
	<div class="max-w-7xl mx-auto px-6 lg:px-8">
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-10 gap-8 pb-10 border-b border-zinc-100">
			
            <div class="lg:col-span-3 space-y-6 flex justify-center md:justify-start">
				<a href="{% url 'core:landing' %}" class="inline-block transition-transform hover:opacity-90">
					<img src="{% static 'img/logo.png' %}" alt="Lo Justo Learning" class="h-14 w-auto object-contain" />
				</a>
			</div>


			<div class="lg:col-span-3 space-y-6">
				<h3 class="text-sm font-semibold text-zinc-900 uppercase tracking-wider">Contacto</h3>
				<ul class="grid grid-cols-2 lg:grid-cols-1 gap-5">
					<li class="flex items-start gap-3 group">
						<div class="mt-0.5 w-8 h-8 shrink-0 rounded-lg bg-zinc-100 flex items-center justify-center text-[#044d29] group-hover:bg-[#044d29] group-hover:text-white transition-colors duration-300">
							<c-lbi.rmx.phone variant="fill" w="1.1rem" h="1.1rem" />
						</div>
						<div class="space-y-1">
							<p class="text-xs text-zinc-400 font-bold uppercase tracking-wider">Arequipa</p>
							<p class="text-zinc-700 text-sm font-medium">(054) 445500</p>
							<p class="text-zinc-700 text-sm font-medium">(054) 282928</p>
							<p class="text-zinc-700 text-sm font-medium">(+51) 998 636 350</p>
						</div>
					</li>
					<li class="flex items-start gap-3 group">
						<div class="mt-0.5 w-8 h-8 shrink-0 rounded-lg bg-zinc-100 flex items-center justify-center text-[#044d29] group-hover:bg-[#044d29] group-hover:text-white transition-colors duration-300">
							<c-lbi.rmx.phone variant="fill" w="1.1rem" h="1.1rem" />
						</div>
						<div class="space-y-1">
							<p class="text-xs text-zinc-400 font-bold uppercase tracking-wider">Lima</p>
							<p class="text-zinc-700 text-sm font-medium">(01) 639 7838</p>
							<p class="text-zinc-700 text-sm font-medium">(+51) 989 168 473</p>
						</div>
					</li>
					<li class="flex items-start gap-3 group">
						<div class="mt-0.5 w-8 h-8 shrink-0 rounded-lg bg-zinc-100 flex items-center justify-center text-[#044d29] group-hover:bg-[#044d29] group-hover:text-white transition-colors duration-300">
						    <c-lbi.rmx.phone variant="fill" w="1.1rem" h="1.1rem" />
						</div>
						<div class="space-y-1">
							<p class="text-xs text-zinc-400 font-bold uppercase tracking-wider">Moquegua</p>
							<p class="text-zinc-700 text-sm font-medium">(+51) 973 585 643</p>
						</div>
					</li>
					<li class="flex items-start gap-3 group">
						<div class="mt-0.5 w-8 h-8 shrink-0 rounded-lg bg-zinc-100 flex items-center justify-center text-[#044d29] group-hover:bg-[#044d29] group-hover:text-white transition-colors duration-300">
							<c-lbi.rmx.mail-send variant="fill" w="1.1rem" h="1.1rem" />
						</div>
						<div class="space-y-1">
							<p class="text-xs text-zinc-400 font-bold uppercase tracking-wider">Correo electrónico</p>
							<a href="mailto:lojusto@lojusto.com" class="text-zinc-700 text-sm font-medium hover:text-[#044d29] transition-colors">lojusto@lojusto.com</a>
						</div>
					</li>
				</ul>
			</div>

			<div class="lg:col-span-4 space-y-6">
				<h3 class="text-sm font-semibold text-zinc-900 uppercase tracking-wider">Ubicación</h3>
				<div class="relative w-full h-64 rounded-xl overflow-hidden shadow-sm border border-zinc-200 bg-zinc-50">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3827.430780558693!2d-71.58119192485698!3d-16.4029339843259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91423583fc698f53%3A0x122761c12a7cc2c8!2sLO%20JUSTO%20S.A.C.%20-%20Arequipa!5e0!3m2!1ses!2spe!4v1773780144480!5m2!1ses!2spe"
						class="absolute inset-0 w-full h-full" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Ubicación de Lo Justo S.A.C.">
					</iframe>
				</div>
			</div>
		</div>

		<div class="pt-6 flex flex-col-reverse md:flex-row items-center justify-between gap-6">
			<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 text-sm text-zinc-500 font-medium text-center sm:text-left">
				<span>© {% now "Y" %} Lo Justo S.A.C.</span>
				<span class="hidden sm:block w-1 h-1 rounded-full bg-zinc-300"></span>
				<div class="flex flex-wrap justify-center gap-x-4 gap-y-2">
					<a href="#" class="hover:text-zinc-900 transition-colors">Términos y condiciones</a>
					<a href="#" class="hover:text-zinc-900 transition-colors">Política de privacidad</a>
				</div>
			</div>

			<div class="flex flex-col md:flex-row items-center md:justify-center gap-3">
				<div class="flex items-center gap-3">
					<h3 class="text-sm font-bold text-zinc-900 uppercase tracking-wide">Nuestras redes sociales</h3>
					<span class="hidden md:block text-zinc-400">|</span>
				</div>
				<div class="flex flex-wrap justify-center gap-3">
					<a href="https://www.linkedin.com/company/lo-justo-sac" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="w-10 h-10 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-600 hover:bg-[#044d29] hover:text-white hover:border-[#044d29] hover:-translate-y-1 transition-all duration-300 shadow-sm">
						<c-lbi.rmx.linkedin variant="fill" w="1.25rem" h="1.25rem" />
					</a>
					<a href="https://lojusto.com/" target="_blank" rel="noopener noreferrer" aria-label="Web" class="w-10 h-10 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-600 hover:bg-[#044d29] hover:text-white hover:border-[#044d29] hover:-translate-y-1 transition-all duration-300 shadow-sm">
						<c-lbi.rmx.global w="1.25rem" h="1.25rem" />
					</a>
					<a href="https://www.facebook.com/lojusto.calibracion/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="w-10 h-10 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-600 hover:bg-[#044d29] hover:text-white hover:border-[#044d29] hover:-translate-y-1 transition-all duration-300 shadow-sm">
						<c-lbi.rmx.facebook-circle variant="fill" w="1.25rem" h="1.25rem" />
					</a>
					<a href="https://tiktok.com/@lojusto.sac" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="w-10 h-10 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-600 hover:bg-[#044d29] hover:text-white hover:border-[#044d29] hover:-translate-y-1 transition-all duration-300 shadow-sm">
						<c-lbi.rmx.tiktok variant="fill" w="1.25rem" h="1.25rem" />
					</a>
					<a href="https://instagram.com/lojusto.sac" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="w-10 h-10 rounded-lg bg-white border border-zinc-200 flex items-center justify-center text-zinc-600 hover:bg-[#044d29] hover:text-white hover:border-[#044d29] hover:-translate-y-1 transition-all duration-300 shadow-sm">
						<c-lbi.rmx.instagram w="1.25rem" h="1.25rem" />
					</a>
				</div>
			</div>
		</div>
	</div>
</footer>
