Build standalone CiviCRM check-in middleware

app/page.tsx

@@ -1,23 +1,60 @@
-'use client';
+import { Suspense } from "react";
+import { EngagementForm } from "@/components/EngagementForm";
+import { SiteHeader, SiteFooter } from "@/components/SiteChrome";
+import { formConfig } from "@/config/form";
 
-import { useSearchParams } from 'next/navigation';
-import StageForm from '@/components/StageForm';
-import { Suspense } from 'react';
-
-function FormContainer() {
-  const searchParams = useSearchParams();
-  const contactId = searchParams.get('contactId') || '2';
-  const orgId = searchParams.get('orgId') || '1';
-
-  return <StageForm contactId={contactId} orgId={orgId} />;
+interface PageProps {
+  searchParams: Promise<{ cid?: string; cs?: string }>;
 }
 
-export default function Home() {
+export default async function Page({ searchParams }: PageProps) {
+  const { cid, cs } = await searchParams;
+
   return (
-    <main className="min-h-screen bg-gray-100 py-12">
-      <Suspense fallback={<div className="text-center">Loading...</div>}>
-        <FormContainer />
-      </Suspense>
-    </main>
+    <>
+      <SiteHeader />
+      <main id="main" className="flex-1 bg-stone-50">
+        <a
+          href="#main"
+          className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:rounded focus:bg-white focus:px-3 focus:py-2 focus:shadow"
+        >
+          Skip to content
+        </a>
+        <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12">
+          <header className="mb-8">
+            <h1 className="text-2xl font-semibold text-stone-900 sm:text-3xl">
+              {formConfig.title}
+            </h1>
+            {formConfig.subtitle && (
+              <p className="mt-2 text-stone-700 leading-relaxed">{formConfig.subtitle}</p>
+            )}
+          </header>
+
+          {!cid || !cs ? (
+            <MissingLinkParams />
+          ) : (
+            <Suspense fallback={null}>
+              <EngagementForm config={formConfig} cid={cid} cs={cs} />
+            </Suspense>
+          )}
+        </div>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+function MissingLinkParams() {
+  return (
+    <div
+      role="alert"
+      className="rounded-xl border border-amber-200 bg-amber-50 px-6 py-6 text-amber-900"
+    >
+      <h2 className="text-lg font-semibold">This link is missing required information.</h2>
+      <p className="mt-2 leading-relaxed">
+        Open the form using the personalized link from your email. If you no longer have it,
+        please contact your engagement coordinator and ask for a fresh link.
+      </p>
+    </div>
   );
 }