"use client";

import { useEffect, useState } from "react";

const cmsDetails = [
	["Edition", "EpicNext"],
	["Interface", "Modern CMS"],
	["Runtime", "Next.js App Router"],
];

const credits = [
	["Remco", "EpicNext direction and development"],
	["Life", "Next.js architecture and CMS refinements"],
];

export function CmsInfoPopup() {
	const [open, setOpen] = useState(false);

	useEffect(() => {
		if (window.location.hash === "#cms-info") setOpen(true);
	}, []);

	useEffect(() => {
		if (!open) return;
		const onKeyDown = (event: KeyboardEvent) => {
			if (event.key === "Escape") setOpen(false);
		};
		document.addEventListener("keydown", onKeyDown);
		return () => document.removeEventListener("keydown", onKeyDown);
	}, [open]);

	return (
		<>
			<button
				type="button"
				className="cms-info-trigger"
				onClick={() => setOpen(true)}
			>
				EpicNext Info
			</button>
			{open ? (
				<div
					className="cms-info-backdrop"
					role="presentation"
					onMouseDown={() => setOpen(false)}
				>
					<section
						aria-labelledby="cms-info-title"
						aria-modal="true"
						className="cms-info-dialog"
						role="dialog"
						onMouseDown={(event) => event.stopPropagation()}
					>
						<button
							type="button"
							aria-label="Close CMS info"
							className="cms-info-close"
							onClick={() => setOpen(false)}
						>
							x
						</button>
						<div className="cms-info-kicker">CMS information</div>
						<h2 id="cms-info-title">EpicNext</h2>
						<div className="cms-info-badge">Modern Next.js CMS</div>
						<p className="cms-info-copy">
							A modern web layer for the hotel community, focused on fast
							navigation, clean administration, and a coherent EpicNext
							experience.
						</p>
						<dl className="cms-info-grid">
							{cmsDetails.map(([label, value]) => (
								<div key={label}>
									<dt>{label}</dt>
									<dd>{value}</dd>
								</div>
							))}
						</dl>
						<div className="cms-info-credit-list" aria-label="Credits">
							{credits.map(([name, role]) => (
								<div className="cms-info-credit" key={name}>
									<span>{name}</span>
									<small>{role}</small>
								</div>
							))}
						</div>
					</section>
				</div>
			) : null}
		</>
	);
}