// MEET2 — Application form page.
// 5-step intake form, persisted to localStorage so refresh doesn't lose progress.
// Reuses tokens, Nav, Footer, T (bilingual helper) from shared.jsx.
const STORAGE_KEY = 'meet2.apply.v1';
const STEPS = [
{ key: 'basics', zh: '基本資料', en: 'Basics' },
{ key: 'about', zh: '關於你', en: 'About you' },
{ key: 'seeking', zh: '你尋覓的對象', en: 'Seeking' },
{ key: 'values', zh: '價值與生活', en: 'Values & life' },
{ key: 'finish', zh: '驗證與送出', en: 'Verify & submit' },
];
function ApplyForm() {
const [step, setStep] = React.useState(0);
const [data, setData] = React.useState(() => {
try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}; }
catch (e) { return {}; }
});
const [submitted, setSubmitted] = React.useState(false);
// Persist + scroll to top on step change.
React.useEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}, [data]);
React.useEffect(() => {
if (window.scrollY > 0) window.scrollTo({ top: 0, behavior: 'smooth' });
}, [step]);
const set = (key) => (val) => setData((d) => ({ ...d, [key]: val }));
const next = () => setStep((s) => Math.min(s + 1, STEPS.length - 1));
const back = () => setStep((s) => Math.max(s - 1, 0));
const submit = () => {
setSubmitted(true);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const reset = () => {
setData({}); setSubmitted(false); setStep(0);
localStorage.removeItem(STORAGE_KEY);
};
return (
{submitted ? (
) : (
<>
{step === 0 && }
{step === 1 && }
{step === 2 && }
{step === 3 && }
{step === 4 && }
{step < STEPS.length - 1 ? (
) : (
)}
)}
);
}
function ArrowA() {
return ;
}
function Lock() {
return ;
}
// ── Header ─────────────────────────────────────────────
function ApplyHeader({ step }) {
return (
請花 8 分鐘，
讓我們認識你。}
en={<>Eight minutes to begin
your search.} />
);
}
// ── Stepper rail (left column) ─────────────────────────
function StepperRail({ step, onJump }) {
return (
{STEPS.map((s, i) => {
const state = i < step ? 'done' : i === step ? 'active' : 'pending';
return (
- onJump(i)}>
{state === 'done' ? : `0${i + 1}`}
{s.en}
);
})}
);
}
function Check2() {
return ;
}
// ── Field primitives ───────────────────────────────────
function Field({ label, hint, required, children, span = 1 }) {
return (
);
}
function TextInput({ value = '', onChange, placeholder, type = 'text' }) {
return onChange(e.target.value)} placeholder={placeholder} />;
}
function Select({ value = '', onChange, options }) {
return (
);
}
function Chips({ value = [], onChange, options, single = false }) {
const arr = single ? (value ? [value] : []) : value;
const toggle = (v) => {
if (single) return onChange(v);
if (arr.includes(v)) onChange(arr.filter((x) => x !== v));
else onChange([...arr, v]);
};
return (
{options.map((o) => {
const v = typeof o === 'string' ? o : o.value;
const label = typeof o === 'string' ? o : o.label;
const on = arr.includes(v);
return (
);
})}
);
}
function TextArea({ value = '', onChange, placeholder, rows = 4, maxLength = 400 }) {
return (