kunstenkamp/apps/web/src/components/homepage/Footer.tsx

"use client";

import { Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { authClient } from "@/lib/auth-client";

export default function Footer() {
	const [isAdmin, setIsAdmin] = useState(false);
	const [isLoading, setIsLoading] = useState(true);

	useEffect(() => {
		authClient.getSession().then((session) => {
			const user = session.data?.user as { role?: string } | undefined;
			setIsAdmin(user?.role === "admin");
			setIsLoading(false);
		});
	}, []);

	return (
		<footer className="relative z-40 overflow-hidden bg-[#d09035]">
			{/* Magenta top accent line */}
			<div className="h-1 w-full bg-[#d82560]" />

			{/* Diagonal texture overlay */}
			<div
				className="pointer-events-none absolute inset-0 opacity-[0.04]"
				style={{
					backgroundImage: `repeating-linear-gradient(
						-45deg,
						#000 0px,
						#000 1px,
						transparent 1px,
						transparent 12px
					)`,
				}}
			/>

			<div className="relative mx-auto max-w-5xl px-6 py-12">
				{/* Main brand row */}
				<div className="mb-10 flex flex-col items-center gap-1">
					<a
						href="https://ejv.be/jong/kampen/kunstenkamp/"
						target="_blank"
						rel="noopener noreferrer"
						className="flex items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
					>
						<img src="/favicon.png" alt="" className="h-10 w-10 bg-[#0B1C1F]" />
						<span
							className="font-['Intro',sans-serif] text-3xl text-white tracking-wide"
							style={{ textShadow: "0 2px 8px rgba(0,0,0,0.18)" }}
						>
							Kunstenkamp
						</span>
					</a>
					<p className="font-['DM_Sans',sans-serif] font-medium text-sm text-white/70 uppercase tracking-[0.2em]">
						Waar creativiteit tot leven komt
					</p>
				</div>

				{/* Thin divider */}
				<div className="mb-10 flex items-center gap-4">
					<div className="h-px flex-1 bg-white/20" />
					<div className="h-1 w-1 rotate-45 bg-white/40" />
					<div className="h-px flex-1 bg-white/20" />
				</div>

				{/* Partners row */}
				<div className="mb-10 flex flex-col items-center justify-center gap-10 md:flex-row md:gap-16">
					{/* EJV */}
					<a
						href="https://ejv.be"
						target="_blank"
						rel="noopener noreferrer"
						className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
					>
						<img
							src="/assets/ejv.svg"
							alt="Evangelisch Jeugdverbond"
							className="h-14 w-auto"
						/>
						<p className="font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]">
							Onderdeel van EJV.be
						</p>
					</a>

					{/* Vertical rule */}
					<div className="hidden h-28 w-px bg-white/20 md:block" />

					{/* Vlaanderen */}
					<a
						href="https://www.vlaanderen.be/cjm/nl"
						target="_blank"
						rel="noopener noreferrer"
						className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
					>
						<img
							src="/assets/vlaanderen.svg"
							alt="Met steun van de Vlaamse overheid"
							className="h-40 w-auto drop-shadow-md"
						/>
					</a>
				</div>

				{/* Thin divider */}
				<div className="mb-6 flex items-center gap-4">
					<div className="h-px flex-1 bg-white/20" />
					<div className="h-1 w-1 rotate-45 bg-white/40" />
					<div className="h-px flex-1 bg-white/20" />
				</div>

				{/* Legal links */}
				<div className="flex flex-col items-center gap-4 md:flex-row md:justify-center md:gap-0">
					<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
						{[
							{ href: "/privacy", label: "Privacy Beleid" },
							{ href: "/terms", label: "Algemene Voorwaarden" },
							{ href: "/contact", label: "Contact" },
						].map((link, i, arr) => (
							<span key={link.href} className="flex items-center gap-6">
								<a
									href={link.href}
									className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
								>
									{link.label}
								</a>
								{i < arr.length - 1 && (
									<span className="hidden text-white/30 md:inline">·</span>
								)}
							</span>
						))}
						{!isLoading && isAdmin && (
							<span className="flex items-center gap-6">
								<span className="hidden text-white/30 md:inline">·</span>
								<Link
									to="/admin"
									className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
								>
									Admin
								</Link>
							</span>
						)}
					</div>
				</div>

				{/* Copyright */}
				<div className="mt-6 flex flex-col items-center gap-1">
					<p className="font-['DM_Sans',sans-serif] text-white/60 text-xs">
						© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
					</p>
					<a
						href="https://zias.be"
						target="_blank"
						rel="noopener noreferrer"
						className="link-hover font-['DM_Sans',sans-serif] text-white/60 text-xs"
					>
						Gemaakt met ♥ door zias.be
					</a>
				</div>
			</div>
		</footer>
	);
}