// pages2.jsx — Questionnaire, Upsell, Final

// =============================================================================
// 4. QUESTIONNAIRE — dynamic, sectioned
// =============================================================================
function ageFromDobString(dob) {
  if (!dob || dob.length !== 8) return 47;
  const day = Number(dob.slice(0, 2));
  const month = Number(dob.slice(2, 4)) - 1;
  const year = Number(dob.slice(4, 8));
  const birth = new Date(year, month, day);
  const today = new Date(2026, 3, 27);
  let age = today.getFullYear() - birth.getFullYear();
  const beforeBirthday = today.getMonth() < birth.getMonth() || (today.getMonth() === birth.getMonth() && today.getDate() < birth.getDate());
  if (beforeBirthday) age -= 1;
  return Number.isFinite(age) ? age : 47;
}

function QuestionnairePage({ lang, state, setState, onBack, onNext }) {
  const [section, setSection] = React.useState(0);

  const a = state.answers;
  const patientAge = ageFromDobString(state.dob);
  const setA = (patch) => setState(p => ({ ...p, answers: { ...p.answers, ...patch } }));
  const toggleArr = (key, val) => {
    const cur = a[key] || [];
    const nx = cur.includes(val) ? cur.filter(x => x !== val) : [...cur, val];
    setA({ [key]: nx });
  };

  const visibleSections = Q_SECTIONS.filter(s => {
    if (s.id === "femaleHealth") return a.gender === "female" && patientAge >= 18;
    if (s.id === "childHealth") return patientAge < 18 || a.childAttending === "yes";
    return true;
  });
  const totalSections = visibleSections.length;
  const currentSection = visibleSections[Math.min(section, totalSections - 1)];

  const goNext = () => {
    const nxt = section + 1;
    if (nxt >= totalSections) onNext();
    else setSection(nxt);
  };
  const goBack = () => {
    const prv = section - 1;
    if (prv < 0) onBack();
    else setSection(prv);
  };

  return (
    <div className="page-inner">
      <div className="page-body">
        <div className="q-wrap">
          <aside className="q-side">
            <div className="q-side-progress">
              <strong>{(section + 1).toString().padStart(2, "0")}</strong>
              <span>of {visibleSections.length} sections · 共 {visibleSections.length} 部分</span>
            </div>
            <div className="q-bar">
              <div className="q-bar-fill" style={{ width: `${((section+1)/visibleSections.length)*100}%` }}/>
            </div>
            <div className="q-section-list">
              {visibleSections.map((s, i) => {
                const cls = i === section ? "active" : i < section ? "done" : "";
                return (
                  <div key={s.id} className={"q-section " + cls}>
                    <span className="dot"/>
                    {s.en}
                    <span className="tc">{s.tc}</span>
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 32, padding: "18px 0", borderTop: "1px solid var(--line-soft)", fontSize: 11, color: "var(--ink-mute)", lineHeight: 1.6 }}>
              <Icon.Spark style={{ marginRight: 6, color: "var(--gold-deep)", verticalAlign: "middle" }}/>
              Your answers help our team highlight relevant care options.
              <br/>
              <span style={{ fontFamily: "var(--sans-tc)" }}>您的答案有助醫護團隊提供合適的跟進建議。</span>
            </div>
          </aside>

          <div className="q-main">
            <div className="q-header">
              <div>
                <div className="q-eyebrow">{currentSection.en} · {currentSection.tc}</div>
              </div>
              <div className="q-header-num">— {(section+1).toString().padStart(2,"0")} / {totalSections.toString().padStart(2,"0")}</div>
            </div>

            {/* SECTION CONTENT */}
            {currentSection.id === "preexam" && <SecPreExam a={a} setA={setA}/>}
            {currentSection.id === "femaleHealth" && <SecFemaleHealth a={a} setA={setA}/>}
            {currentSection.id === "recent" && <SecRecent a={a} toggleArr={toggleArr}/>}
            {currentSection.id === "childHealth" && <SecChildHealth a={a} setA={setA} patientAge={patientAge}/>}
            {currentSection.id === "history" && <SecHistory a={a} toggleArr={toggleArr}/>}
            {currentSection.id === "ultrasound" && <SecUltrasound a={a} setA={setA} toggleArr={toggleArr}/>}
            {currentSection.id === "safety" && <SecSafety a={a} setA={setA} toggleArr={toggleArr}/>}
            {currentSection.id === "review" && <SecReview a={a} patientAge={patientAge}/>}
          </div>
        </div>
      </div>
      <PageFoot
        onBack={goBack}
        onNext={goNext}
        nextLabel={section === totalSections - 1 ? "Review care options" : "Continue"}
        nextLabelTc={section === totalSections - 1 ? "查看跟進建議" : "繼續"}
        secondary={
          <span style={{ fontSize: 11, color: "var(--ink-mute)" }}>
            Section {section+1} of {totalSections} · 第 {section+1} 部分 / 共 {totalSections} 部分
          </span>
        }
      />
    </div>
  );
}

// ---- Section components ------------------------------------------------------
function QQ({ en, tc }) {
  return (
    <>
      <h2 className="q-question">{en}</h2>
      <div className="q-question-tc">{tc}</div>
    </>
  );
}
function OptCard({ selected, onClick, en, tc, icon, checkbox = false }) {
  return (
    <button className={"opt-card" + (checkbox ? " checkbox" : "") + (selected ? " selected" : "")} onClick={onClick}>
      {icon && <span className="opt-icon">{icon}</span>}
      <span className="opt-mark">{selected && <Icon.Check/>}</span>
      <span className="opt-body">
        <span className="opt-en">{en}</span>
        <span className="opt-tc">{tc}</span>
      </span>
    </button>
  );
}

function YesNo({ value, onChange }) {
  return (
    <div className="opt-grid cols-2" style={{ maxWidth: 460 }}>
      <OptCard selected={value === "yes"} onClick={() => onChange("yes")} en="Yes" tc="是"/>
      <OptCard selected={value === "no"} onClick={() => onChange("no")} en="No" tc="否"/>
    </div>
  );
}

function SecPreExam({ a, setA }) {
  return (
    <div className="q-stack">
      <div>
        <QQ en="Have you ever experienced dizziness, light-headedness, or syncope during medical procedures or blood taking?" tc="曾否於醫療程序或抽血時出現頭暈、暈眩或昏厥？"/>
        <YesNo value={a.procedureDizziness} onChange={(v) => setA({ procedureDizziness: v })}/>
      </div>
      <div>
        <QQ en="Have you ever been diagnosed with hypertension or hypotension?" tc="曾否被診斷有高血壓或低血壓？"/>
        <YesNo value={a.bpHistory} onChange={(v) => setA({ bpHistory: v })}/>
      </div>
    </div>
  );
}

function SecFemaleHealth({ a, setA }) {
  return (
    <div className="q-stack">
      <div>
        <QQ en="Female patients: have you undergone menopause?" tc="女性適用：是否已停經？"/>
        <YesNo value={a.menopause} onChange={(v) => setA({ menopause: v })}/>
      </div>
      <div>
        <QQ en="First day of last menstrual period" tc="最後一次月經第一日"/>
        <div className="opt-grid cols-2" style={{ maxWidth: 620 }}>
          <OptCard selected={a.lmp === "<1m"} onClick={() => setA({ lmp: "<1m" })} en="Within 1 month" tc="1 個月內"/>
          <OptCard selected={a.lmp === "1-3m"} onClick={() => setA({ lmp: "1-3m" })} en="1 to 3 months ago" tc="1 至 3 個月前"/>
          <OptCard selected={a.lmp === ">3m"} onClick={() => setA({ lmp: ">3m" })} en="More than 3 months ago" tc="超過 3 個月前"/>
          <OptCard selected={a.lmp === "na"} onClick={() => setA({ lmp: "na" })} en="Not applicable" tc="不適用"/>
        </div>
      </div>
      <div>
        <QQ en="Average days between periods" tc="平均月經週期日數"/>
        <div className="opt-grid cols-3" style={{ maxWidth: 620 }}>
          <OptCard selected={a.cycleDays === "28"} onClick={() => setA({ cycleDays: "28" })} en="Around 28 days" tc="約 28 日"/>
          <OptCard selected={a.cycleDays === "35"} onClick={() => setA({ cycleDays: "35" })} en="Around 35 days" tc="約 35 日"/>
          <OptCard selected={a.cycleDays === "irregular"} onClick={() => setA({ cycleDays: "irregular" })} en="Irregular / unsure" tc="不規律 / 不確定"/>
        </div>
      </div>
      <div>
        <QQ en="Is your menstrual cycle clearly irregular, with a difference of more than 7 days?" tc="月經週期是否明顯不規律（相差超過 7 天）？"/>
        <YesNo value={a.irregularCycle} onChange={(v) => setA({ irregularCycle: v })}/>
      </div>
      <div>
        <QQ en="When was your last Pap smear?" tc="上次子宮頸抹片檢查是何時？"/>
        <div className="opt-grid cols-3" style={{ maxWidth: 700 }}>
          <OptCard selected={a.papOverdue === "recent"} onClick={() => setA({ papOverdue: "recent" })} en="Within 3 years" tc="3 年內"/>
          <OptCard selected={a.papOverdue === "overdue"} onClick={() => setA({ papOverdue: "overdue" })} en="More than 3 years ago" tc="超過 3 年前"/>
          <OptCard selected={a.papOverdue === "never"} onClick={() => setA({ papOverdue: "never" })} en="Never had one" tc="未曾做過"/>
        </div>
      </div>
      <div>
        <QQ en="Are you planning to become pregnant within the next year?" tc="是否計劃在未來一年內懷孕？"/>
        <YesNo value={a.pregnancyPlan} onChange={(v) => setA({ pregnancyPlan: v })}/>
      </div>
      <div>
        <QQ en="Have you recently had bleeding outside your period or abnormal vaginal discharge?" tc="近期是否出現非月經期間陰道出血或不正常分泌物？"/>
        <YesNo value={a.abnormalBleeding} onChange={(v) => setA({ abnormalBleeding: v })}/>
      </div>
      <div>
        <QQ en="Have you had hot flashes, night sweats, or significant mood changes?" tc="是否出現潮熱、夜間盜汗或明顯情緒波動？"/>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 16 }}>Asked for patients aged 40 or above · 適用於 40 歲或以上</div>
        <YesNo value={a.menopauseSymptoms} onChange={(v) => setA({ menopauseSymptoms: v })}/>
      </div>
      <div>
        <QQ en="Do you have persistent lower abdominal pain or pain during intercourse?" tc="是否有持續下腹痛或性交時疼痛？"/>
        <YesNo value={a.pelvicPain} onChange={(v) => setA({ pelvicPain: v })}/>
      </div>
      <div>
        <QQ en="Do you have a breast lump, breast pain, or abnormal nipple discharge?" tc="乳房是否有硬塊、疼痛或乳頭有異常分泌物？"/>
        <YesNo value={a.breastSymptom} onChange={(v) => setA({ breastSymptom: v })}/>
      </div>
    </div>
  );
}

