import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/contact")({
	component: ContactPage,
});

function ContactPage() {
	return (
		<div>
			<div className="mx-auto max-w-3xl px-6 py-12">
				<Link
					to="/"
					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
				>
					← Terug naar home
				</Link>
				<h1 className="mb-8 font-['Intro',sans-serif] text-4xl text-white">
					Contact
				</h1>

				<div className="space-y-6 text-white/80">
					<section>
						<h2 className="mb-3 text-2xl text-white">Heb je vragen?</h2>
						<p className="mb-4">
							We helpen je graag! Je kunt ons bereiken via de volgende kanalen:
						</p>
					</section>

					<section className="rounded-lg bg-white/5 p-6">
						<h3 className="mb-3 text-white text-xl">E-mail</h3>
						<a
							href="mailto:info@kunstenkamp.be"
							className="link-hover text-white/80 hover:text-white"
						>
							info@kunstenkamp.be
						</a>
					</section>

					<section className="rounded-lg bg-white/5 p-6">
						<h3 className="mb-3 text-white text-xl">Open Mic Night</h3>
						<p>Vrijdag 24 april 2026</p>
						<p>Aanvang: 19:00 uur</p>
						<p className="mt-2 text-white/60">
							Locatie wordt later bekendgemaakt aan geregistreerde deelnemers.
						</p>
					</section>

					<section className="rounded-lg bg-white/5 p-6">
						<h3 className="mb-3 text-white text-xl">Organisatie</h3>
						<p>Kunstenkamp vzw</p>
						<p className="mt-2 text-white/60">
							Een initiatief voor en door kunstenaars.
						</p>
					</section>

					<section className="rounded-lg bg-white/5 p-6">
						<h3 className="mb-4 text-white text-xl">Partners</h3>
						<div className="flex flex-col gap-3 sm:flex-row sm:gap-6">
							<a
								href="https://ejv.be"
								target="_blank"
								rel="noopener noreferrer"
								className="link-hover text-white/80 hover:text-white"
							>
								Evangelisch Jeugdverbond (EJV.be)
							</a>
							<a
								href="https://www.vlaanderen.be/cjm/nl"
								target="_blank"
								rel="noopener noreferrer"
								className="link-hover text-white/80 hover:text-white"
							>
								Vlaanderen — Cultuur, Jeugd & Media
							</a>
						</div>
					</section>

					<section className="mt-8">
						<p className="text-sm text-white/60">
							We proberen je e-mail binnen 48 uur te beantwoorden.
						</p>
					</section>
				</div>
			</div>
		</div>
	);
}
