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

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

function SelectorPage() {
	const [hovered, setHovered] = useState<"kamp" | "openmic" | null>(null);
	const [mounted, setMounted] = useState(false);
	const [isMobile, setIsMobile] = useState(false);

	useEffect(() => {
		const check = () => setIsMobile(window.innerWidth < 640);
		check();
		window.addEventListener("resize", check, { passive: true });
		return () => window.removeEventListener("resize", check);
	}, []);

	useEffect(() => {
		const t = setTimeout(() => setMounted(true), 60);
		return () => clearTimeout(t);
	}, []);

	return (
		<div
			className="flex h-[100dvh] w-full flex-col sm:flex-row"
			style={{ gap: "6px", background: "#0a0a0a" }}
		>
			{/* ── Kamp Inschrijvingen ───────────────────────────────────────── */}
			<a
				href="https://ejv.be/jong/kampen/kunstenkamp/"
				target="_blank"
				rel="noopener noreferrer"
				className="group relative flex min-h-0 flex-col overflow-hidden"
				style={{
					flex: isMobile
						? "1 1 50%"
						: hovered === "openmic"
							? "0 0 30%"
							: hovered === "kamp"
								? "0 0 70%"
								: "1 1 50%",
					transition: "flex 0.65s cubic-bezier(0.76, 0, 0.24, 1)",
					background: "#214e51",
					textDecoration: "none",
				}}
				onMouseEnter={() => setHovered("kamp")}
				onMouseLeave={() => setHovered(null)}
				aria-label="Ga naar de kamp inschrijvingen op ejv.be"
			>
				{/* Diagonal stripe texture */}
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-0"
					style={{
						backgroundImage:
							"repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 28px)",
					}}
				/>

				{/* Mustard accent bar */}
				<div
					aria-hidden="true"
					className="absolute top-0 left-0 w-[3px]"
					style={{
						background: "#d09035",
						height: hovered === "kamp" ? "100%" : "0%",
						transition: "height 0.65s cubic-bezier(0.76, 0, 0.24, 1)",
					}}
				/>

				{/* Content — constrained width, centered */}
				<div className="relative z-10 my-auto w-full px-6 py-8 sm:px-10 sm:py-12">
					<div className="w-full max-w-sm">
						{/* Top eyebrow */}
						<p
							className="mb-3 font-['DM_Sans',sans-serif] text-[10px] uppercase tracking-[0.25em] sm:mb-4"
							style={{
								color: "#d09035",
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(-8px)",
								transition: "opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s",
							}}
						>
							Kunstenkamp
						</p>

						<h2
							className="font-['Intro',sans-serif] text-white uppercase leading-[0.88]"
							style={{
								fontSize: "clamp(1.6rem, 3.5vw, 2.8rem)",
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(16px)",
								transition: "opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s",
							}}
						>
							<span className="block whitespace-nowrap">Kamp</span>
							<span className="block whitespace-nowrap">Inschrijvingen</span>
						</h2>

						{/* Details */}
						<div
							className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 sm:mt-5 sm:gap-y-3"
							style={{
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(8px)",
								transition: "opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s",
							}}
						>
							<div>
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/40 uppercase tracking-[0.2em]">
									Leeftijd
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/80 text-xs leading-snug sm:text-sm">
									9<sup>*</sup>–18 jaar
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-[9px] text-white/35 italic">
									* geboortejaar dat je 10 wordt
								</p>
							</div>
							<div>
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/40 uppercase tracking-[0.2em]">
									Data
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/80 text-xs leading-snug sm:text-sm">
									20/07–25/07/2026
									<br />
									27/07–01/08/2026
								</p>
							</div>
							<div className="col-span-2">
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/40 uppercase tracking-[0.2em]">
									Locatie
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/80 text-xs leading-snug sm:text-sm">
									Camp de Limauges · Chemin de Bigaumont 2 · 1341 Ceroux-Mousty
								</p>
							</div>
						</div>

						{/* CTA */}
						<div
							className="mt-5 flex items-center gap-3 sm:mt-6"
							style={{
								opacity: mounted ? 1 : 0,
								transition: "opacity 0.8s ease 0.3s",
							}}
						>
							<div
								style={{
									height: "1px",
									background: "#d09035",
									width: hovered === "kamp" ? "72px" : "32px",
									transition: "width 0.5s cubic-bezier(0.76, 0, 0.24, 1)",
								}}
							/>
							<span
								className="font-['DM_Sans',sans-serif] text-[10px] uppercase tracking-[0.2em]"
								style={{ color: "#d09035" }}
							>
								Ga verder →
							</span>
						</div>
					</div>
				</div>

				{/* Corner decoration */}
				<div
					aria-hidden="true"
					className="pointer-events-none absolute right-0 bottom-0"
					style={{
						width: "clamp(60px, 15%, 140px)",
						height: "clamp(60px, 15%, 140px)",
						borderTop: "1px solid rgba(208,144,53,0.12)",
						borderLeft: "1px solid rgba(208,144,53,0.12)",
						transform: "translate(50%, 50%)",
					}}
				/>
			</a>

			{/* ── Open Mic Night ────────────────────────────────────────────── */}
			<Link
				to="/open-mic"
				className="group relative flex min-h-0 flex-col overflow-hidden"
				style={{
					flex: isMobile
						? "1 1 50%"
						: hovered === "kamp"
							? "0 0 30%"
							: hovered === "openmic"
								? "0 0 70%"
								: "1 1 50%",
					transition: "flex 0.65s cubic-bezier(0.76, 0, 0.24, 1)",
					background: "#d82560",
					textDecoration: "none",
				}}
				onMouseEnter={() => setHovered("openmic")}
				onMouseLeave={() => setHovered(null)}
				aria-label="Ga naar de Open Mic Night inschrijvingen"
			>
				{/* Diagonal stripe texture */}
				<div
					aria-hidden="true"
					className="pointer-events-none absolute inset-0"
					style={{
						backgroundImage:
							"repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 28px)",
					}}
				/>

				{/* White accent bar */}
				<div
					aria-hidden="true"
					className="absolute top-0 right-0 w-[3px]"
					style={{
						background: "rgba(255,255,255,0.7)",
						height: hovered === "openmic" ? "100%" : "0%",
						transition: "height 0.65s cubic-bezier(0.76, 0, 0.24, 1)",
					}}
				/>

				{/* Content — constrained width, centered */}
				<div className="relative z-10 my-auto w-full px-6 py-8 sm:px-10 sm:py-12">
					<div className="w-full max-w-sm">
						{/* Top eyebrow */}
						<p
							className="mb-3 font-['DM_Sans',sans-serif] text-[10px] text-white/50 uppercase tracking-[0.25em] sm:mb-4"
							style={{
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(-8px)",
								transition:
									"opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s",
							}}
						>
							Ongedesemd Woord
						</p>

						<h2
							className="font-['Intro',sans-serif] text-white uppercase leading-[0.88]"
							style={{
								fontSize: "clamp(1.6rem, 3.5vw, 2.8rem)",
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(16px)",
								transition:
									"opacity 0.8s ease 0.25s, transform 0.8s ease 0.25s",
							}}
						>
							<span className="block whitespace-nowrap">Open</span>
							<span className="block whitespace-nowrap">Mic Night</span>
						</h2>

						{/* Details */}
						<div
							className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 sm:mt-5"
							style={{
								opacity: mounted ? 1 : 0,
								transform: mounted ? "translateY(0)" : "translateY(8px)",
								transition:
									"opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s",
							}}
						>
							<div>
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/50 uppercase tracking-[0.2em]">
									Datum
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/90 text-xs leading-snug sm:text-sm">
									Vrijdag 24 april 2026
									<br />
									19u30
								</p>
							</div>
							<div>
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/50 uppercase tracking-[0.2em]">
									Optreden
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/90 text-xs leading-snug sm:text-sm">
									5 min podiumtijd
									<br />
									Alle kunstvormen
								</p>
							</div>
							<div className="col-span-2">
								<p className="font-['DM_Sans',sans-serif] text-[9px] text-white/50 uppercase tracking-[0.2em]">
									Locatie
								</p>
								<p className="mt-0.5 font-['DM_Sans',sans-serif] text-white/90 text-xs leading-snug sm:text-sm">
									Lange Winkelstraat 5 · 2000 Antwerpen
								</p>
							</div>
						</div>

						{/* CTA */}
						<div
							className="mt-5 flex items-center gap-3 sm:mt-6"
							style={{
								opacity: mounted ? 1 : 0,
								transition: "opacity 0.8s ease 0.35s",
							}}
						>
							<div
								style={{
									height: "1px",
									background: "rgba(255,255,255,0.7)",
									width: hovered === "openmic" ? "72px" : "32px",
									transition: "width 0.5s cubic-bezier(0.76, 0, 0.24, 1)",
								}}
							/>
							<span className="font-['DM_Sans',sans-serif] text-[10px] text-white/80 uppercase tracking-[0.2em]">
								Ga verder →
							</span>
						</div>
					</div>
				</div>
			</Link>
		</div>
	);
}
