diff --git a/package-lock.json b/package-lock.json
index 036095a..1204bc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@iconify/json": "^2.2.373",
         "@iconify/utils": "^3.0.1",
         "@tailwindcss/forms": "^0.5.10",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.3.1"
       },
@@ -2686,6 +2687,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 409a968..01b5151 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@iconify/json": "^2.2.373",
     "@iconify/utils": "^3.0.1",
     "@tailwindcss/forms": "^0.5.10",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1"
   }
diff --git a/src/components/Field.astro b/src/components/Field.astro
index 462dc34..47ce164 100644
--- a/src/components/Field.astro
+++ b/src/components/Field.astro
@@ -89,7 +89,7 @@ const helpCls = "mt-2 text-sm text-gray-500 dark:text-neutral-500";
 const errCls = "text-sm text-red-600 mt-2";
 const groupCls = "relative flex items-stretch";
 const addonBase =
-    "px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
+    "px-4 inline-flex items-center min-w-fit rounded-md border border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
 const controlWrap = "relative";
 ---
 
@@ -144,8 +144,6 @@ const controlWrap = "relative";
                             }),
                             p.prefixText && "rounded-l-none",
                             p.suffixText && "rounded-r-none",
-                            p.iconLeft && "rounded-l-none",
-                            p.iconRight && "rounded-r-none",
                             p.error &&
                                 "border-danger focus-visible:ring-danger/40",
                         )}
@@ -217,8 +215,6 @@ const controlWrap = "relative";
                             "block w-full border border-gray-200 shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 file:bg-gray-50 file:border-0 file:me-4 file:py-3 file:px-4 dark:file:bg-neutral-700 dark:file:text-neutral-400",
                             p.prefixText && "rounded-l-none",
                             p.suffixText && "rounded-r-none",
-                            p.iconLeft && "rounded-l-none",
-                            p.iconRight && "rounded-r-none",
                             p.error &&
                                 "border-danger focus-visible:ring-danger/40",
                         )}
@@ -281,8 +277,6 @@ const controlWrap = "relative";
                             : p.size === "lg"
                               ? "text-base p-4"
                               : "text-sm p-3",
-                        p.iconLeft && "rounded-l-none",
-                        p.iconRight && "rounded-r-none",
                         p.error && "border-danger focus-visible:ring-danger/40",
                     )}
                     data-initial={typeof p.value === "string" ? p.value : ""}
@@ -309,9 +303,7 @@ const controlWrap = "relative";
                     }
                     class={cn(
                         selectBase({ size: p.size ?? "md" }),
-                        "appearance-none bg-[length:16px_16px] pr-9",
-                        p.iconLeft && "rounded-l-none",
-                        p.iconRight && "rounded-r-none",
+                        "appearance-none bg-none pr-9",
                         p.error && "border-danger focus-visible:ring-danger/40",
                     )}
                 >
diff --git a/src/components/MultiSelect.astro b/src/components/MultiSelect.astro
index 330edae..d409e85 100644
--- a/src/components/MultiSelect.astro
+++ b/src/components/MultiSelect.astro
@@ -18,12 +18,13 @@ interface Props extends HTMLAttributes<"div"> {
     required?: boolean;
     disabled?: boolean;
     options: Option[];
-    value?: string[]; // initial selected values
-    placeholder?: string; // shown when empty
-    searchable?: boolean; // show search box in dropdown
-    clearable?: boolean; // show clear (x) button
-    maxSelections?: number; // optional selection cap
+    value?: string[];
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    maxSelections?: number;
     size?: "sm" | "md" | "lg";
+    display?: "text" | "chips";
     class?: string;
 }
 
@@ -32,8 +33,9 @@ const p = Astro.props as Props;
 const fieldId = p.id ?? p.name;
 const descId = p.description ? `${fieldId}-desc` : undefined;
 const errId = `${fieldId}-err`;
+
 const selected = new Set(p.value ?? []);
-const summary = selected.size
+const summarySSR = selected.size
     ? Array.from(selected)
           .map((v) => p.options.find((o) => o.value === v)?.label ?? v)
           .join(", ")
@@ -47,11 +49,15 @@ const sizeCls =
           : "h-10 px-3 text-sm";
 
 const controlCls =
-    "py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";
+    "py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm " +
+    "focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none " +
+    "dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";
 
 const chipBase =
     "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
+
 const containerId = `ms-${Math.random().toString(36).slice(2)}`;
