/* 온보딩 단계 상세 페이지 — 좌측 7개 카드 + 우측 상세 패널 (단독 페이지) */
const { useState, useEffect } = React;
const { JourneyExplorer } = window;
const { ADMIN_GUIDE_URL } = window.MISO_DATA;

function JourneyDetailApp() {
  // URL hash로 시작 단계 결정 (#step=3 등)
  const [initialId] = useState(() => {
    const m = (window.location.hash || "").match(/step=(\d+)/);
    if (m) {
      const n = parseInt(m[1], 10);
      if (n >= 0 && n < STEPS.length) return n;
    }
    return 0;
  });

  return (
    <div className="app no-sidebar">
      <main className="main">
        <div className="home-topbar home-topbar-journey">
          <div className="home-topbar-journey-start">
            <a href="./" className="home-topbar-text-link">← 홈으로</a>
          </div>
          <div className="home-topbar-journey-end">
            <a
              href={ADMIN_GUIDE_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="btn-primary home-topbar-cta home-topbar-ext home-topbar-journey-manual"
            >
              <span>미소 관리자 매뉴얼</span>
              <svg className="home-topbar-ext-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <path d="M5 2.5H3.2C2.54 2.5 2 3.04 2 3.7v5.1C2 9.46 2.54 10 3.2 10h5.1c.66 0 1.2-.54 1.2-1.2V7.5M7 2h3v3M5.5 6.5L10 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span className="sr-only"> (새 탭에서 열림)</span>
            </a>
          </div>
        </div>

        <JourneyExplorer initialId={initialId} />

        <footer className="home-footer">
          <div className="home-footer-brand">
            <img className="miso-logo-foot" src="public/images/MISO-Logo.png" alt="MISO" />
            <span>Onboarding · 온보딩 단계</span>
          </div>
          <span className="home-footer-credit">52g × MISO</span>
        </footer>
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<JourneyDetailApp />);
