// ============================================================
// 初期設定ウィザード (A案: 5ステップ順番 / B案: チェックリスト俯瞰)
// ============================================================
const T_s = window.TOKENS;

// ステップ定義
const SETUP_STEPS = [
  {
    id: 1, key: 'tester',
    title: 'テスターIDを設定',
    lead: '配布いただいたIDを入力してください',
    icon: 'tester',
  },
  {
    id: 2, key: 'apikey',
    title: 'HUB APIキーを発行',
    lead: 'PC側のHUBとアプリを紐付けるための鍵です',
    icon: 'key',
  },
  {
    id: 3, key: 'download',
    title: 'HUBをダウンロード',
    lead: 'PCで動く小さな中継アプリです。常駐して口座データを送信します',
    icon: 'download',
  },
  {
    id: 4, key: 'installEa',
    title: 'MT4/MT5 に Collector を設置',
    lead: 'MT4/MT5 のExpertフォルダに .ex4/.ex5 を配置',
    icon: 'server',
  },
  {
    id: 5, key: 'launchHub',
    title: 'HUBを起動して接続確認',
    lead: 'PCでHUBを起動し、このアプリで接続を確認',
    icon: 'link',
  },
];

// ─────────────────────────────────────────
// アーキテクチャ図(MT4/5 → HUB → クラウド → アプリ)
// ─────────────────────────────────────────
const ArchDiagram = () => {
  const nodes = [
    { label: 'MT4/MT5', sub: 'Collector EA', icon: 'server' },
    { label: 'HUB',     sub: 'PC常駐',       icon: 'zap' },
    { label: 'クラウド', sub: 'Cloudflare',  icon: 'shield' },
    { label: 'アプリ',   sub: 'スマホ',       icon: 'home' },
  ];
  return (
    <div style={{
      background: T_s.surface, border: `1px solid ${T_s.line}`,
      borderRadius: 12, padding: '16px 12px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 4, overflow: 'hidden',
    }}>
      {nodes.map((n, i) => (
        <React.Fragment key={n.label}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: i === 1 ? T_s.info : T_s.raised,
              border: `1px solid ${i === 1 ? T_s.info : T_s.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={n.icon} size={20} color={i === 1 ? '#fff' : T_s.fg2} />
            </div>
            <div style={{ fontSize: 10, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi, textAlign: 'center' }}>{n.label}</div>
            <div style={{ fontSize: 9, color: T_s.fg3, fontFamily: T_s.fontUi }}>{n.sub}</div>
          </div>
          {i < nodes.length - 1 && (
            <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', color: T_s.fg4, paddingTop: 6 }}>
              <svg width="14" height="8" viewBox="0 0 14 8">
                <path d="M0 4h11M8 1l4 3-4 3" fill="none" stroke={T_s.fg3} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

// ─────────────────────────────────────────
// A案: ステップ順ウィザード
// ─────────────────────────────────────────
const SetupWizardA = ({ onDone, onExit }) => {
  const [step, setStep] = React.useState(1);
  const [state, setState] = React.useState({
    tester: '', apikey: '', downloaded: false, installed: false, launched: false,
  });

  const total = SETUP_STEPS.length;
  const cur = SETUP_STEPS[step - 1];
  const canNext = {
    1: state.tester.length >= 4,
    2: state.apikey.length > 0,
    3: state.downloaded,
    4: state.installed,
    5: state.launched,
  }[step];

  const generateKey = () => {
    setState({ ...state, apikey: 'hub_live_' + Math.random().toString(36).slice(2, 14) });
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T_s.bg }}>
      {/* ヘッダ */}
      <div style={{ padding: '54px 16px 12px', borderBottom: `1px solid ${T_s.lineSoft}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <button onClick={onExit} style={{
            background: 'transparent', border: 'none', color: T_s.fg2,
            fontSize: 13, cursor: 'pointer', fontFamily: T_s.fontUi,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <Icon name="close" size={16} color={T_s.fg2} /> 中断
          </button>
          <div style={{ fontSize: 11, color: T_s.fg3, fontFamily: T_s.fontMono, letterSpacing: 0.5 }}>
            STEP {step} / {total}
          </div>
        </div>
        {/* 進捗バー */}
        <div style={{ display: 'flex', gap: 4 }}>
          {SETUP_STEPS.map(s => (
            <div key={s.id} style={{
              flex: 1, height: 3, borderRadius: 2,
              background: s.id <= step ? T_s.info : T_s.raised,
              transition: 'background 0.2s',
            }} />
          ))}
        </div>
      </div>

      {/* コンテンツ */}
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 16px 100px' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: T_s.infoBg, border: `1px solid ${T_s.info}40`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 16,
        }}>
          <Icon name={cur.icon} size={26} color={T_s.info} />
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: T_s.fg, fontFamily: T_s.fontUi, letterSpacing: -0.4, marginBottom: 6 }}>
          {cur.title}
        </div>
        <div style={{ fontSize: 13, color: T_s.fg2, fontFamily: T_s.fontUi, lineHeight: 1.6, marginBottom: 24 }}>
          {cur.lead}
        </div>

        {/* Step 1: テスターID */}
        {step === 1 && (
          <div>
            <label style={{ fontSize: 11, color: T_s.fg3, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase', fontFamily: T_s.fontUi }}>テスターID</label>
            <input
              value={state.tester}
              onChange={e => setState({ ...state, tester: e.target.value })}
              placeholder="tester_xxxxxxxx"
              style={{
                width: '100%', marginTop: 8, padding: '14px 14px',
                background: T_s.surface, border: `1px solid ${T_s.line}`,
                borderRadius: 10, color: T_s.fg, fontSize: 14,
                fontFamily: T_s.fontMono, outline: 'none',
                boxSizing: 'border-box',
              }}
            />
            <div style={{ marginTop: 12, padding: 12, background: T_s.infoBg, border: `1px solid ${T_s.info}30`, borderRadius: 10 }}>
              <div style={{ fontSize: 12, color: T_s.fg2, fontFamily: T_s.fontUi, lineHeight: 1.6 }}>
                <b style={{ color: T_s.fg }}>テスターIDとは?</b><br />
                配布時にメールでお送りしたIDです。メール本文の「あなたのテスターID」をコピーしてください。
              </div>
            </div>
          </div>
        )}

        {/* Step 2: APIキー発行 */}
        {step === 2 && (
          <div>
            {state.apikey ? (
              <div>
                <label style={{ fontSize: 11, color: T_s.fg3, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase', fontFamily: T_s.fontUi }}>発行されたAPIキー</label>
                <div style={{
                  marginTop: 8, padding: '14px 14px',
                  background: T_s.surface, border: `1px solid ${T_s.line}`,
                  borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ flex: 1, fontFamily: T_s.fontMono, fontSize: 13, color: T_s.fg, wordBreak: 'break-all' }}>
                    {state.apikey}
                  </span>
                  <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: T_s.fg2 }}>
                    <Icon name="copy" size={16} color={T_s.fg2} />
                  </button>
                </div>
                <div style={{ marginTop: 12, padding: 12, background: T_s.warnBg, border: `1px solid ${T_s.warn}30`, borderRadius: 10 }}>
                  <div style={{ fontSize: 12, color: T_s.warn, fontFamily: T_s.fontUi, fontWeight: 600, marginBottom: 4 }}>
                    このキーは1回だけ表示されます
                  </div>
                  <div style={{ fontSize: 11, color: T_s.fg2, fontFamily: T_s.fontUi, lineHeight: 1.5 }}>
                    後で確認できません。HUBの設定ファイルに貼り付けるので、必ずコピーしてください。
                  </div>
                </div>
              </div>
            ) : (
              <Button variant="info" size="lg" style={{ width: '100%' }} onClick={generateKey}>
                <Icon name="key" size={16} color="#fff" /> APIキーを発行
              </Button>
            )}
          </div>
        )}

        {/* Step 3: HUBダウンロード */}
        {step === 3 && (
          <div>
            <ArchDiagram />
            <div style={{ marginTop: 16, padding: 14, background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi }}>HUB v1.2.4</div>
                  <div style={{ fontSize: 11, color: T_s.fg3, fontFamily: T_s.fontMono, marginTop: 2 }}>Windows · 8.4 MB · zip</div>
                </div>
                <Button variant="info" size="sm" onClick={() => setState({ ...state, downloaded: true })}>
                  <Icon name="dl" size={12} color="#fff" /> {state.downloaded ? '再取得' : 'ダウンロード'}
                </Button>
              </div>
            </div>
            {state.downloaded && (
              <div style={{ marginTop: 12, padding: 12, background: T_s.profitBg, border: `1px solid ${T_s.profit}30`, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name="check" size={16} color={T_s.profit} stroke={2.5} />
                <span style={{ fontSize: 12, color: T_s.fg, fontFamily: T_s.fontUi }}>
                  ダウンロード完了。ZIPを解凍して任意のフォルダに配置してください。
                </span>
              </div>
            )}
          </div>
        )}

        {/* Step 4: MT4/MT5 Collector 設置 */}
        {step === 4 && (
          <div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { n: 1, t: 'MT4/MT5 を開く', d: '「ファイル」→「データフォルダを開く」を選択' },
                { n: 2, t: 'MQL4/Experts フォルダに移動', d: 'MT5の場合は MQL5/Experts フォルダ' },
                { n: 3, t: 'Collector.ex4 (または .ex5) を配置', d: 'HUB ZIPに同梱されています' },
                { n: 4, t: 'MT4/MT5 でチャートに適用', d: '任意のチャートにドラッグ&ドロップ' },
              ].map(s => (
                <div key={s.n} style={{
                  display: 'flex', gap: 12, padding: 12,
                  background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10,
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 999, flexShrink: 0,
                    background: T_s.raised, color: T_s.fg2,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 700, fontFamily: T_s.fontMono,
                  }}>{s.n}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi }}>{s.t}</div>
                    <div style={{ fontSize: 11, color: T_s.fg3, fontFamily: T_s.fontUi, marginTop: 2, lineHeight: 1.5 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
            <label style={{
              display: 'flex', alignItems: 'center', gap: 10, marginTop: 16, padding: 14,
              background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10,
              cursor: 'pointer',
            }}>
              <input type="checkbox" checked={state.installed} onChange={e => setState({ ...state, installed: e.target.checked })} style={{ accentColor: T_s.info, width: 18, height: 18 }} />
              <span style={{ fontSize: 13, color: T_s.fg, fontFamily: T_s.fontUi }}>Collectorを設置しました</span>
            </label>
          </div>
        )}

        {/* Step 5: 接続確認 */}
        {step === 5 && (
          <div>
            <div style={{ padding: 14, background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi, marginBottom: 12 }}>
                HUBを起動
              </div>
              <ol style={{ margin: 0, paddingLeft: 18, color: T_s.fg2, fontSize: 12, fontFamily: T_s.fontUi, lineHeight: 1.8 }}>
                <li>解凍したフォルダの <code style={{ fontFamily: T_s.fontMono, background: T_s.raised, padding: '1px 5px', borderRadius: 4, fontSize: 11 }}>HUB.exe</code> を実行</li>
                <li>初回起動時にAPIキーの入力を求められます</li>
                <li>Step 2でコピーしたキーを貼り付け</li>
              </ol>
            </div>
            <div style={{
              marginTop: 16, padding: 20,
              background: state.launched ? T_s.profitBg : T_s.surface,
              border: `1px solid ${state.launched ? T_s.profit + '40' : T_s.line}`,
              borderRadius: 12, textAlign: 'center',
            }}>
              {state.launched ? (
                <>
                  <div style={{ width: 44, height: 44, borderRadius: 999, background: T_s.profit, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                    <Icon name="check" size={24} color="#fff" stroke={3} />
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: T_s.fg, fontFamily: T_s.fontUi }}>接続できました</div>
                  <div style={{ fontSize: 12, color: T_s.fg2, marginTop: 4, fontFamily: T_s.fontUi }}>
                    2口座 · 5 EA を検出
                  </div>
                </>
              ) : (
                <>
                  <div style={{ width: 44, height: 44, borderRadius: 999, background: T_s.raised, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                    <Icon name="sync" size={22} color={T_s.fg3} />
                  </div>
                  <div style={{ fontSize: 13, color: T_s.fg2, fontFamily: T_s.fontUi, marginBottom: 12 }}>接続待ち…</div>
                  <Button variant="secondary" size="sm" onClick={() => setState({ ...state, launched: true })}>
                    接続をテスト
                  </Button>
                </>
              )}
            </div>
          </div>
        )}
      </div>

      {/* フッタ */}
      <div style={{
        padding: '12px 16px 34px', borderTop: `1px solid ${T_s.lineSoft}`,
        background: T_s.bg, display: 'flex', gap: 10,
      }}>
        {step > 1 && (
          <Button variant="secondary" size="lg" style={{ flex: 1 }} onClick={() => setStep(step - 1)}>
            戻る
          </Button>
        )}
        <Button variant="info" size="lg" style={{ flex: 2 }}
          disabled={!canNext}
          onClick={() => step === total ? onDone() : setStep(step + 1)}>
          {step === total ? '完了して始める' : '次へ'}
        </Button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────
// B案: チェックリスト俯瞰
// ─────────────────────────────────────────
const SetupWizardB = ({ onDone, onExit }) => {
  const [expanded, setExpanded] = React.useState(1);
  const [state, setState] = React.useState({
    tester: '', apikey: '', downloaded: false, installed: false, launched: false,
  });

  const done = {
    1: state.tester.length >= 4,
    2: state.apikey.length > 0,
    3: state.downloaded,
    4: state.installed,
    5: state.launched,
  };
  const doneCount = Object.values(done).filter(Boolean).length;

  const generateKey = () => {
    setState({ ...state, apikey: 'hub_live_' + Math.random().toString(36).slice(2, 14) });
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T_s.bg }}>
      {/* ヘッダ */}
      <div style={{ padding: '54px 16px 20px', borderBottom: `1px solid ${T_s.lineSoft}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <button onClick={onExit} style={{
            background: 'transparent', border: 'none', color: T_s.fg2,
            fontSize: 13, cursor: 'pointer', fontFamily: T_s.fontUi,
          }}>
            後で
          </button>
          <div style={{ fontSize: 11, color: T_s.fg3, fontFamily: T_s.fontMono, letterSpacing: 0.5 }}>
            {doneCount} / {SETUP_STEPS.length} 完了
          </div>
        </div>
        <div style={{ fontSize: 24, fontWeight: 700, color: T_s.fg, fontFamily: T_s.fontUi, letterSpacing: -0.5, marginBottom: 6 }}>
          初期設定
        </div>
        <div style={{ fontSize: 13, color: T_s.fg2, fontFamily: T_s.fontUi, lineHeight: 1.5 }}>
          データ収集を始めるまで5ステップ。約10分で完了します。
        </div>
        {/* リング進捗 */}
        <div style={{ marginTop: 14, height: 6, background: T_s.raised, borderRadius: 3, overflow: 'hidden' }}>
          <div style={{
            width: `${(doneCount / SETUP_STEPS.length) * 100}%`,
            height: '100%',
            background: `linear-gradient(90deg, ${T_s.info}, ${T_s.profit})`,
            transition: 'width 0.3s',
          }} />
        </div>
      </div>

      {/* コンテンツ */}
      <div style={{ flex: 1, overflow: 'auto', padding: '16px 16px 100px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {SETUP_STEPS.map(s => {
            const isDone = done[s.id];
            const isOpen = expanded === s.id;
            return (
              <div key={s.id} style={{
                background: T_s.surface,
                border: `1px solid ${isDone ? T_s.profit + '40' : (isOpen ? T_s.info + '60' : T_s.line)}`,
                borderRadius: 12, overflow: 'hidden',
                transition: 'border 0.2s',
              }}>
                <div onClick={() => setExpanded(isOpen ? 0 : s.id)} style={{
                  padding: '14px', display: 'flex', alignItems: 'center', gap: 12,
                  cursor: 'pointer',
                }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                    background: isDone ? T_s.profit : T_s.raised,
                    border: `1px solid ${isDone ? T_s.profit : T_s.line}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {isDone ? (
                      <Icon name="check" size={14} color="#fff" stroke={3} />
                    ) : (
                      <span style={{ fontSize: 12, color: T_s.fg2, fontFamily: T_s.fontMono, fontWeight: 700 }}>{s.id}</span>
                    )}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi }}>{s.title}</div>
                    <div style={{ fontSize: 11, color: T_s.fg3, fontFamily: T_s.fontUi, marginTop: 2 }}>{s.lead}</div>
                  </div>
                  <Icon name={isOpen ? 'chevU' : 'chevD'} size={16} color={T_s.fg3} />
                </div>
                {isOpen && (
                  <div style={{ padding: '4px 14px 16px', borderTop: `1px solid ${T_s.lineSoft}`, background: T_s.bg }}>
                    <div style={{ paddingTop: 14 }}>
                      {s.id === 1 && (
                        <input
                          value={state.tester}
                          onChange={e => setState({ ...state, tester: e.target.value })}
                          placeholder="tester_xxxxxxxx"
                          style={{
                            width: '100%', padding: '12px',
                            background: T_s.surface, border: `1px solid ${T_s.line}`,
                            borderRadius: 10, color: T_s.fg, fontSize: 13,
                            fontFamily: T_s.fontMono, outline: 'none', boxSizing: 'border-box',
                          }}
                        />
                      )}
                      {s.id === 2 && (
                        state.apikey ? (
                          <div style={{ padding: 12, background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                            <span style={{ flex: 1, fontFamily: T_s.fontMono, fontSize: 12, color: T_s.fg, wordBreak: 'break-all' }}>{state.apikey}</span>
                            <Icon name="copy" size={14} color={T_s.fg2} />
                          </div>
                        ) : (
                          <Button variant="info" size="md" style={{ width: '100%' }} onClick={generateKey}>
                            <Icon name="key" size={14} color="#fff" /> APIキーを発行
                          </Button>
                        )
                      )}
                      {s.id === 3 && (
                        <Button variant={state.downloaded ? 'secondary' : 'info'} size="md" style={{ width: '100%' }} onClick={() => setState({ ...state, downloaded: true })}>
                          <Icon name="dl" size={14} color={state.downloaded ? T_s.fg : '#fff'} />
                          {state.downloaded ? '再ダウンロード' : 'HUB v1.2.4 をダウンロード'}
                        </Button>
                      )}
                      {s.id === 4 && (
                        <label style={{
                          display: 'flex', alignItems: 'center', gap: 10, padding: 12,
                          background: T_s.surface, border: `1px solid ${T_s.line}`, borderRadius: 10,
                          cursor: 'pointer',
                        }}>
                          <input type="checkbox" checked={state.installed} onChange={e => setState({ ...state, installed: e.target.checked })} style={{ accentColor: T_s.info, width: 16, height: 16 }} />
                          <span style={{ fontSize: 12, color: T_s.fg, fontFamily: T_s.fontUi }}>Collectorを設置しました</span>
                        </label>
                      )}
                      {s.id === 5 && (
                        <Button variant={state.launched ? 'secondary' : 'info'} size="md" style={{ width: '100%' }} onClick={() => setState({ ...state, launched: true })}>
                          {state.launched ? '✓ 接続確認済み' : '接続をテスト'}
                        </Button>
                      )}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* FAQ */}
        <div style={{ marginTop: 24 }}>
          <SectionHead title="よくある質問" />
          <FAQ />
        </div>

        {/* アーキ図(下部) */}
        <div style={{ marginTop: 20 }}>
          <SectionHead title="データの流れ" />
          <ArchDiagram />
        </div>
      </div>

      {/* フッタ */}
      {doneCount === SETUP_STEPS.length && (
        <div style={{
          padding: '12px 16px 34px', borderTop: `1px solid ${T_s.lineSoft}`,
          background: T_s.bg,
        }}>
          <Button variant="profit" size="lg" style={{ width: '100%' }} onClick={onDone}>
            <Icon name="check" size={16} color="#052E15" stroke={3} /> 設定完了・アプリを始める
          </Button>
        </div>
      )}
    </div>
  );
};

// ─────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────
const FAQ = () => {
  const items = [
    {
      q: 'HUBって何ですか?',
      a: 'PC上で動く小さな中継アプリです。MT4/MT5から受け取った取引データをクラウド経由でこのアプリに送信します。PCを起動している間だけ動きます。',
    },
    {
      q: 'なぜ直接クラウドに送らないの?',
      a: 'MT4/MT5は仕様上、直接クラウドに大量データを送るのが苦手です。HUBが間に入ることで、通信の安定性とセキュリティを両立できます。',
    },
    {
      q: 'PCを閉じたらどうなる?',
      a: 'データ収集は止まりますが、それまでのデータはクラウド側に保存されるため、アプリで確認できます。PCを再起動すればHUBが自動再開します。',
    },
    {
      q: 'APIキーを紛失したら?',
      a: '設定画面から再発行できます。ただし古いキーは無効になり、HUB側で貼り直しが必要です。',
    },
  ];
  const [open, setOpen] = React.useState(-1);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {items.map((it, i) => (
        <div key={i} style={{
          background: T_s.surface, border: `1px solid ${T_s.line}`,
          borderRadius: 10, overflow: 'hidden',
        }}>
          <div onClick={() => setOpen(open === i ? -1 : i)} style={{
            padding: '12px 14px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
          }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: T_s.fg, fontFamily: T_s.fontUi }}>Q. {it.q}</span>
            <Icon name={open === i ? 'chevU' : 'chevD'} size={14} color={T_s.fg3} />
          </div>
          {open === i && (
            <div style={{ padding: '4px 14px 14px', fontSize: 12, color: T_s.fg2, fontFamily: T_s.fontUi, lineHeight: 1.6 }}>
              {it.a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { SetupWizardA, SetupWizardB, FAQ, ArchDiagram });