+const displayMode = p.display ?? "text";
 ---
 
 <div class={cn("space-y-1.5", p.class)} data-field={p.name} id={containerId}>
@@ -67,9 +73,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
     }
 
     <div class="relative">
-        {
-            /** Visible control is a readonly input so validation styles apply here */
-        }
         <input
             id={fieldId}
             type="text"
@@ -79,21 +82,28 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
             aria-describedby={[descId, p.error ? errId : undefined]
                 .filter(Boolean)
                 .join(" ") || undefined}
-            class={cn(controlCls, sizeCls, "pr-10 cursor-pointer")}
+            class={cn(
+                controlCls,
+                sizeCls,
+                "pr-10 cursor-pointer",
+                displayMode === "chips" && "pl-3",
+            )}
             placeholder={p.placeholder ?? "Select..."}
-            value={summary}
+            value={displayMode === "text" ? summarySSR : ""}
             readonly
             data-control
             {...p.disabled ? { disabled: true } : {}}
         />
 
-        {/** Chevron / Clear */}
         <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
             {
-                p.clearable !== false && selected.size > 0 && !p.disabled && (
+                p.clearable !== false && !p.disabled && (
                     <button
                         type="button"
-                        class="p-1 rounded hover:bg-muted"
+                        class={cn(
+                            "p-1 rounded hover:bg-muted",
+                            selected.size === 0 && "hidden",
+                        )}
                         data-ms-clear
                         aria-label="Clear selection"
                     >
@@ -111,28 +121,15 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
             </button>
         </div>
 
-        {
-            /** Selected chips (optional; comment out if you prefer only summary text) */
-        }
-        {
-            selected.size > 0 && (
-                <div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14">
-                    {Array.from(selected)
-                        .slice(0, 3)
-                        .map((v) => {
-                            const lab =
-                                p.options.find((o) => o.value === v)?.label ??
-                                v;
-                            return <span class={chipBase}>{lab}</span>;
-                        })}
-                    {selected.size > 3 && (
-                        <span class={chipBase}>+{selected.size - 3}</span>
-                    )}
-                </div>
-            )
-        }
+        <div
+            data-ms-chips
+            class={cn(
+                "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14",
+                displayMode === "chips" ? "" : "hidden",
+            )}
+        >
+        </div>
 
-        {/** Dropdown */}
         <div
             class="absolute border-border bg-popover text-popover-foreground shadow-lg hidden mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700"
             id={`${containerId}-panel`}
@@ -198,19 +195,25 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
                 <button
                     type="button"
                     class="text-sm text-primary hover:underline disabled:opacity-50"
-                    data-ms-select-all>Select all</button
+                    data-ms-select-all
                 >
+                    Select all
+                </button>
                 <div class="flex items-center gap-2">
                     <button
                         type="button"
                         class="text-sm text-muted-foreground hover:underline"
-                        data-ms-cancel>Cancel</button
+                        data-ms-cancel
                     >
+                        Cancel
+                    </button>
                     <button
                         type="button"
                         class="text-sm text-primary hover:underline"
-                        data-ms-apply>Apply</button
+                        data-ms-apply
                     >
+                        Apply
+                    </button>
                 </div>
             </div>
         </div>
@@ -236,6 +239,7 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
         fieldId,
         name: p.name,
         maxSelections: p.maxSelections ?? null,
+        displayMode,
     }}
 >
     const root = document.getElementById(containerId);
@@ -248,39 +252,72 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
     const btnCan = root.querySelector("[data-ms-cancel]");
     const btnApp = root.querySelector("[data-ms-apply]");
     const sch = root.querySelector("[data-ms-search]");
+    const chips = root.querySelector("[data-ms-chips]");
+
     const checks = Array.from(
         root.querySelectorAll(
             `input[type="checkbox"][name="${CSS.escape(name)}"]`,
         ),
     );
     let open = false;
+    const origPlaceholder = input.getAttribute("placeholder") || "Select...";
 
-    function setExpanded(
-        v,
-        { focusSearch = false, refocusInput = false } = {},
-    ) {
+    function setExpanded(v, { focusSearch = false } = {}) {
         open = v;
         input.setAttribute("aria-expanded", String(open));
         panel.classList.toggle("hidden", !open);
         if (open && focusSearch) sch?.focus();
-        if (!open && refocusInput) input.focus();
+    }
+
+    function makeChip(label) {
+        const span = document.createElement("span");
+        span.className =
+            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
+        span.textContent = label;
+        return span;
+    }
+
+    function toggleClear(show) {
+        if (!btnClr) return;
+        btnClr.classList.toggle("hidden", !show);
     }
 
     function updateSummary() {
         const selected = checks.filter((c) => c.checked);
-        const labels = selected
-            .slice(0, 3)
-            .map(
-                (c) =>
-                    c
-                        .closest("[data-ms-item]")
-                        ?.querySelector("span")
-                        ?.textContent?.trim() || c.value,
-            );
-        const extra = Math.max(0, selected.length - 3);
-        input.value = selected.length
-            ? labels.join(", ") + (extra ? ` +${extra}` : "")
-            : "";
+        const labels = selected.map(
+            (c) =>
+                c
+                    .closest("[data-ms-item]")
+                    ?.querySelector("span")
+                    ?.textContent?.trim() || c.value,
+        );
+
+        if (displayMode === "text") {
+            const preview = labels.slice(0, 3).join(", ");
+            const extra = Math.max(0, labels.length - 3);
+            input.value = labels.length
+                ? preview + (extra ? ` +${extra}` : "")
+                : "";
+            input.placeholder = labels.length ? "" : origPlaceholder;
+            if (chips) {
+                chips.innerHTML = "";
+                chips.classList.add("hidden");
+            }
+        } else {
+            input.value = "";
+            input.placeholder = labels.length ? "" : origPlaceholder;
+            if (!chips) return;
+            chips.innerHTML = "";
+            const max = 3;
+            labels
+                .slice(0, max)
+                .forEach((lab) => chips.appendChild(makeChip(lab)));
+            const extra = labels.length - max;
+            if (extra > 0) chips.appendChild(makeChip(`+${extra}`));
+            chips.classList.toggle("hidden", labels.length === 0);
+        }
+
+        toggleClear(labels.length > 0);
     }
 
     function enforceMax() {
@@ -308,7 +345,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
         updateSummary();
     }
 
-    // Open/close
     btnTgl?.addEventListener("click", () =>
         setExpanded(!open, { focusSearch: !open }),
     );
@@ -322,21 +358,20 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
         }
     });
 
