<script lang="ts">
	import { PROJECT_NAME, SPECIAL_PARTNERS } from "$lib/core/constants";
	import Logo from "$lib/components/atoms/logo.svelte";
	import PaymentCardImages from "$lib/components/atoms/payment-card-images.svelte";
	import CurrencySelect from "$lib/domains/currency/view/currency-select.svelte";
	import MaxWidthWrapper from "../max-width-wrapper.svelte";
	import Input from "$lib/components/ui/input/input.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import Facebook from "~icons/ic/baseline-facebook";
	import Twitter from "~icons/arcticons/x-twitter";
	import Instagram from "~icons/hugeicons/instagram";
	import Linkedin from "~icons/tabler/brand-linkedin";
	import Youtube from "~icons/uil/youtube";

	// Social media links
	const SOCIAL_LINKS = [
		{ icon: Facebook, url: "#", ariaLabel: "Facebook" },
		{ icon: Twitter, url: "#", ariaLabel: "Twitter" },
		{ icon: Instagram, url: "#", ariaLabel: "Instagram" },
		{ icon: Linkedin, url: "#", ariaLabel: "LinkedIn" },
		{ icon: Youtube, url: "#", ariaLabel: "YouTube" },
	];

	// Company links
	const COMPANY_LINKS = [
		{ name: "About Us", url: "#" },
		{ name: "Careers", url: "#" },
		{ name: "Press", url: "#" },
		{ name: "Partners", url: "#" },
	];

	// Support links
	const SUPPORT_LINKS = [
		{ name: "Help Center", url: "#" },
		{ name: "Contact Us", url: "#" },
		{ name: "Privacy Policy", url: "#" },
		{ name: "Terms of Service", url: "#" },
	];

	// Legal links
	const LEGAL_LINKS = [
		{ name: "Privacy Policy", url: "#" },
		{ name: "Terms of Service", url: "#" },
		{ name: "Cookies", url: "#" },
	];
</script>

<footer class="bg-brand-950 text-white">
	<MaxWidthWrapper cls="px-4 py-16">
		<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-5">
			<div class="lg:col-span-2">
				<Logo intent="white" />
				<p class="my-6 max-w-md text-brand-100">
					Connecting travelers to their destinations with premium
					service, competitive prices, and a seamless booking experience
					since 2020.
				</p>
				<!-- <div class="flex space-x-4">
					{#each SOCIAL_LINKS as social}
						<a
							href={social.url}
							class="rounded-full bg-brand-900 p-2 transition-colors hover:bg-brand-700"
							aria-label={social.ariaLabel}
						>
							<svelte:component
								this={social.icon}
								class="h-4 w-5"
							/>
						</a>
					{/each}
				</div> -->
				<!-- <div class="mt-6">
					<a
						class="flex items-center gap-2 text-brand-100 hover:text-white"
						href={`mailto:${CONTACT_INFO.email}`}
					>
						<Icon icon={IconEmail} cls="h-4 w-auto" />
						<p>
							{CONTACT_INFO.email}
						</p>
					</a>
				</div> -->
			</div>

			<div>
				<h3 class="mb-4 text-lg font-semibold text-white">Company</h3>
				<ul class="space-y-2">
					{#each COMPANY_LINKS as link}
						<li>
							<a
								href={link.url}
								class="text-brand-100 transition-colors hover:text-white"
								>{link.name}</a
							>
						</li>
					{/each}
				</ul>
			</div>

			<div>
				<h3 class="mb-4 text-lg font-semibold text-white">Support</h3>
				<ul class="space-y-2">
					{#each SUPPORT_LINKS as link}
						<li>
							<a
								href={link.url}
								class="text-brand-100 transition-colors hover:text-white"
								>{link.name}</a
							>
						</li>
					{/each}
				</ul>
			</div>

			<div>
				<h3 class="mb-4 text-lg font-semibold text-white">Newsletter</h3>
				<p class="mb-4 text-brand-100">
					Subscribe for travel inspiration and exclusive deals.
				</p>
				<div class="space-y-2">
					<Input
						placeholder="Your email address"
						class="border-brand-800 bg-brand-900 text-white"
					/>
					<Button class="w-full bg-brand-600 hover:bg-brand-500">
						Subscribe
					</Button>
				</div>
			</div>
		</div>

		<div
			class="Md:items-center mt-12 flex flex-col justify-between gap-4 border-t border-brand-800 pt-8 md:flex-row"
		>
			<div class="mb-6">
				<h3 class="mb-4 text-lg font-semibold text-white">
					Payment Methods
				</h3>
				<PaymentCardImages />
			</div>

			{#if SPECIAL_PARTNERS.length > 0}
				<div class="mb-8">
					<h3 class="mb-4 text-lg font-semibold text-white">
						Affiliated Partners
					</h3>
					<div class="flex flex-wrap items-center gap-6">
						{#each SPECIAL_PARTNERS as partner}
							<img
								src={partner.link}
								alt={partner.alt}
								class="h-8 w-auto"
							/>
						{/each}
					</div>
				</div>
			{/if}
		</div>

		<div class="mt-8 border-t border-brand-800 pt-8">
			<div
				class="flex flex-col items-center justify-between gap-4 md:flex-row"
			>
				<p class="text-sm text-brand-300">
					© {new Date().getFullYear()}
					{PROJECT_NAME}. All rights reserved.
				</p>
				<div class="flex flex-wrap justify-center gap-6">
					{#each LEGAL_LINKS as link}
						<a
							href={link.url}
							class="text-sm text-brand-300 hover:text-white"
							>{link.name}</a
						>
					{/each}
				</div>
				<CurrencySelect invert={false} />
			</div>
		</div>
	</MaxWidthWrapper>
</footer>
