function Simulator() {
  const questions = [
    {
      id: "q1",
      label: "初診日に、公的年金（国民年金・厚生年金）に加入していましたか？",
      options: [
        { v: "yes", label: "はい、加入していた" },
        { v: "before20", label: "20歳前に初診日がある" },
        { v: "no", label: "いいえ／不明" },
      ],
    },
    {
      id: "q2",
      label: "初診日の前々月までの保険料納付状況は？",
      options: [
        { v: "good", label: "概ね納付している（または免除手続き済）" },
        { v: "partial", label: "未納期間が一部ある" },
        { v: "unknown", label: "わからない" },
      ],
    },
    {
      id: "q3",
      label: "現在の状態として、最も近いものは？",
      options: [
        { v: "severe", label: "日常生活に常時、援助が必要" },
        { v: "moderate", label: "仕事や家事に著しい支障がある" },
        { v: "mild", label: "支障はあるが、ある程度はできる" },
      ],
    },
    {
      id: "q4",
      label: "初診から現在までの通院状況は？",
      options: [
        { v: "continuous", label: "継続的に通院している" },
        { v: "gap", label: "通院していない期間がある" },
        { v: "changed", label: "病院を何度か変えている" },
      ],
    },
  ];

  const [step, setStep] = React.useState(0);
  const [ans, setAns] = React.useState({});
  const [done, setDone] = React.useState(false);

  const total = questions.length;
  const progress = ((step + (done ? 1 : 0)) / total) * 100;

  const choose = (v) => {
    const q = questions[step];
    const next = { ...ans, [q.id]: v };
    setAns(next);
    if (step < total - 1) {
      setStep(step + 1);
    } else {
      setDone(true);
    }
  };

  const reset = () => { setStep(0); setAns({}); setDone(false); };

  // Verdict logic (simplified)
  const verdict = React.useMemo(() => {
    if (!done) return null;
    let score = 0;
    if (ans.q1 === "yes" || ans.q1 === "before20") score += 2;
    else if (ans.q1 === "no") score += 0;
    if (ans.q2 === "good") score += 2;
    else if (ans.q2 === "partial") score += 1;
    if (ans.q3 === "severe") score += 3;
    else if (ans.q3 === "moderate") score += 2;
    else if (ans.q3 === "mild") score += 1;
    if (ans.q4 === "continuous") score += 2;
    else if (ans.q4 === "changed") score += 1;

    if (score >= 7) return { level: "high", title: "受給の可能性が高いと考えられます", body: "保険料納付要件・障害状態・通院状況のいずれも、申請に進める基盤が整っているとお見受けします。書類の作り込み次第で、確実な受給が期待できます。" };
    if (score >= 4) return { level: "mid", title: "個別の精査が必要なケースです", body: "受給の可能性はありますが、申請戦略によって結果が変わりうる状況です。専門家とともに、書類の準備方針を検討することを強くお勧めします。" };
    return { level: "low", title: "工夫が必要ですが、諦めるのは早計です", body: "現状では難しいように見えても、初診日の特定や病歴の整理によって道が開けるケースが多くあります。まずは無料相談で詳細をお聞かせください。" };
  }, [done, ans]);

  return (
    <section id="simulator" data-screen-label="04 Simulator" style={{
      padding: "120px 0",
      background: "var(--bg)",
    }}>
      <div style={{ maxWidth: 880, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead en="QUICK CHECK" ja="かんたん" jaAccent="受給可能性チェック" />

        <p style={{ textAlign: "center", marginTop: 28, fontSize: 14, color: "var(--ink-soft)", lineHeight: 2.0 }}>
          ４つの質問にお答えいただくだけで、おおまかな受給可能性の目安をお伝えします。<br />
          ※あくまで簡易判定です。正確な可否はご相談時に専門家がお調べします。
        </p>

        <div style={{
          marginTop: 56,
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: 4,
          padding: "48px 48px",
          boxShadow: "var(--shadow-card)",
        }} className="sim-card">
          {/* progress */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
            <div className="num" style={{ fontSize: 13, letterSpacing: "0.2em", color: "var(--ink-soft)" }}>
              {done ? <>結果</> : <>{String(step + 1).padStart(2,"0")} <span style={{ color: "var(--gold)" }}>/</span> {String(total).padStart(2,"0")}</>}
            </div>
            <button onClick={reset} style={{ fontSize: 12, color: "var(--ink-soft)", letterSpacing: "0.1em", textDecoration: "underline" }}>最初から</button>
          </div>
          <div style={{ height: 2, background: "var(--line-soft)", borderRadius: 2, overflow: "hidden", marginBottom: 36 }}>
            <div style={{ width: `${progress}%`, height: "100%", background: "var(--gold)", transition: "width 0.4s ease" }} />
          </div>

          {!done ? (
            <div key={step} style={{ minHeight: 280, display: "flex", flexDirection: "column", gap: 28, animation: "fadeIn 0.4s ease" }}>
              <h3 style={{ fontSize: "clamp(18px, 2vw, 22px)", fontWeight: 700, lineHeight: 1.7, letterSpacing: "0.04em" }}>
                Q. {questions[step].label}
              </h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {questions[step].options.map((o) => (
                  <button key={o.v} onClick={() => choose(o.v)}
                    style={{
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "18px 24px",
                      background: "var(--bg)",
                      border: "1px solid var(--line)",
                      borderRadius: 4,
                      fontSize: 15,
                      letterSpacing: "0.04em",
                      transition: "all 0.2s",
                      textAlign: "left",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold)"; e.currentTarget.style.background = "var(--bg-warm)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.background = "var(--bg)"; }}
                  >
                    <span>{o.label}</span>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="1.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div style={{ minHeight: 280, animation: "fadeIn 0.5s ease" }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "6px 16px",
                borderRadius: 999,
                background: verdict.level === "high" ? "rgba(184,147,90,0.15)" : verdict.level === "mid" ? "rgba(184,147,90,0.10)" : "rgba(155,140,120,0.12)",
                color: "var(--gold-deep)",
                fontSize: 12,
                letterSpacing: "0.2em",
                marginBottom: 20,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold)" }} />
                簡易判定結果
              </div>
              <h3 style={{ fontSize: "clamp(22px, 2.6vw, 30px)", fontWeight: 700, lineHeight: 1.6, letterSpacing: "0.05em", marginBottom: 20 }}>
                {verdict.title}
              </h3>
              <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 2.1, marginBottom: 32 }}>
                {verdict.body}
              </p>
              <div style={{
                padding: "28px 32px",
                background: "var(--bg-warm)",
                borderLeft: "3px solid var(--gold)",
                borderRadius: 2,
              }}>
                <p style={{ fontSize: 14, lineHeight: 2.0, color: "var(--ink)" }}>
                  詳しい判定と、お一人おひとりに合わせた申請プランは、無料相談にて社労士が丁寧にお調べいたします。
                </p>
                <a href="tel:0120-000-000" style={{
                  display: "inline-flex", alignItems: "center", gap: 12,
                  marginTop: 18,
                  padding: "14px 24px",
                  background: "var(--gold)", color: "white",
                  borderRadius: 999,
                  fontSize: 14,
                  letterSpacing: "0.1em",
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  <span className="num">0120-000-000</span>
                  <span>で無料相談</span>
                </a>
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
        @media (max-width: 640px) {
          .sim-card { padding: 32px 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.Simulator = Simulator;