Implement CiviCRM middleware form with stage-based visibility

- Initialize Next.js project with Tailwind CSS
- Create CiviCRM APIv4 integration layer
- Implement stage-based form visibility (stages 0-5)
- Add field mapping configuration for CRM-to-form linking
- Create API routes for data retrieval and submission
- Record form submissions as CiviCRM activities
- Support dynamic contactId and orgId via URL parameters
- Ensure robust form state management with react-hook-form

Co-authored-by: joelbrock <52835+joelbrock@users.noreply.github.com>

components/StageHeader.js

@@ -0,0 +1,38 @@
+'use client';
+
+import React from 'react';
+
+export default function StageHeader({ stage, currentOrgStage, isExpanded, onToggle }) {
+  const isLocked = stage.id > currentOrgStage;
+  const isPast = stage.id < currentOrgStage;
+  const isCurrent = stage.id === currentOrgStage;
+
+  return (
+    <div className={`border rounded-lg mb-4 overflow-hidden ${isLocked ? 'opacity-50' : ''}`}>
+      <button
+        type="button"
+        disabled={isLocked}
+        onClick={onToggle}
+        className={`w-full flex items-center justify-between p-4 text-left font-semibold ${
+          isCurrent ? 'bg-blue-50 text-blue-700' : 'bg-gray-50'
+        } ${isLocked ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
+      >
+        <div className="flex items-center space-x-3">
+          <span className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${
+            isPast ? 'bg-green-100 text-green-700' :
+            isCurrent ? 'bg-blue-600 text-white' :
+            'bg-gray-200 text-gray-500'
+          }`}>
+            {isPast ? '✓' : stage.id}
+          </span>
+          <span>{stage.label}</span>
+        </div>
+        {!isLocked && (
+          <span className="text-gray-400">
+            {isExpanded ? '−' : '+'}
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}