import { Link as RouterLink } from "@tanstack/react-router";
import { Card, Divider, Link, Text } from "denjs-ui";
import { useMessages } from "#/shared/lib/i18n";

export function Footer() {
	const m = useMessages();
	const year = new Date().getFullYear();

	return (
		<footer className="site-footer mt-16 px-4 pb-12 pt-10 text-[var(--sea-ink-soft)]">
			<div className="page-wrap">
				<Card
					padding="lg"
					className="island-shell rounded-[1.8rem] border-[var(--line)] bg-[linear-gradient(165deg,var(--surface-strong),var(--glass-surface))]"
				>
					<div className="grid gap-6 md:grid-cols-[1.1fr_1fr] md:items-end">
						<div>
							<Text
								as="p"
								weight="semibold"
								className="m-0 text-sm text-[var(--sea-ink)]"
							>
								Monie
							</Text>
							<Text
								as="p"
								tone="muted"
								className="m-0 mt-2 max-w-md text-sm leading-6 text-[var(--sea-ink-soft)]"
							>
								{m.footer_description()}
							</Text>
						</div>

						<nav className="flex flex-wrap justify-start gap-4 text-sm md:justify-end">
							<Link
								href="/#benefits"
								tone="muted"
								underline="hover"
								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
							>
								{m.footer_nav_benefits()}
							</Link>
							<Link
								href="/#faq"
								tone="muted"
								underline="hover"
								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
							>
								{m.footer_nav_faq()}
							</Link>
							<Link
								href="mailto:hello@monie.app"
								external
								tone="muted"
								underline="hover"
								className="text-sm font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
							>
								hello@monie.app
							</Link>
						</nav>
					</div>

					<Divider className="my-6" tone="muted" />

					<div className="flex flex-wrap items-center justify-between gap-3 text-xs">
						<Text
							as="p"
							size="sm"
							tone="muted"
							className="m-0 text-xs text-[var(--sea-ink-soft)]"
						>
							&copy; {year} Monie. {m.footer_rights()}
						</Text>

						<div className="flex gap-4">
							<RouterLink
								to="/about"
								className="text-xs font-medium text-[var(--sea-ink-soft)] no-underline transition hover:text-[var(--sea-ink)]"
							>
								{m.footer_about()}
							</RouterLink>
							<Link
								href="/#demo"
								tone="muted"
								underline="hover"
								className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
							>
								{m.footer_demo()}
							</Link>
							<Link
								href="mailto:legal@monie.app"
								external
								tone="muted"
								underline="hover"
								className="text-xs font-medium text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)]"
							>
								legal@monie.app
							</Link>
						</div>
					</div>
				</Card>
			</div>
		</footer>
	);
}