/* MISO 온보딩 홈 — 인덱스/허브 페이지 */
const { useState } = React;
const { HomeHero, CrewRoster, MetricsSummary } = window.MISOViews;
const { WhatIsModal } = window.MISOComponents;
const { JourneyCardsGrid } = window;
const { ADMIN_GUIDE_URL } = window.MISO_DATA;

function HomeApp() {
  const [whatOpen, setWhatOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }
  function handleNavClick(id) {
    scrollTo(id);
    setMenuOpen(false);
  }

  return (
    <div className="app no-sidebar">
      <main className="main">
        <div className={"home-topbar" + (menuOpen ? " menu-open" : "")}>
          <a className="home-topbar-brand" href="./" aria-label="MISO Onboarding 홈">
            <img className="miso-logo-mark" src="public/images/MISO-Logo.png" alt="MISO" />
          </a>
          <div className="home-topbar-menu">
            <nav className="home-topbar-nav">
              <button onClick={() => handleNavClick("journey")}>온보딩 7단계</button>
              <button onClick={() => handleNavClick("crew")}>MISO 팀</button>
              <button onClick={() => handleNavClick("metrics")}>지표</button>
            </nav>
            <a
              href={ADMIN_GUIDE_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="btn-primary home-topbar-cta home-topbar-ext"
              onClick={() => setMenuOpen(false)}
            >
              <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>
          <button
            className="home-topbar-hamburger"
            onClick={() => setMenuOpen((v) => !v)}
            aria-label={menuOpen ? "메뉴 닫기" : "메뉴 열기"}
            aria-expanded={menuOpen}
          >
            {menuOpen ? (
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden>
                <path d="M4 4 L14 14 M14 4 L4 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden>
                <path d="M3 5 H15 M3 9 H15 M3 13 H15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              </svg>
            )}
          </button>
        </div>

        <HomeHero onOpenWhat={() => setWhatOpen(true)} />
        <JourneyCardsGrid />
        <CrewRoster />
        <MetricsSummary />

        <footer className="home-footer">
          <div className="home-footer-brand">
            <img className="miso-logo-foot" src="public/images/MISO-Logo.png" alt="MISO" />
            <span>Onboarding · For PO &amp; Admin</span>
          </div>
          <span className="home-footer-credit">52g × MISO</span>
        </footer>
      </main>

      <WhatIsModal open={whatOpen} onClose={() => setWhatOpen(false)} />
    </div>
  );
}

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