<script>
	import fullLogo from '$lib/assets/img/logo/full_logo.png';
	import { Phone, MapPin, Mail } from '@lucide/svelte';
	import { SIIcon } from '@willingtonortiz/svelte-simple-icons';
	import { siFacebook, siInstagram, siTiktok } from 'simple-icons';

	let { user } = $props();
</script>

<footer class="mx-auto w-full bg-primary/10 px-12 pt-10 pb-4 max-md:px-4">
	<div
		class="mx-auto grid w-full max-w-screen-2xl grid-cols-4 items-start justify-between gap-12 max-md:flex max-md:flex-col max-md:gap-4"
	>
		<div>
			<div class="flex flex-col gap-4">
				<img src={fullLogo} alt="Korean Skin Care Logo" class="w-48" />
				<p class="text-sm">
					Korean Skin Care & Beauty Clinic in Kathmandu, Nepal offers advanced facials, acne scar
					removal, skin whitening, and anti-aging treatments. Our licensed dermatologist and expert
					team combine Korean skincare science with personalized care to deliver safe, clinically
					proven results. Trusted by Nepal’s top celebrities, we help clients rejuvenate, restore,
					and achieve glowing, youthful skin with world-class skincare solutions.
				</p>
				<div class="flex flex-col gap-2">
					<a href="tel:9849365761" class="flex items-center gap-2">
						<Phone size={20} strokeWidth={1.5} color="#AF272F" />
						<p class="text-sm">(+977) 984-936-5761 / 01-4011568</p>
					</a>
					<a href="https://maps.app.goo.gl/Gx2N5XvhZMqwpmFa8" class="flex items-center gap-2">
						<MapPin size={20} strokeWidth={1.5} color="#AF272F" />
						<p class="text-sm">City Center, First Floor, Kathmandu 44600, Nepal</p>
					</a>
					<a href="mailto:kscclinicnepal@gmail.com" class="flex items-center gap-2">
						<Mail size={20} strokeWidth={1.5} color="#AF272F" />
						<p class="text-sm">kscclinicnepal@gmail.com</p>
					</a>
				</div>
			</div>
		</div>
		<div class="w-full">
			<div class="flex flex-col gap-2">
				<p class="text-lg font-semibold tracking-tight">About KSCBC</p>
				<ul class="flex flex-col gap-2">
					<li>
						<a href="https://www.kscclinicnepal.com/" target="_blank" class="text-sm">About us</a>
					</li>
					<li>
						<a href={user?.authenticated ? '/profile' : '/login'} class="text-sm">My Account</a>
					</li>
					<li>
						<a href="/privacy-policy" class="text-sm">Privacy & Policy</a>
					</li>
					<li>
						<a href="/contact-us" class="text-sm">Contact Us</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="w-full">
			<div class="flex flex-col gap-2">
				<p class="text-lg font-semibold tracking-tight">Customer Support</p>
				<ul class="flex flex-col gap-2">
					<li>
						<a href="/faq" class="text-sm">F.A.Q</a>
					</li>
					<li>
						<a href="/exchange-policy" class="text-sm">Refund and Exchange Policy</a>
					</li>
					<li>
						<a href="/payment" class="text-sm">Payment Information</a>
					</li>
					<li>
						<a href="/shipping" class="text-sm">Shipping and Delivery</a>
					</li>
				</ul>
			</div>
		</div>
		<div></div>
	</div>
	<hr class="mt-6 border border-primary/10" />
	<div
		class="mx-auto mt-4 flex max-w-screen-2xl items-center justify-between max-md:flex-col max-md:items-start max-md:gap-4"
	>
		<p class="text-sm">&copy; {new Date().getFullYear()} Korean Skin Care & Beauty Clinic</p>
		<ul class="flex items-center gap-4">
			<li>
				<a href="https://www.facebook.com/koreanskincareclinic/" target="_blank">
					<SIIcon icon={siFacebook} size={16} color={'#0c0a09'} />
				</a>
			</li>
			<li>
				<a href="https://www.instagram.com/korean_skincare_nepal_/" target="_blank">
					<SIIcon icon={siInstagram} size={16} color={'#0c0a09'} />
				</a>
			</li>
			<li>
				<a href="https://www.tiktok.com/@koreanskincareclinic_np" target="_blank">
					<SIIcon icon={siTiktok} size={16} color={'#0c0a09'} />
				</a>
			</li>
		</ul>
	</div>
	<div itemscope itemtype="https://schema.org/LocalBusiness" class="hidden">
		<div itemprop="name">Korean Skin Care and Beauty Clinic</div>
		<div>Phone: <span itemprop="telephone">+977 984936576</span></div>
		<div>
			Url: <span itemprop="url"
				><a href="koreanskincareandclinic.com">koreanskincareandclinic.com</a></span
			>
		</div>

		<meta
			itemprop="openingHours"
			style="display: none"
			datetime="Mo,Tu,We,Th,Fr,Sa,Su 10:00-19:00"
		/>
		<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
			<div itemprop="streetAddress">City Center</div>
			<div>
				<span itemprop="addressLocality">Kathmandu</span>, <span itemprop="addressRegion">KTM</span>
				<span itemprop="postalCode">44600</span>
			</div>
		</div>
	</div>
</footer>
