<template>
	<div>
		<XMarkSectionNewsletter
			v-if="
				appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
			"
			title="Subscribe to our newsletter"
			description="Get the latest news and updates."
			@submit="(email) => console.log('Newsletter signup:', email)"
		/>
		<section
			class="relative pt-24 overflow-hidden"
			:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"
		>
			<!-- Dark overlay to guarantee readable white text regardless of bg image -->
			<div
				class="absolute inset-0 bg-gray-900/80"
				aria-hidden="true"
				v-if="footer?.bg?.img?.src"
			></div>
			<img
				class="absolute left-1/2 bottom-0 h-full transform -translate-x-1/2 opacity-30"
				:src="footer?.bg?.img?.src"
				:alt="footer?.bg?.img?.alt"
				v-if="footer?.bg?.img?.src"
			/>
			<div
				class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
			>
				<div class="pb-24">
					<div
						class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
					>
						<div class="shrink-0 lg:max-w-xl">
							<a v-if="footer?.logo?.src" class="mb-8 inline-block" href="/">
								<img
									:src="footer?.logo?.src"
									:alt="footer?.logo?.alt"
									class="h-6"
								/>
							</a>
							<p
								class="mb-8 text-white font-medium leading-relaxed max-w-lg mx-auto lg:mx-0"
							>
								{{ footer?.body }}
							</p>
							<div class="flex flex-row flex-wrap gap-2 justify-start">
								<div
									class="w-auto"
									v-for="(social, index) in footer?.socials"
									:key="index"
								>
									<UButton
										:to="social.url"
										:icon="social?.icon"
										:aria-label="social?.name"
										color="neutral"
										square
										target="_blank"
										variant="ghost"
									/>
								</div>
								<UColorModeButton />
							</div>
						</div>
						<div
							class="flex flex-col sm:flex-row gap-8 lg:gap-12 lg:justify-end"
						>
							<div
								class="text-left sm:text-right"
								v-for="(column, index) in footer.columns"
								:key="index"
							>
								<h3
									class="mb-6 text-sm text-white uppercase font-semibold leading-normal tracking-wide"
								>
									{{ column?.headerLabel }}
								</h3>
								<ul class="space-y-4">
									<li v-for="link in column?.links" :key="link?.label">
										<nuxt-link
											:to="link?.to"
											:target="link?.target ? link?.target : '_self'"
											class="text-white hover:text-primary-300 font-medium leading-relaxed transition-colors"
											>{{ link?.label }}</nuxt-link
										>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>
<script setup>
const appConfig = useAppConfig();
const footer = appConfig?.xMarketing?.footer;
</script>
