Implement modals across create flow

app/create/screens/card/MembershipMethodsScreen.tsx

@@ -3,6 +3,12 @@
 /**
  * `membership-methods` step — Figma compact card stack (node `20858-13947`).
  * Registry: `CREATE_FLOW_SCREEN_REGISTRY["membership-methods"]`.
+ *
+ * Card click opens the Figma create modal (node `20858-13948`) with three
+ * editable sections — Eligibility & Philosophy, Joining Process, and
+ * Expectations & Removal. Section defaults come from
+ * `messages/en/create/membership.json` and will be replaced with DB-driven
+ * content.
  */
 
 import { useState, useCallback, useMemo } from "react";
@@ -12,11 +18,20 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+
+const SECTION_FIELDS = [
+  "eligibility",
+  "joiningProcess",
+  "expectations",
+] as const;
+type SectionField = (typeof SECTION_FIELDS)[number];
 
 const MEMBERSHIP_CARD_ORDER = [
   "open-access",
@@ -29,6 +44,55 @@ const MEMBERSHIP_CARD_ORDER = [
   "8",
 ] as const;
 
+function AddMembershipModalContent({
+  membershipCardId,
+}: {
+  membershipCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const mem = m.create.membership;
+  const modal =
+    membershipCardId in mem.modals
+      ? mem.modals[membershipCardId as keyof typeof mem.modals]
+      : null;
+  const defaults = modal?.sections ?? {
+    eligibility: "",
+    joiningProcess: "",
+    expectations: "",
+  };
+
+  const [sectionValues, setSectionValues] = useState<
+    Record<SectionField, string>
+  >(() => ({
+    eligibility: defaults.eligibility,
+    joiningProcess: defaults.joiningProcess,
+    expectations: defaults.expectations,
+  }));
+
+  const updateSection = useCallback(
+    (key: SectionField, value: string) => {
+      markCreateFlowInteraction();
+      setSectionValues((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {SECTION_FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={mem.sectionHeadings[field]}
+          rows={6}
+          value={sectionValues[field]}
+          onChange={(v) => updateSection(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
 export function MembershipMethodsScreen() {
   const m = useMessages();
   const mem = m.create.membership;
@@ -68,41 +132,55 @@ export function MembershipMethodsScreen() {
   ) : (
     <>
       {mem.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
         onClick={() => {
           markCreateFlowInteraction();
           setExpanded(true);
         }}
       >
         {mem.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
       {mem.page.compactDescriptionAfter}
     </>
   );
 
-  const modalConfig =
-    pendingCardId && pendingCardId in mem.modals
-      ? (() => {
-          const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: mem.confirmModal.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: mem.confirmModal.title,
-          description: mem.confirmModal.description,
-          nextButtonText: mem.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: mem.confirmModal.title,
+        description: mem.confirmModal.description,
+        nextButtonText: mem.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in mem.modals) {
+      const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: mem.addPlatform.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in mem.cards
+        ? mem.cards[pendingCardId as keyof typeof mem.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? mem.confirmModal.title,
+      description: cardRow?.supportText ?? mem.confirmModal.description,
+      nextButtonText: mem.addPlatform.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();
 
   const handleCardClick = useCallback(
     (id: string) => {
@@ -173,7 +251,15 @@ export function MembershipMethodsScreen() {
         showBackButton={modalConfig.showBackButton}
         currentStep={modalConfig.currentStep}
         totalSteps={modalConfig.totalSteps}
-      />
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddMembershipModalContent
+            key={pendingCardId}
+            membershipCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
     </CreateFlowStepShell>
   );
 }