-    // Actions
     btnClr?.addEventListener("click", (e) => {
         e.stopPropagation();
         clearAll();
     });
     btnAll?.addEventListener("click", selectAll);
-    btnCan?.addEventListener("click", () => setExpanded(false)); // no refocus
-    btnApp?.addEventListener("click", () => setExpanded(false)); // no refocus
+    btnCan?.addEventListener("click", () => setExpanded(false));
+    btnApp?.addEventListener("click", () => setExpanded(false));
+
     list.addEventListener("change", () => {
         enforceMax();
         updateSummary();
         input.dispatchEvent(new Event("change", { bubbles: true }));
     });
 
-    // Search filter
     sch?.addEventListener("input", () => {
         const q = sch.value.trim().toLowerCase();
         root.querySelectorAll("[data-ms-item]").forEach((li) => {
@@ -345,12 +380,10 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
         });
     });
 
-    // Close on outside click without refocusing input
     document.addEventListener("click", (e) => {
-        if (!root.contains(e.target)) setExpanded(false); // note: no refocusInput
+        if (!root.contains(e.target)) setExpanded(false);
     });
 
-    // Init
     enforceMax();
     updateSummary();
 </script>
diff --git a/src/pages/forms2.astro b/src/pages/forms2.astro
index f5d738d..02b8e95 100644
--- a/src/pages/forms2.astro
+++ b/src/pages/forms2.astro
@@ -1,105 +1,155 @@
 ---
-import Form from "../components/Form.astro";
-import Field from "../components/Field.astro";
+import { Form, Field, MultiSelect } from "@wrnexus/astro";
 import Base from "../layouts/Base.astro";
-import MultiSelect from "../components/MultiSelect.astro";
 ---
 
 <Base class="p-4">
     <Form
-        title="Create Project"
-        description="Project metadata, constraints, and attachments."
+        title="Job Application"
+        description="Tell us about yourself. Fields marked * are required."
         columns={2}
         schemaName="schema"
         onSubmit="submit"
-        submitLabel="Create Project"
-        submitIcon="mdi:check"
-        actionsAlign="center"
+        submitLabel="Submit Application"
+        submitIcon="mdi:send"
+        actionsAlign="end"
         resetOnSubmit
-        validateOn="blur,change,input"
+        validateOn="input,blur,change"
     >
+        <!-- Applicant -->
         <Field
