// app.jsx — クライアントサイドルーター（パスベースURL）
const { useEffect: useEffectA, useState: useStateApp } = React;

// ── シンプルルーター ──────────────────────────────────────────────────
function useRouter() {
  const [path, setPath] = useStateApp(() => {
    const p = window.location.pathname.replace(/\/$/, '') || '/';
    return p;
  });

  useEffectA(() => {
    const handler = () => {
      const p = window.location.pathname.replace(/\/$/, '') || '/';
      setPath(p);
      window.scrollTo(0, 0);
    };
    window.addEventListener('popstate', handler);
    return () => window.removeEventListener('popstate', handler);
  }, []);

  return path;
}

// グローバルナビゲーション関数（SideNavから使用）
window._navigate = function(url) {
  window.history.pushState(null, '', url);
  window.dispatchEvent(new PopStateEvent('popstate'));
};

// ── ページコンポーネント ──────────────────────────────────────────────
function PageHome() {
  return (
    <>
      <Hero />
      <Concept />
      <News />
      <Facilities />
      <Footer />
    </>
  );
}

function PageConcept() {
  return (
    <>
      <Concept full={true} />
      <Footer />
    </>
  );
}

function PageCompany() {
  return (
    <>
      <Company />
      <Footer />
    </>
  );
}

function PageNews() {
  return (
    <>
      <News full={true} />
      <Footer />
    </>
  );
}

function PageContact() {
  return (
    <>
      <Contact />
      <Footer />
    </>
  );
}

// ── アプリ本体 ────────────────────────────────────────────────────────
function App() {
  const path = useRouter();

  const page = () => {
    switch (path) {
      case '/concept': return <PageConcept />;
      case '/company': return <PageCompany />;
      case '/news':    return <><NewsListPage /><Footer /></>;
      case '/contact': return <PageContact />;
      default:         return <PageHome />;
    }
  };

  return (
    <>
      <SideNav currentPath={path} />
      <div id="main-wrap">
        {page()}
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);