function SecRecent({ a, toggleArr }) {
  const conds = [
    { k: "syncope", en: "Unexplained syncope or transient loss of consciousness", tc: "不明原因昏厥或短暫失去知覺" },
    { k: "hyperlipidaemia", en: "Hyperlipidaemia / high cholesterol", tc: "高血脂 / 高膽固醇" },
    { k: "chestArrhythmia", en: "Chest pain, chest tightness, or cardiac arrhythmia", tc: "胸痛、胸口翳悶或心律不正" },
    { k: "shortBreath", en: "Shortness of breath during routine activities", tc: "日常活動時氣促" },
    { k: "smoking", en: "Current smoking status", tc: "現時吸煙" },
    { k: "abdominalPain", en: "Persistent abdominal discomfort or epigastric pain", tc: "持續腹部不適或上腹痛" },
    { k: "diarrhoeaBloating", en: "Frequent diarrhoea, abdominal bloating, or colicky pain", tc: "經常腹瀉、腹脹或絞痛" },
    { k: "bloodStool", en: "Blood in stool or black stool", tc: "便血或黑便" },
    { k: "constipation", en: "Constipation", tc: "便秘" },
    { k: "diabetes", en: "History of diabetes mellitus", tc: "糖尿病病史" },
    { k: "weightChange", en: "Unintentional weight change exceeding 10 pounds", tc: "非刻意體重變化超過 10 磅" },
    { k: "hepBCarrier", en: "Hepatitis B carrier status", tc: "乙型肝炎帶菌者" },
    { k: "hepBVaccine", en: "History of Hepatitis B vaccination", tc: "曾接種乙型肝炎疫苗" },
  ];
  return (
    <div className="q-stack">
      <div>
        <QQ en="Please select any recent health status items that apply in the past 12 months" tc="請選擇過去 12 個月適用的健康狀況"/>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 16 }}>Select all that apply · 可選多項</div>
        <div className="opt-grid cols-2" style={{ maxWidth: 700 }}>
          {conds.map(c => (
            <OptCard key={c.k} checkbox selected={(a.conditions||[]).includes(c.k)}
              onClick={() => toggleArr("conditions", c.k)} en={c.en} tc={c.tc}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function SecChildHealth({ a, setA, patientAge }) {
  const patientIsChild = patientAge < 18;
  const hasChild = patientIsChild || a.childAttending === "yes";
  return (
    <div className="q-stack">
      {patientIsChild ? (
        <div style={{ padding: "18px 20px", borderRadius: 14, background: "var(--gold-soft)", border: "1px solid var(--line-soft)", color: "var(--ink-soft)", fontSize: 13, lineHeight: 1.6, maxWidth: 700 }}>
          This patient is under 18, so the child health questions apply to the patient.
          <br/>
          <span style={{ fontFamily: "var(--sans-tc)" }}>此受檢者未滿 18 歲，因此以下兒童健康問題適用於受檢者本人。</span>
        </div>
      ) : (
        <div>
          <QQ en="Is a child under 18 also attending for examination today?" tc="今次是否有 18 歲以下小童同時進行檢查？"/>
          <YesNo value={a.childAttending} onChange={(v) => setA({ childAttending: v })}/>
        </div>
      )}
      {hasChild ? (
        <>
          <div>
            <QQ en="Does the child have recurrent respiratory infections, asthma, eczema, or food allergy?" tc="小童是否有反覆呼吸道感染、哮喘、濕疹或食物過敏？"/>
            <YesNo value={a.childAllergy} onChange={(v) => setA({ childAllergy: v })}/>
          </div>
          <div>
            <QQ en="Are you concerned about the child's growth, development, or weight?" tc="家長對小童的生長發育或體重是否有擔憂？"/>
            <YesNo value={a.childGrowth} onChange={(v) => setA({ childGrowth: v })}/>
          </div>
          <div>
            <QQ en="Is the child's language, social, or motor development slower than children of similar age?" tc="小童的語言、社交或動作發展是否比同齡兒童慢？"/>
            <YesNo value={a.childDevelopment} onChange={(v) => setA({ childDevelopment: v })}/>
          </div>
        </>
      ) : (
        <div style={{ padding: "18px 20px", borderRadius: 14, background: "var(--bg-soft)", border: "1px solid var(--line-soft)", color: "var(--ink-mute)", fontSize: 13, lineHeight: 1.6, maxWidth: 700 }}>
          Child-specific questions are skipped because no child is attending today.
          <br/>
          <span style={{ fontFamily: "var(--sans-tc)" }}>由於今天沒有小童同時受檢，兒童健康問題將不適用。</span>
        </div>
      )}
    </div>
  );
}

function SecPast({ a, toggleArr }) {
  const items = [
    { k: "hospitalSurgery", en: "Hospital admission or surgical procedure", tc: "曾入院或接受手術" },
    { k: "cosmeticBreast", en: "Cosmetic breast procedure", tc: "隆胸等美容程序" },
    { k: "allergy", en: "Known drug or food allergy", tc: "已知藥物或食物敏感" },
    { k: "medications", en: "Currently taking medications or supplements", tc: "現正服用藥物或補充品" },
    { k: "otherHistory", en: "Other relevant medical history", tc: "其他相關病歷" },
  ];
  return (
    <div className="q-stack">
      <div>
        <QQ en="Past medical history" tc="過往病歷"/>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 16 }}>Select all that apply · 可選多項</div>
        <div className="opt-grid cols-2" style={{ maxWidth: 760 }}>
          {items.map(c => (
            <OptCard key={c.k} checkbox selected={(a.pastHistory||[]).includes(c.k)}
              onClick={() => toggleArr("pastHistory", c.k)} en={c.en} tc={c.tc}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function SecFamily({ a, toggleArr }) {
  const family = [
    { k: "famColon", en: "Colorectal cancer", tc: "大腸癌" },
    { k: "famBreast", en: "Breast cancer", tc: "乳癌" },
    { k: "famLiver", en: "Liver cancer", tc: "肝癌" },
    { k: "famGastric", en: "Gastric cancer", tc: "胃癌" },
    { k: "famOtherCancer", en: "Other malignancies", tc: "其他惡性腫瘤" },
    { k: "famDiabetes", en: "Diabetes mellitus", tc: "糖尿病" },
    { k: "famHypertension", en: "Hypertension", tc: "高血壓" },
    { k: "famIHD", en: "Ischaemic heart disease", tc: "缺血性心臟病" },
    { k: "famStroke", en: "Stroke", tc: "中風" },
    { k: "famHyperlipidaemia", en: "Hyperlipidaemia", tc: "高血脂" },
    { k: "famHereditary", en: "Other hereditary conditions", tc: "其他遺傳性疾病" },
  ];
  return (
    <div className="q-stack">
      <div>
        <QQ en="Family medical history in first-degree relatives" tc="一等親家族病歷"/>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 16 }}>Parents, siblings, or children · 父母、兄弟姊妹或子女</div>
        <div className="opt-grid cols-2" style={{ maxWidth: 760 }}>
          {family.map(c => (
            <OptCard key={c.k} checkbox selected={(a.family||[]).includes(c.k)}
              onClick={() => toggleArr("family", c.k)} en={c.en} tc={c.tc}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function SecHistory({ a, toggleArr }) {
  return (
    <div className="q-stack compact">
      <SecPast a={a} toggleArr={toggleArr}/>
      <SecFamily a={a} toggleArr={toggleArr}/>
    </div>
  );
}

function SecUltrasound({ a, setA, toggleArr }) {
  const types = [
    { k: "carotid", en: "Carotid", tc: "頸動脈" },
    { k: "thyroid", en: "Thyroid", tc: "甲狀腺" },
    { k: "breast", en: "Breast", tc: "乳房" },
    { k: "abdomen", en: "Abdomen", tc: "腹部" },
    { k: "pelvis", en: "Pelvis", tc: "盆腔" },
    { k: "prostate", en: "Prostate", tc: "前列腺" },
  ];
  return (
    <div className="q-stack">
      <div>
        <QQ en="Have you previously undergone any ultrasound examination?" tc="曾否接受超聲波檢查？"/>
        <YesNo value={a.previousUltrasound || "yes"} onChange={(v) => setA({ previousUltrasound: v })}/>
      </div>
      <div>
        <div className="q-block-label">Type(s) of ultrasound performed · 曾接受的超聲波類型</div>
        <div className="opt-grid cols-2" style={{ maxWidth: 760 }}>
          {types.map(c => (
            <OptCard key={c.k} checkbox selected={(a.ultrasoundTypes||[]).includes(c.k)}
              onClick={() => toggleArr("ultrasoundTypes", c.k)} en={c.en} tc={c.tc}/>
          ))}
        </div>
      </div>
      <div>
        <QQ en="Were any abnormalities identified in previous ultrasound examinations?" tc="過往超聲波檢查是否發現異常？"/>
        <YesNo value={a.previousUltrasoundAbnormal} onChange={(v) => setA({ previousUltrasoundAbnormal: v })}/>
      </div>
    </div>
  );
}

function SecSafety({ a, setA, toggleArr }) {
  const items = [
    { k: "cardiac", en: "Serious cardiac condition or recent cardiac event", tc: "嚴重心臟病或最近曾發生心臟事件" },
    { k: "surgery30", en: "Major surgery within the past 30 days", tc: "過去 30 日內曾接受大型手術" },
    { k: "uncontrolledBp", en: "Uncontrolled hypertension", tc: "未受控制的高血壓" },
    { k: "infection48", en: "Infection symptoms within the past 48 hours", tc: "過去 48 小時內有感染症狀" },
    { k: "doctorPostpone", en: "Doctor advised avoiding or postponing examination", tc: "醫生建議避免或延遲醫療檢查" },
  ];
  return (
    <div className="q-stack">
      <div>
        <QQ en="Please select any safety items that apply today" tc="請選擇今天適用的安全確認項目"/>
        <div style={{ fontSize: 12, color: "var(--ink-mute)", marginBottom: 16 }}>A yes answer may require staff review before the examination · 如選擇是，可能需要職員先作覆核</div>
        <div className="opt-grid cols-2" style={{ maxWidth: 760 }}>
          {items.map(c => (
            <OptCard key={c.k} checkbox selected={(a.safety||[]).includes(c.k)}
              onClick={() => toggleArr("safety", c.k)} en={c.en} tc={c.tc}/>
          ))}
        </div>
      </div>
      <div>
        <QQ en="Do you understand the nature and purpose of this health examination?" tc="是否明白本健康檢查的性質及目的？"/>
        <div className="opt-grid cols-2" style={{ maxWidth: 520 }}>
          <OptCard selected={a.consent === "understand"} onClick={() => setA({ consent: "understand" })} en="Understand" tc="明白"/>
          <OptCard selected={a.consent === "doNotUnderstand"} onClick={() => setA({ consent: "doNotUnderstand" })} en="Do not understand" tc="不明白"/>
        </div>
      </div>
    </div>
  );
}
function SecReview({ a, patientAge }) {
  const Row = ({ k, v, tc }) => (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--line-soft)" }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-mute)", fontWeight: 600 }}>{k}</div>
        <div style={{ fontFamily: "var(--sans-tc)", fontSize: 11, color: "var(--ink-faint)" }}>{tc}</div>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)", fontWeight: 500 }}>{v}</div>
    </div>
  );
  return (
    <div className="q-stack">
      <QQ en="Please review your answers" tc="請確認您的答案"/>
      <div style={{ background: "var(--bg-soft)", borderRadius: 14, padding: "8px 24px", border: "1px solid var(--line-soft)", maxWidth: 720 }}>
        <Row k="Gender" tc="性別" v={a.gender === "female" ? "Female · 女" : "Male · 男"}/>
        <Row k="Age" tc="年齡" v={patientAge.toString()}/>
        <Row k="Menopause" tc="停經" v={a.menopause === "yes" ? "Yes · 是" : "No · 否"}/>
        <Row k="Last menstrual period" tc="最後一次月經" v={({ "<1m": "Within 1 month", "1-3m": "1 to 3 months", ">3m": "More than 3 months", na: "N/A" })[a.lmp] || "—"}/>
        {a.gender === "female" && <Row k="Women's health" tc="婦科健康" v={[
          a.irregularCycle === "yes" && "irregular cycle",
          (a.papOverdue === "overdue" || a.papOverdue === "never") && "Pap smear review",
          a.pregnancyPlan === "yes" && "pregnancy planning",
          a.abnormalBleeding === "yes" && "bleeding/discharge",
          a.menopauseSymptoms === "yes" && "menopause symptoms",
          a.pelvicPain === "yes" && "pelvic pain",
          a.breastSymptom === "yes" && "breast symptom",
        ].filter(Boolean).length ? `${[
          a.irregularCycle === "yes" && "irregular cycle",
          (a.papOverdue === "overdue" || a.papOverdue === "never") && "Pap smear review",
          a.pregnancyPlan === "yes" && "pregnancy planning",
          a.abnormalBleeding === "yes" && "bleeding/discharge",
          a.menopauseSymptoms === "yes" && "menopause symptoms",
          a.pelvicPain === "yes" && "pelvic pain",
          a.breastSymptom === "yes" && "breast symptom",
        ].filter(Boolean).length} item(s)` : "No additional items"}/>}
        <Row k="Recent health status" tc="最近健康狀況" v={(a.conditions||[]).length ? `${a.conditions.length} selected` : "None"}/>
        <Row k="Child health" tc="兒童健康" v={patientAge < 18 ? "Patient under 18 · 受檢者未滿 18 歲" : (a.childAttending === "yes" ? "Child attending · 有小童同行" : "Not applicable · 不適用")}/>
        <Row k="Family History" tc="家族病史" v={(a.family||[]).length ? `${a.family.length} selected` : "None"}/>
        <Row k="Safety answers" tc="安全確認" v={(a.safety||[]).length ? `${a.safety.length} needs review` : "No safety flags"}/>
      </div>
      <div style={{ padding: "20px 24px", background: "var(--gold-soft)", borderRadius: 14, fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.6, maxWidth: 720 }}>
        <Icon.Spark style={{ color: "var(--gold-deep)", verticalAlign: "middle", marginRight: 6 }}/>
        Based on your responses, we may highlight <strong style={{ color: "var(--ink)" }}>relevant care options</strong> for you to discuss with our clinical team.
        <br/>
        <span style={{ fontFamily: "var(--sans-tc)" }}>根據您的答案，我們可能會顯示適合與醫護團隊進一步討論的跟進建議。</span>
      </div>
    </div>
  );
}

// =============================================================================
// 5. CARE OPTIONS
// =============================================================================
function UpsellPage({ lang, state, setState, onBack, onNext }) {
  const a = state.answers;
  const patientAge = ageFromDobString(state.dob);
  const childHealthApplies = patientAge < 18 || a.childAttending === "yes";
  const recos = RECOMMENDATIONS.filter(r => {
    const t = r.triggers || {};
    const isChildCategory = r.cat?.en === "Child Health";
    const isSafetyCategory = r.cat?.en === "Safety Review";
    if (patientAge < 18 && !isChildCategory && !isSafetyCategory) return false;
    if (patientAge >= 18 && isChildCategory && !childHealthApplies) return false;
    if (t.gender && a.gender !== t.gender) return false;
    if (t.gender === "female" && patientAge < 18) return false;
    if (t.minAge && patientAge < t.minAge) return false;
    if (t.maxAge && patientAge > t.maxAge) return false;
    if (t.familyBreast && !(a.family||[]).includes("famBreast")) return false;
    if (t.lmpOver3m && a.lmp !== ">3m") return false;
    if (t.menopause && a.menopause !== t.menopause) return false;
    if (t.irregularCycle && a.irregularCycle !== "yes") return false;
    if (t.papOverdue && !(a.papOverdue === "overdue" || a.papOverdue === "never")) return false;
    if (t.pregnancyPlan && a.pregnancyPlan !== "yes") return false;
    if (t.abnormalBleeding && a.abnormalBleeding !== "yes") return false;
    if (t.menopauseSymptoms && a.menopauseSymptoms !== "yes") return false;
    if (t.pelvicPain && a.pelvicPain !== "yes") return false;
    if (t.breastSymptom && a.breastSymptom !== "yes") return false;
    if (t.childAttending && !childHealthApplies) return false;
    if (t.childAllergy && a.childAllergy !== "yes") return false;
    if (t.childGrowth && a.childGrowth !== "yes") return false;
    if (t.childDevelopment && a.childDevelopment !== "yes") return false;
    if (t.safetyAny && !(a.safety||[]).length && a.consent !== "doNotUnderstand") return false;
    return true;
  });

  const cart = state.cart || [];
  const inCart = (id) => cart.includes(id);
  const toggleCart = (id) => setState(p => {
    const c = p.cart || [];
    return { ...p, cart: c.includes(id) ? c.filter(x => x !== id) : [...c, id] };
  });

  const selectedWithFees = cart.filter(id => RECOMMENDATIONS.find(r => r.id === id)?.fee);

  return (
    <div className="page-inner">
      <div className="page-body">
        <div className="upsell-hero">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Step 04 · 第四步 · For your review</div>
            <h1>
              Care options <em>to consider</em>
            </h1>
            <div className="upsell-hero-tc">可與醫護團隊討論的跟進建議</div>
            <p className="lede" style={{ marginTop: 16, maxWidth: "56ch" }}>
              Based on the information you shared, these options may be relevant to your visit today. They are not a diagnosis, and our team can explain what is suitable for you.
              <br/><br/>
              <span style={{ fontFamily: "var(--sans-tc)" }}>根據您提供的資料，以下項目可能適合今天與醫護團隊討論。這並非診斷，職員會為您解釋是否合適。</span>
            </p>
          </div>
          <div className="upsell-hero-meta">
            <span>Our clinical team</span>
            <strong>will review this with you</strong>
            <span>Before your examination begins</span>
            <span style={{ marginTop: 6, color: "var(--gold-deep)", fontWeight: 600 }}>{recos.length} option{recos.length === 1 ? "" : "s"} to review</span>
          </div>
        </div>

        <div className="recos-grid">
          {recos.map(r => (
            <div key={r.id} className={"reco-card" + (inCart(r.id) ? " added" : "") + (r.featured ? " featured" : "")}>
              {r.featured && <div className="reco-card-flag">Worth discussing · 值得了解</div>}
              <div className="reco-card-img">
                <span className="placeholder-tag">{r.img}</span>
              </div>
              <div className="reco-card-body">
                <div className="reco-card-cat">{r.cat.en} · {r.cat.tc}</div>
                <div>
                  <div className="reco-card-name">{r.name.en}</div>
                  <div className="reco-card-name-tc">{r.name.tc}</div>
                </div>
                <div className="reco-why">
                  <div className="reco-why-label"><Icon.Spark/> Why this may help · 為何值得了解</div>
                  <div className="reco-why-text">
                    {r.why.en}
                    <span className="tc">{r.why.tc}</span>
                  </div>
                </div>
                <div className="reco-meta-row">
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon.Clock/> Follow-up: {r.dur}</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Icon.Drop/> Product: {r.sample}</span>
                </div>
              </div>
              <div className="reco-foot">
                <div className="reco-price">
                  <div className="price-label">Reference fee</div>
                  <div className="now">{r.fee || (r.price > 0 ? <>HK$ {r.price.toLocaleString()}<sub>HKD</sub></> : "Discuss")}</div>
                  {r.was && <div className="was">HK$ {r.was.toLocaleString()}</div>}
                </div>
                <button className={"reco-add-btn" + (inCart(r.id) ? " added" : "")} onClick={() => toggleCart(r.id)}>
                  {inCart(r.id) ? <><Icon.Check/> Selected</> : <><Icon.Plus/> Discuss</>}
                </button>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: "20px 24px", background: "var(--bg-soft)", borderRadius: 14, border: "1px solid var(--line-soft)", fontSize: 12, color: "var(--ink-mute)", lineHeight: 1.6 }}>
          <strong style={{ color: "var(--ink)", fontFamily: "var(--serif)", fontSize: 14, fontWeight: 500 }}>Prefer to decide later?</strong>
          &nbsp;You may continue without selecting any option. Our team can still answer questions during your visit.
          &nbsp;<span style={{ fontFamily: "var(--sans-tc)" }}>如想稍後才決定，您可直接繼續；醫護團隊可於稍後為您解答。</span>
        </div>
      </div>

      {cart.length > 0 && (
        <div className="upsell-cart">
          <div>
            <div className="count">{cart.length}</div>
            <div className="label">Selected to discuss · 已選擇了解</div>
          </div>
          <div className="total">{selectedWithFees.length ? "Reference fees shown" : "To be confirmed"}</div>
        </div>
      )}

      <PageFoot onBack={onBack} onNext={onNext}
        nextLabel={cart.length > 0 ? `Discuss ${cart.length} option${cart.length>1?"s":""}` : "Continue"}
        nextLabelTc={cart.length > 0 ? `討論 ${cart.length} 項建議` : "繼續"}/>
    </div>
  );
}

// =============================================================================
// 6. FINAL
// =============================================================================
function FinalPage({ state, onBack, onNext, onRestart }) {
  const patient = window.getDemoPatientProfile ? window.getDemoPatientProfile(state) : { salutation: "Ms. Wong", salutationTc: "王女士" };
  return (
    <div className="final">
      <div className="final-left">
        <div>
          <div className="final-eyebrow">All set · 登記完成</div>
          <h1 className="final-title">
            Thank you, <em>{patient.salutation}</em>
          </h1>
          <div className="final-title-tc">{patient.salutationTc}，謝謝您</div>
          <p style={{ fontFamily: "var(--sans)", fontSize: 14, color: "rgba(247,243,236,0.7)", marginTop: 18, lineHeight: 1.6, maxWidth: "40ch" }}>
            Please be seated in the lounge. We'll greet you when your first room is ready.
            <br/><br/>
            <span style={{ fontFamily: "var(--sans-tc)" }}>請於休息室稍候，職員會於房間準備好後通知您。</span>
          </p>
        </div>
        <div className="queue-card">
          <div className="queue-card-left">
            <div className="queue-card-label">Your queue · 候診號碼</div>
            <div className="queue-num">A<span>·</span>27</div>
          </div>
          <div className="queue-meta">
            <div className="queue-meta-item">
              <div className="k">Estimated start · 預計開始</div>
              <div className="v">09:32 AM</div>
            </div>
            <div className="queue-meta-item">
              <div className="k">First room · 首間檢查室</div>
              <div className="v">C-04 · Dr. Lam</div>
            </div>
          </div>
        </div>
      </div>

      <div className="final-right">
        <div>
          <h3>What happens next · 後續流程</h3>
          <div className="final-step">
            <div className="final-step-num">01</div>
            <div className="final-step-body">
              <div className="final-step-title">Settle in the lounge</div>
              <div className="final-step-tc">於休息室稍候</div>
              <div className="final-step-desc">Tea, water and warm robes are available. Please silence your phone.</div>
            </div>
          </div>
          <div className="final-step">
            <div className="final-step-num">02</div>
            <div className="final-step-body">
              <div className="final-step-title">Pre-check consultation</div>
              <div className="final-step-tc">檢前醫生會診</div>
              <div className="final-step-desc">Dr. Lam will discuss your itinerary{state.cart && state.cart.length > 0 ? `, including the ${state.cart.length} care option${state.cart.length>1?"s":""} you selected to discuss` : ""}.</div>
            </div>
          </div>
          <div className="final-step">
            <div className="final-step-num">03</div>
            <div className="final-step-body">
              <div className="final-step-title">Guided through your itinerary</div>
              <div className="final-step-tc">專人引領完成檢查</div>
              <div className="final-step-desc">Approx. {BOOKED_PACKAGE.duration}. A care assistant will move with you between rooms.</div>
            </div>
          </div>
          <div className="final-step">
            <div className="final-step-num">04</div>
            <div className="final-step-body">
              <div className="final-step-title">Post-check review · same day</div>
              <div className="final-step-tc">即日檢後講解</div>
              <div className="final-step-desc">Preliminary findings discussed before you leave. Full report posted within 5 working days.</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--line-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: 11, color: "var(--ink-mute)" }}>
            Tap to hand back to staff · 請交還職員
          </span>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-ghost" onClick={onRestart}>Restart demo</button>
            <button className="btn btn-primary" onClick={onNext}>View wiki · 知識庫</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function WikiTreeBranch({ node, depth, blurbDepthMax }) {
  const hasKids = node.children && node.children.length > 0;
  const defaultOpen = depth < 4;
  const [open, setOpen] = React.useState(defaultOpen);
  const showBlurb =
    (blurbDepthMax == null || depth <= blurbDepthMax) &&
    Boolean(node.blurb || node.blurbTc);
  const kind = node.kind || "doc";
  const titleClass =
    "wiki-tree-title" +
    (kind === "section" ? " wiki-tree-title--section" : "") +
    (kind === "asset" ? " wiki-tree-title--asset" : "") +
    (kind === "group" ? " wiki-tree-title--group" : "");
  const linkClass =
    "wiki-tree-link" +
    (kind === "section" ? " wiki-tree-link--section" : "") +
    (kind === "asset" ? " wiki-tree-link--asset" : "") +
    (kind === "doc" && depth > 0 ? " wiki-tree-link--doc" : "");

  return (
    <div className={"wiki-tree-node wiki-tree-depth-" + depth + " wiki-tree-kind--" + kind}>
      <div className="wiki-tree-row">
        {hasKids ? (
          <button
            type="button"
            className="wiki-tree-toggle"
            onClick={() => setOpen(!open)}
            aria-expanded={open}
            aria-label={open ? "Collapse" : "Expand"}
          >
            {open ? "−" : "+"}
          </button>
        ) : (
          <span className={"wiki-tree-leaf-mark" + (kind === "asset" ? " wiki-tree-leaf-mark--pdf" : "")} aria-hidden />
        )}
        <div className="wiki-tree-body">
          <div className="wiki-tree-title-line">
            {node.href ? (
              <a className={linkClass} href={node.href} target="_blank" rel="noopener noreferrer">{node.title}</a>
            ) : (
              <span className={titleClass}>{node.title}</span>
            )}
            {node.titleTc ? <span className="wiki-tree-title-tc">{node.titleTc}</span> : null}
          </div>
          {showBlurb && node.blurb ? <p className="wiki-tree-blurb">{node.blurb}</p> : null}
          {showBlurb && node.blurbTc ? <p className="wiki-tree-blurb-tc">{node.blurbTc}</p> : null}
        </div>
      </div>
      {hasKids && open ? (
        <div className="wiki-tree-children">
          {node.children.map((ch) => (
            <WikiTreeBranch key={ch.id} node={ch} depth={depth + 1} blurbDepthMax={blurbDepthMax}/>
          ))}
        </div>
      ) : null}
    </div>
  );
}

function WikiCoverageStrip({ stats }) {
  if (!stats) return null;
  const chips = [
    {
      en: `${stats.wikiMarkdownArticles} wiki pages`,
      tc: `${stats.wikiMarkdownArticles} 個 Wiki 頁面`,
      hint: "docs/wiki/*.md",
    },
    {
      en: `${stats.registeredSourcePdfs} PDFs registered`,
      tc: `登記 ${stats.registeredSourcePdfs} 份 PDF`,
      hint: `${stats.questionnaireSourcePdfs} questionnaire + ${stats.vasRuleGuidePdfs} rule guides`,
    },
    {
      en: `${stats.bilingualSurveyMarkdownTables} EN/ZH survey maps`,
      tc: `${stats.bilingualSurveyMarkdownTables} 套中英問卷對照`,
      hint: "Stable Field IDs",
    },
    {
      en: `${stats.specialistRuleWikiPages} specialist catalogues`,
      tc: `${stats.specialistRuleWikiPages} 份專科規則目錄`,
      hint: "O&G + Paediatrics",
    },
    {
      en: `${stats.vasRuleGuidePdfs} rule PDF versions`,
      tc: `${stats.vasRuleGuidePdfs} 份規則原件`,
      hint: "v1.2 triggers · v1.3 fees",
    },
  ];
  return (
    <div className="wiki-coverage">
      <p className="wiki-coverage-tagline">
        {stats.taglineEn}
        <span className="wiki-coverage-tagline-tc">{stats.taglineTc}</span>
      </p>
      <ul className="wiki-coverage-chips" aria-label="Knowledge base coverage">
        {chips.map((c) => (
          <li key={c.en} className="wiki-coverage-chip" title={c.hint}>
            <span className="wiki-coverage-chip-en">{c.en}</span>
            <span className="wiki-coverage-chip-tc">{c.tc}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function WikiPage({ onBack, onRestart }) {
  const root = typeof window !== "undefined" && window.WIKI_KNOWLEDGE_TREE ? window.WIKI_KNOWLEDGE_TREE : null;
  const coverage = typeof window !== "undefined" ? window.WIKI_COVERAGE_STATS : null;

  return (
    <div className="wiki-showcase wiki-showcase--tree-only wiki-showcase--graph">
      <WikiCoverageStrip stats={coverage}/>
      <div className="wiki-tree-root wiki-tree-root--fill">
        {root ? <WikiTreeBranch node={root} depth={0} blurbDepthMax={1}/> : (
          <p className="wiki-tree-fallback">Wiki tree data failed to load.</p>
        )}
      </div>
      <div className="wiki-tree-actions">
        <button className="btn btn-ghost" onClick={onBack}>Back · 返回</button>
        <button className="btn btn-primary" onClick={onRestart}>Restart demo</button>
      </div>
    </div>
  );
}

window.QuestionnairePage = QuestionnairePage;
window.UpsellPage = UpsellPage;
window.FinalPage = FinalPage;
window.WikiPage = WikiPage;