-            name="projectName"
-            label="Project name"
+            name="firstName"
+            label="First name"
             required
-            iconLeft="mdi:briefcase"
+            iconLeft="mdi:account"
         />
         <Field
-            name="slug"
-            label="Slug"
-            prefixText="https://app.example.com/p/"
-            placeholder="acme-crm"
+            name="lastName"
+            label="Last name"
             required
+            iconLeft="mdi:account"
+        />
+
+        <Field
+            name="email"
+            label="Email"
+            kind="email"
+            required
+            iconLeft="mdi:email"
+        />
+        <Field
+            name="phone"
+            label="Phone"
+            placeholder="+91 98765 43210"
+            iconLeft="mdi:phone"
+        />
+
+        <Field
+            name="portfolio"
+            label="Portfolio URL"
+            kind="text"
+            placeholder="https://example.com"
             iconLeft="mdi:link-variant"
+            class="sm:col-span-2"
         />
 
+        <!-- Role details -->
         <Field
-            name="teamSize"
-            label="Team size"
-            kind="number"
-            placeholder="e.g., 8"
+            name="role"
+            label="Desired role"
+            kind="select"
+            placeholder="Select a role"
+            options={[
+                { value: "frontend", label: "Frontend Engineer" },
+                { value: "backend", label: "Backend Engineer" },
+                { value: "fullstack", label: "Full-stack Engineer" },
+                { value: "designer", label: "Product Designer" },
+            ]}
             required
-            iconLeft="mdi:account-group"
-        />
-        <Field
-            name="budget"
-            label="Budget (USD)"
-            kind="number"
-            placeholder="Optional"
-            iconLeft="mdi:currency-usd"
         />
 
-        <Field name="startDate" label="Start date" kind="date" required />
-        <Field name="kickoffTime" label="Kickoff time" kind="time" required />
+        <Field
+            name="experience"
+            label="Years of experience"
+            kind="number"
+            placeholder="e.g., 3"
+            suffixText="yrs"
+            required
+        />
 
         <MultiSelect
-            name="tags"
-            label="Tags"
+            name="skills"
+            label="Key skills"
+            placeholder="Pick skills"
+            searchable
+            clearable
+            maxSelections={6}
+            value={["javascript"]}
             options={[
-                { value: "web", label: "Web" },
-                { value: "mobile", label: "Mobile" },
-                { value: "api", label: "API" },
-                { value: "ml", label: "ML" },
-                { value: "ops", label: "Ops" },
+                { value: "javascript", label: "JavaScript" },
+                { value: "typescript", label: "TypeScript" },
+                { value: "react", label: "React" },
+                { value: "node", label: "Node.js" },
+                { value: "astro", label: "Astro" },
+                { value: "css", label: "CSS" },
+                { value: "figma", label: "Figma" },
             ]}
-            description="Use Ctrl/Cmd to pick multiple."
             class="sm:col-span-2"
-            required
+            description="Choose up to 6."
         />
 
         <Field
-            name="visibility"
-            label="Visibility"
+            name="availableFrom"
+            label="Available from"
+            kind="date"
+            required
+        />
+        <Field name="preferredCall" label="Preferred call time" kind="time" />
+
+        <!-- Work auth -->
+        <Field
+            name="workAuth"
+            label="Work Authorization"
             kind="radio"
-            value="private"
+            value="authorized"
             class="sm:col-span-2"
             options={[
-                { value: "private", label: "Private" },
-                { value: "internal", label: "Internal" },
-                { value: "public", label: "Public" },
+                { value: "authorized", label: "Authorized to work" },
+                { value: "requiresVisa", label: "Requires visa sponsorship" },
             ]}
         />
 
+        <!-- Compensation -->
         <Field
-            name="attachments"
-            label="Attachments"
+            name="salary"
+            label="Expected CTC"
+            kind="number"
+            prefixText="₹"
+            suffixText="LPA"
+            placeholder="e.g., 12"
+            class="sm:col-span-2"
+        />
+
+        <!-- Resume/Cover -->
+        <Field
+            name="resume"
+            label="Resume (PDF)"
             kind="file"
-            multiple
             class="sm:col-span-2"
         />
         <Field
-            name="description"
-            label="Description"
+            name="coverLetter"
+            label="Cover letter"
             kind="textarea"
-            rows={5}
-            placeholder="What are we building?"
+            rows={6}
+            placeholder="A short note about why you’d be a great fit…"
             class="sm:col-span-2"
