<template>
	<footer class="bg-neutral-950 text-white">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
			<!-- Main Footer Grid -->
			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 lg:gap-12">
				<!-- Brand Column -->
				<div class="col-span-2">
					<slot name="brand">
						<NuxtLink v-if="logo?.src" to="/" class="inline-block">
							<img
								:src="logo.src"
								:alt="logo.alt || 'Logo'"
								class="h-8 w-auto"
							/>
						</NuxtLink>
						<p
							v-if="description"
							class="mt-4 text-neutral-400 max-w-xs"
						>
							{{ description }}
						</p>
					</slot>

					<!-- Social Links -->
					<div v-if="social.length" class="mt-6 flex gap-4">
						<a
							v-for="item in social"
							:key="item.name"
							:href="item.href"
							target="_blank"
							rel="noopener noreferrer"
							class="text-neutral-400 hover:text-primary-400 transition-all duration-300 hover:scale-110"
						>
							<UIcon :name="item.icon" class="w-5 h-5" />
							<span class="sr-only">{{ item.name }}</span>
						</a>
					</div>
				</div>

				<!-- Link Columns -->
				<div
					v-for="column in columns"
					:key="column.title"
					class="col-span-1"
				>
					<h4 class="font-semibold text-sm uppercase tracking-wider text-neutral-300 mb-4">
						{{ column.title }}
					</h4>
					<ul class="space-y-3">
						<li v-for="link in column.links" :key="link.label">
							<NuxtLink
								:to="link.to"
								class="text-neutral-400 hover:text-white transition-colors text-sm inline-block relative group"
							>
								{{ link.label }}
								<span class="absolute -bottom-0.5 left-0 w-0 h-px bg-primary-500 transition-all duration-300 group-hover:w-full" />
							</NuxtLink>
						</li>
					</ul>
				</div>
			</div>

			<!-- Newsletter Section -->
			<div
				v-if="hasNewsletter"
				class="mt-12 pt-8 border-t border-neutral-800"
			>
				<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
					<div>
						<h4 class="font-semibold">{{ newsletterTitle }}</h4>
						<p class="mt-1 text-sm text-neutral-400">{{ newsletterDescription }}</p>
					</div>
					<form class="flex gap-2 w-full md:w-auto" @submit.prevent="$emit('newsletter-submit', email)">
						<UInput
							v-model="email"
							type="email"
							placeholder="Enter your email"
							class="flex-1 md:w-64"
						/>
						<UButton type="submit" color="primary">
							Subscribe
						</UButton>
					</form>
				</div>
			</div>

			<!-- Bottom Bar -->
			<div class="mt-12 pt-8 border-t border-neutral-800 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
				<p class="text-sm text-neutral-500">
					{{ copyright }}
				</p>
				<div v-if="legalLinks.length" class="flex flex-wrap gap-6">
					<NuxtLink
						v-for="link in legalLinks"
						:key="link.label"
						:to="link.to"
						class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"
					>
						{{ link.label }}
					</NuxtLink>
				</div>
			</div>
		</div>
	</footer>
</template>

<script setup>
const props = defineProps({
	/** Logo object { src: string, alt?: string } */
	logo: {
		type: Object,
		default: null,
		validator: (v) => !v || typeof v.src === 'string',
	},
	/** Brand description */
	description: {
		type: String,
		default: '',
	},
	/** Social media links */
	social: {
		type: Array,
		default: () => [],
	},
	/** Footer link columns */
	columns: {
		type: Array,
		default: () => [],
	},
	/** Legal/policy links */
	legalLinks: {
		type: Array,
		default: () => [],
	},
	/** Copyright text */
	copyright: {
		type: String,
		default: () => `© ${new Date().getFullYear()} All rights reserved.`,
	},
	/** Has newsletter section */
	hasNewsletter: {
		type: Boolean,
		default: false,
	},
	/** Newsletter title */
	newsletterTitle: {
		type: String,
		default: 'Subscribe to our newsletter',
	},
	/** Newsletter description */
	newsletterDescription: {
		type: String,
		default: 'Get the latest updates and news.',
	},
});

defineEmits(['newsletter-submit']);

const email = ref('');
</script>
