feat: add CMS info footer popup

src/components/cms-info-popup.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const cmsDetails = [
+  ["Edition", "Next.js rebuild"],
+  ["Interface", "Public CMS"],
+  ["Runtime", "Next.js App Router"],
+];
+
+const credits = [
+  ["Remco", "AtomCMS direction and original project"],
+  ["Life", "Next.js experience 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)}>
+        CMS 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">AtomCMS</h2>
+            <div className="cms-info-badge">Next.js edition</div>
+            <p className="cms-info-copy">A modern web layer for the hotel community, focused on fast navigation, clean administration, and a familiar AtomCMS 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}
+    </>
+  );
+}