-            required
         />
+
         <Field
-            name="notify"
-            label="Notify team on create"
-            kind="switch"
+            name="agree"
+            label="I confirm the information provided is accurate"
+            kind="checkbox"
             class="sm:col-span-2"
         />
     </Form>
@@ -108,46 +158,72 @@ import MultiSelect from "../components/MultiSelect.astro";
 <script>
     import { z } from "zod";
 
-    const fileArray = z.array(z.instanceof(File)).optional();
+    const phoneRegex = /^\+?[0-9\s().-]{7,20}$/i;
+    const urlRegex = /^https?:\/\/.+/i;
 
-    window.schema = z.object({
-        projectName: z.string().min(3, "Enter at least 3 characters."),
-        slug: z
-            .string()
-            .regex(
-                /^[a-z0-9-]{3,}$/i,
-                "Slug must be 3+ chars; letters, digits, hyphen.",
-            ),
-        teamSize: z.coerce.number().int().min(1, "Team size must be ≥ 1."),
-        budget: z.coerce
-            .number()
-            .positive("Budget must be positive.")
-            .optional()
-            .or(z.nan().transform(() => undefined)),
-        startDate: z.string().min(1, "Start date is required."),
-        kickoffTime: z.string().min(1, "Kickoff time is required."),
-        tags: z.array(z.string()).min(1, "Pick at least one tag."),
-        visibility: z.enum(["private", "internal", "public"], {
-            required_error: "Choose a visibility.",
-        }),
-        // attachments -> array<File> (from our collector when multiple)
-        attachments: fileArray
-            .refine((arr) => !arr || arr.length <= 3, "Max 3 files.")
-            .refine(
-                (arr) => !arr || arr.every((f) => f.size <= 5 * 1024 * 1024),
-                "Files must be ≤ 5MB.",
-            )
-            .refine(
-                (arr) =>
-                    !arr || arr.every((f) => /pdf|png|jpg|jpeg/i.test(f.type)),
-                "Only PDF/PNG/JPG.",
-            ),
-        description: z.string().min(20, "Describe the project (20+ chars)."),
-        notify: z.boolean().optional(),
-    });
+    const resumeSchema = z
+        .union([z.instanceof(File), z.null()])
+        .refine(
+            (f) => f === null || /pdf$/i.test(f.type),
+            "Resume must be a PDF.",
+        )
+        .refine(
+            (f) => f === null || f.size <= 5 * 1024 * 1024,
+            "Max file size is 5MB.",
+        )
+        .optional();
+
+    window.schema = z
+        .object({
+            firstName: z.string().min(2, "Enter at least 2 characters."),
+            lastName: z.string().min(2, "Enter at least 2 characters."),
+            email: z.string().email("Enter a valid email."),
+            phone: z
+                .string()
+                .regex(phoneRegex, "Enter a valid phone.")
+                .optional()
+                .or(z.literal("")),
+            portfolio: z
+                .string()
+                .regex(urlRegex, "Enter a valid URL (http/https).")
+                .optional()
+                .or(z.literal("")),
+            role: z.enum(["frontend", "backend", "fullstack", "designer"], {
+                required_error: "Select a role.",
+            }),
+            experience: z.coerce.number().int().min(0, "Must be 0 or more."),
+            skills: z
+                .array(z.string())
+                .min(1, "Pick at least one skill.")
+                .max(6, "Up to 6 skills."),
+            availableFrom: z.string().min(1, "Pick a date."),
+            preferredCall: z.string().optional().or(z.literal("")),
+            workAuth: z.enum(["authorized", "requiresVisa"]),
+            salary: z.coerce
+                .number()
+                .positive("Enter a positive number.")
+                .optional(),
+            resume: resumeSchema,
+            coverLetter: z
+                .string()
+                .max(1000, "Keep it under 1000 characters.")
+                .optional()
+                .or(z.literal("")),
+            agree: z.literal(true, {
+                errorMap: () => ({ message: "You must confirm to proceed." }),
+            }),
+        })
+        .superRefine((obj, ctx) => {
+            if (obj.workAuth === "requiresVisa" && !obj.coverLetter) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["coverLetter"],
+                    message: "Please add a note about your visa status.",
+                });
+            }
+        });
 
     window.submit = async (data: any, form: any) => {
-        console.log("Project Create submit:", data);
-        await new Promise((r) => setTimeout(r, 800));
+        console.log("Application:", data);
     };
 </script>