// ─── App shell + router ──────────────────────────────────────────

const TWEAKS = { heroLayout: "text", ctaStrength: "strong" };

const PAGE_META = {
  home:       { path: "/",          title: "UIARB合同会社 | WordPress保守・開発・SEO対策",        desc: "WordPress保守・監視・開発からWebシステム構築・SEO対策まで。15分以内一次応答、月次レポート付き。沖縄・那覇発のWeb制作・保守専門会社UIARB合同会社。" },
  services:   { path: "/services/", title: "サービス一覧 | UIARB合同会社",                       desc: "WordPress保守・開発、Webシステム構築、SEO対策など6つの専門分野。作って終わらせない、長期伴走型のWebパートナー。" },
  "wp-maint": { path: "/wp-maint/", title: "WordPress保守・監視 | UIARB合同会社",                desc: "コア・プラグイン・テーマを継続的に検証。脆弱性・パフォーマンス・バックアップを一元管理。インシデント発生時は15分以内に一次応答。" },
  seo:        { path: "/seo/",      title: "SEO対策 | UIARB合同会社",                           desc: "GA4・Search Console・CrUXを活用した数字ベースのSEO改善。技術的SEOからコンテンツ戦略まで一貫対応。" },
  works:      { path: "/works/",    title: "実績紹介 | UIARB合同会社",                           desc: "CV+240%、運用コスト-78%など数字で語れる実績。WordPress・SaaS・ECサイト等のWeb制作・保守事例。" },
  company:    { path: "/company/",  title: "会社概要 | UIARB合同会社",                           desc: "UIARB合同会社の会社概要。沖縄・那覇を拠点に、WordPress保守・開発・SEO対策を提供するWeb制作会社。" },
  contact:    { path: "/contact/",  title: "お問い合わせ・無料相談 | UIARB合同会社",               desc: "30分の無料相談で、現状の課題・予算・ゴールを整理します。その場での見積り・営業は一切行いません。" },
  blog:       { path: "/blog/",     title: "ブログ・お役立ち記事 | UIARB合同会社",                desc: "WordPress保守・セキュリティ・SEO対策・Web制作に関する知識・事例を発信しています。" },
};

function pageFromPath(path) {
  for (const [key, m] of Object.entries(PAGE_META)) {
    if (m.path === path) return key;
  }
  return window.__INITIAL_PAGE || "home";
}

function App() {
  const [page, setPage] = React.useState(() => pageFromPath(location.pathname));
  const [contactTab, setContactTab] = React.useState("simulator");
  const isFirst = React.useRef(true);

  // URL・title・meta を同期
  React.useEffect(() => {
    const m = PAGE_META[page] || PAGE_META.home;
    document.title = m.title;
    document.querySelector('meta[name="description"]')?.setAttribute("content", m.desc);
    document.querySelector('link[rel="canonical"]')?.setAttribute("href", location.origin + m.path);
    if (isFirst.current) {
      history.replaceState({ page }, "", m.path);
      isFirst.current = false;
    } else {
      history.pushState({ page }, "", m.path);
    }
  }, [page]);

  // ブラウザ戻る / 進む
  React.useEffect(() => {
    const onPop = (e) => setPage(e.state?.page || pageFromPath(location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const go = React.useCallback((p, opts) => {
    if (p === "contact" && opts?.tab) setContactTab(opts.tab);
    else if (p !== "contact") setContactTab("simulator");
    setPage(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  React.useEffect(() => { window.__goto = go; }, [go]);

  const Page = (() => {
    switch (page) {
      case "home":     return <Home go={go} tweaks={TWEAKS} />;
      case "services": return <Services go={go} />;
      case "wp-maint": return <WPMaint go={go} />;
      case "seo":      return <SEO go={go} />;
      case "works":    return <Works go={go} />;
      case "company":  return <Company go={go} />;
      case "contact":  return <Contact go={go} initialTab={contactTab} />;
      case "blog":     return <BlogPage go={go} />;
      default:         return <Home go={go} tweaks={TWEAKS} />;
    }
  })();

  return (
    <>
      <TopNav page={page} go={go} />
      <main>{Page}</main>
      <Footer go={go} />
      <ScrollToTop />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);