---
import { localizePath } from '../i18n';
import { t } from '../i18n';

const currentYear = new Date().getFullYear();
---

<footer class="relative border-t border-dark-border bg-dark-bg">
	<div class="container mx-auto px-4 py-12">
		<div class="mb-8 grid gap-8 md:grid-cols-4">
			<!-- Brand -->
			<div class="col-span-2 md:col-span-1">
				<div class="mb-4 flex items-center gap-2">
					<div
						class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-2xl font-bold text-transparent"
					>
						Picture
					</div>
				</div>
				<p class="mb-4 text-sm text-gray-400">
					{t('footer.description')}
				</p>
				<!-- Social Links -->
				<div class="flex gap-4">
					<a
						href="#"
						class="text-gray-400 transition-colors hover:text-primary"
						aria-label="Twitter"
					>
						<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
							<path
								d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
							></path>
						</svg>
					</a>
					<a
						href="#"
						class="text-gray-400 transition-colors hover:text-primary"
						aria-label="GitHub"
					>
						<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
							<path
								d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
							></path>
						</svg>
					</a>
					<a
						href="#"
						class="text-gray-400 transition-colors hover:text-primary"
						aria-label="Discord"
					>
						<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
							<path
								d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
							></path>
						</svg>
					</a>
				</div>
			</div>

			<!-- Product -->
			<div>
				<h3 class="mb-4 font-semibold text-white">{t('footer.product.title')}</h3>
				<ul class="space-y-2">
					<li>
						<a
							href={localizePath('/features')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.features')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/use-cases')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.use_cases')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/comparisons')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.comparisons')}</a
						>
					</li>
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.pricing')}</a
						>
					</li>
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.models')}</a
						>
					</li>
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.product.api')}</a
						>
					</li>
				</ul>
			</div>

			<!-- Company -->
			<div>
				<h3 class="mb-4 font-semibold text-white">{t('footer.company.title')}</h3>
				<ul class="space-y-2">
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.about')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/blog')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.blog')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/testimonials')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.testimonials')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/faq')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.faq')}</a
						>
					</li>
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.careers')}</a
						>
					</li>
					<li>
						<a href="#" class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.company.contact')}</a
						>
					</li>
				</ul>
			</div>

			<!-- Legal -->
			<div>
				<h3 class="mb-4 font-semibold text-white">{t('footer.legal.title')}</h3>
				<ul class="space-y-2">
					<li>
						<a
							href={localizePath('/privacy')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.legal.privacy')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/terms')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.legal.terms')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/cookies')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.legal.cookie_policy')}</a
						>
					</li>
					<li>
						<a
							href={localizePath('/imprint')}
							class="text-sm text-gray-400 transition-colors hover:text-primary"
							>{t('footer.legal.licenses')}</a
						>
					</li>
				</ul>
			</div>
		</div>

		<!-- Bottom Bar -->
		<div
			class="flex flex-col items-center justify-between gap-4 border-t border-dark-border pt-8 md:flex-row"
		>
			<p class="text-sm text-gray-400">
				{t('footer.bottom.copyright', { year: currentYear })}
			</p>
			<div class="flex gap-6 text-sm text-gray-400">
				<a href="#" class="transition-colors hover:text-primary">{t('footer.bottom.status')}</a>
				<a href="#" class="transition-colors hover:text-primary"
					>{t('footer.bottom.documentation')}</a
				>
				<a href="#" class="transition-colors hover:text-primary">{t('footer.bottom.support')}</a>
			</div>
		</div>
	</div>
</footer>
