(() => {
  const { useState, useEffect } = React;
  const {
    C,
    NS,
    Wrap,
    FONTS,
    TWEAK_DEFAULTS,
    Nav,
    Hero,
    PersonaRouteStrip,
    GuideEntrySection,
    ChipBar,
    RankingSection,
    SceneSection,
    CategorySection,
    AboutStrip,
    TrustBar,
    Footer,
    ProductsPage,
    SceneDetailPage,
    ProductDetailPage,
    CategoryDetailPage,
    GuideListPage,
    GuideArticlePage,
    InfoPage,
    TweaksPanel,
    PRODUCTS,
    PRODUCT_KINDS,
    SCENES,
    CATEGORIES,
    ARTICLES,
    INFO_PAGES,
    getGuideVisual,
  } = window.MamoruApp;

  const SITE_NAME = "morillion";
  const SITE_ORIGIN_FALLBACK = "https://yorumichi-no-shiori.morimitsusakai.workers.dev";
  const DEFAULT_OG_IMAGE = "/assets/images/hero-night-walk-photo.png";

  const KIND_SLUGS = {
    防犯ブザー: "security-buzzer",
    防犯スプレー: "safety-spray",
    小型ライト: "led-light",
    GPSタグ: "gps-tag",
  };

  const CATEGORY_SLUGS = {
    A: "prevent-and-deter",
    B: "notice-and-alert",
    C: "call-for-help",
    D: "reduce-harm",
  };

  const INFO_PATHS = {
    about: "/about/",
    affiliate: "/affiliate/",
    privacy: "/privacy/",
  };

  const KIND_LABELS_FOR_SEO = {
    防犯ブザー: "防犯ブザー",
    防犯スプレー: "防犯スプレー",
    小型ライト: "LEDライト",
    GPSタグ: "GPSタグ",
  };

  const META_DESCRIPTION_BY_KIND = {
    防犯ブザー:
      "夜道や帰宅時が不安な女性向けに、防犯ブザーの見た目、持ち歩きやすさ、音の出しやすさを比較できるページです。",
    防犯スプレー:
      "女性向け防犯スプレーを比較したい人向けに、携帯しやすさ、使い方、法律面の確認ポイントをやさしく整理しています。",
    小型ライト:
      "夜道や帰宅時に使いやすいLEDライトを比較したい女性向けに、明るさ、サイズ、鍵につけやすさを見やすくまとめたページです。",
    GPSタグ:
      "鍵やバッグの置き忘れ対策も考えたい女性向けに、GPSタグの使い方やスマホ対応を比較しやすく整理したページです。",
  };

  const META_KEYWORDS_BY_KIND = {
    防犯ブザー: "防犯ブザー 比較,女性 防犯グッズ,夜道 防犯,帰宅時 防犯",
    防犯スプレー: "女性 防犯グッズ,防犯スプレー,夜道 防犯,女性 防犯",
    小型ライト: "LEDライト 比較,小型ライト,女性 防犯グッズ,帰宅時 防犯",
    GPSタグ: "GPSタグ,女性 防犯グッズ,一人暮らし 女性 防犯,置き忘れ 防止",
  };

  function getSiteOrigin() {
    if (window.location.protocol === "file:") return SITE_ORIGIN_FALLBACK;
    return window.location.origin || SITE_ORIGIN_FALLBACK;
  }

  function toAbsoluteUrl(pathOrUrl) {
    if (!pathOrUrl) return `${getSiteOrigin()}${DEFAULT_OG_IMAGE}`;
    if (/^https?:\/\//.test(pathOrUrl)) return pathOrUrl;
    const normalized = pathOrUrl.startsWith("/") ? pathOrUrl : `/${pathOrUrl.replace(/^\.\//, "")}`;
    return `${getSiteOrigin()}${normalized}`;
  }

  function normalizePath(path) {
    if (!path) return "/";
    if (path === "/") return "/";
    return path.endsWith("/") ? path : `${path}/`;
  }

  function productPath(id) {
    return `/products/item-${id}/`;
  }

  function kindPath(key) {
    return `/products/${KIND_SLUGS[key] || encodeURIComponent(key)}/`;
  }

  function categoryPath(key) {
    return `/roles/${CATEGORY_SLUGS[key] || encodeURIComponent(key)}/`;
  }

  function scenePath(key) {
    return `/scenes/${encodeURIComponent(key)}/`;
  }

  function guidePath(slug) {
    return `/guides/${slug}/`;
  }

  function pageToPath(page) {
    if (page === "home") return "/";
    if (page === "products") return "/products/";
    if (page === "guides") return "/guides/";
    if (page.startsWith("kind:")) return kindPath(page.replace("kind:", ""));
    if (page.startsWith("scene:")) return scenePath(page.replace("scene:", ""));
    if (page.startsWith("category:")) return categoryPath(page.replace("category:", ""));
    if (page.startsWith("product:")) return productPath(page.replace("product:", ""));
    if (page.startsWith("guide:")) return guidePath(page.replace("guide:", ""));
    if (page.startsWith("info:")) return INFO_PATHS[page.replace("info:", "")] || "/";
    return "/";
  }

  function pathToPage(pathname) {
    const path = normalizePath(pathname || "/");
    if (path === "/") return "home";
    if (path === "/products/") return "products";
    if (path === "/guides/") return "guides";

    const productMatch = path.match(/^\/products\/item-(\d+)\/$/);
    if (productMatch) return `product:${productMatch[1]}`;

    const kindMatch = path.match(/^\/products\/([^/]+)\/$/);
    if (kindMatch) {
      const foundKind = Object.entries(KIND_SLUGS).find(([, slug]) => slug === kindMatch[1]);
      if (foundKind) return `kind:${foundKind[0]}`;
    }

    const sceneMatch = path.match(/^\/scenes\/([^/]+)\/$/);
    if (sceneMatch) return `scene:${decodeURIComponent(sceneMatch[1])}`;

    const categoryMatch = path.match(/^\/roles\/([^/]+)\/$/);
    if (categoryMatch) {
      const foundCategory = Object.entries(CATEGORY_SLUGS).find(([, slug]) => slug === categoryMatch[1]);
      if (foundCategory) return `category:${foundCategory[0]}`;
    }

    const guideMatch = path.match(/^\/guides\/([^/]+)\/$/);
    if (guideMatch && ARTICLES.some((article) => article.slug === guideMatch[1])) return `guide:${guideMatch[1]}`;

    const infoMatch = Object.entries(INFO_PATHS).find(([, infoPath]) => infoPath === path);
    if (infoMatch) return `info:${infoMatch[0]}`;

    return "home";
  }

  function getInitialPage() {
    if (window.location.protocol === "file:") return "home";
    return pathToPage(window.location.pathname);
  }

  function buildBreadcrumbJsonLd(breadcrumbs) {
    return {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      itemListElement: breadcrumbs.map((crumb, index) => ({
        "@type": "ListItem",
        position: index + 1,
        name: crumb.label,
        item: `${getSiteOrigin()}${pageToPath(crumb.page || "home")}`,
      })),
    };
  }

  function buildProductStructuredData(product) {
    const numericPrice = typeof product.price === "string" ? product.price.replace(/[^\d]/g, "") : "";
    const data = {
      "@context": "https://schema.org",
      "@type": "Product",
      name: product.name,
      description: product.desc,
      image: [toAbsoluteUrl(product.imageSrc || DEFAULT_OG_IMAGE)],
      category: product.kind,
      brand: {
        "@type": "Brand",
        name: SITE_NAME,
      },
    };

    if (product.externalUrl) {
      data.offers = {
        "@type": "Offer",
        url: product.externalUrl,
        priceCurrency: "JPY",
        availability: "https://schema.org/InStock",
      };
      if (numericPrice) data.offers.price = numericPrice;
    }

    return data;
  }

  function buildArticleWordCount(article) {
    const text = [
      article.title,
      article.description,
      article.targetReader,
      article.searchIntent,
      ...Object.values(article.sections || {}).flatMap((value) => (Array.isArray(value) ? value : [value])),
      ...(article.faq || []).flatMap((item) => [item.q, item.a]),
    ]
      .filter(Boolean)
      .join("");
    return Math.max(200, text.length);
  }

  function getSeoMeta(page, breadcrumbs) {
    const base = {
      title: `${SITE_NAME} | 20代の一人暮らし女性向け防犯サイト`,
      description:
        "20代の一人暮らし女性向けに、女性 防犯、女性 防犯グッズ、一人暮らし 女性 防犯、女性向け 防犯グッズの入口キーワードから、夜道や帰宅時に使いやすい防犯グッズを比較できるサイトです。",
      keywords:
        "女性 防犯,女性 防犯グッズ,一人暮らし 女性 防犯,女性向け 防犯グッズ,夜道 防犯,帰宅時 防犯,防犯ブザー 比較,LEDライト 比較",
      path: pageToPath(page),
      image: DEFAULT_OG_IMAGE,
      type: "website",
      structuredData: [
        {
          "@context": "https://schema.org",
          "@type": "WebSite",
          name: SITE_NAME,
          url: getSiteOrigin(),
          description:
            "一人暮らし女性向けに、夜道や帰宅時に使いやすい防犯グッズを落ち着いて比較できる情報サイトです。",
        },
      ],
    };

    if (page === "home") {
      return {
        ...base,
        title: "女性向け防犯グッズと一人暮らし女性の防犯対策 | morillion",
        structuredData: [
          ...base.structuredData,
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: "女性向け防犯グッズと一人暮らし女性の防犯対策",
            url: `${getSiteOrigin()}/`,
            description: base.description,
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page === "products") {
      return {
        ...base,
        title: "女性向け防犯グッズ一覧 | 夜道・帰宅時に使いやすい防犯グッズ比較",
        description:
          "女性向け防犯グッズを一覧で比べたい人向けに、防犯ブザー、LEDライト、GPSタグ、防犯スプレーをやさしく整理した比較ページです。",
        path: "/products/",
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: "女性向け防犯グッズ一覧",
            url: `${getSiteOrigin()}/products/`,
            description:
              "夜道や帰宅時に使いやすい女性向け防犯グッズを、防犯ブザー、LEDライト、GPSタグ、防犯スプレーから比べられるページです。",
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page === "guides") {
      return {
        ...base,
        title: "女性向け防犯グッズの選び方ガイド | 夜道・帰宅時の不安に備える記事一覧",
        description:
          "女性向け防犯グッズ、一人暮らし女性の防犯対策、夜道が不安な女性向けの選び方を、やさしい文体で読めるガイド一覧です。",
        path: "/guides/",
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: "女性向け防犯グッズの選び方ガイド",
            url: `${getSiteOrigin()}/guides/`,
            description:
              "女性 防犯、防犯ブザー比較、LEDライト比較などの検索意図から読み進めやすいガイド一覧です。",
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page.startsWith("kind:")) {
      const key = page.replace("kind:", "");
      const label = KIND_LABELS_FOR_SEO[key] || key;
      return {
        ...base,
        title: `${label}比較 | 夜道や帰宅時が不安な女性向けの選び方`,
        description: META_DESCRIPTION_BY_KIND[key] || base.description,
        keywords: META_KEYWORDS_BY_KIND[key] || base.keywords,
        path: kindPath(key),
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: `${label}比較`,
            url: `${getSiteOrigin()}${kindPath(key)}`,
            description: META_DESCRIPTION_BY_KIND[key] || base.description,
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page.startsWith("category:")) {
      const key = page.replace("category:", "");
      const category = CATEGORIES.find((item) => item.key === key);
      const roleTitle = category ? `${category.key} / ${category.label}` : key;
      return {
        ...base,
        title: `${roleTitle}で選ぶ女性向け防犯グッズ | morillion`,
        description:
          "女性向け防犯グッズを、予防・察知・助けを呼ぶ・被害を最小限にする役割ごとに整理して比べやすくしたページです。",
        path: categoryPath(key),
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: `${roleTitle}で選ぶ女性向け防犯グッズ`,
            url: `${getSiteOrigin()}${categoryPath(key)}`,
            description:
              "夜道や帰宅時の不安に合わせて、防犯グッズを役割ごとに比べやすくしたページです。",
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page.startsWith("scene:")) {
      const key = page.replace("scene:", "");
      return {
        ...base,
        title: `${key}が不安な女性向け防犯グッズ | morillion`,
        description: `${key}が不安な女性向けに、防犯ブザーやLEDライトなど持ち歩きやすい防犯グッズを落ち着いて比較できるページです。`,
        path: scenePath(key),
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            name: `${key}が不安な女性向け防犯グッズ`,
            url: `${getSiteOrigin()}${scenePath(key)}`,
            description: `${key}が不安な時に使いやすい防犯グッズを比較するページです。`,
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page.startsWith("product:")) {
      const id = Number(page.replace("product:", ""));
      const product = PRODUCTS.find((item) => item.id === id);
      if (!product) return base;
      const kindLabel = KIND_LABELS_FOR_SEO[product.kind] || product.kind;
      return {
        ...base,
        title: `${product.name} | ${kindLabel}を比較したい女性向け商品詳細`,
        description:
          product.desc ||
          `${kindLabel}を比較したい女性向けに、${product.name}の特徴、使い方、向いている人、比較ポイントを整理した商品詳細ページです。`,
        path: productPath(id),
        image: product.imageSrc || DEFAULT_OG_IMAGE,
        structuredData: [buildProductStructuredData(product), buildBreadcrumbJsonLd(breadcrumbs)],
      };
    }

    if (page.startsWith("guide:")) {
      const slug = page.replace("guide:", "");
      const article = ARTICLES.find((item) => item.slug === slug);
      if (!article) return base;
      const visual = getGuideVisual(article);
      return {
        ...base,
        title: `${article.title} | ${SITE_NAME}`,
        description: article.description,
        keywords: `${article.searchIntent},女性 防犯,女性 防犯グッズ,一人暮らし 女性 防犯`,
        path: guidePath(slug),
        type: "article",
        image: visual.src || DEFAULT_OG_IMAGE,
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "Article",
            headline: article.title,
            description: article.description,
            dateModified: article.updatedAt,
            datePublished: article.updatedAt,
            inLanguage: "ja-JP",
            isAccessibleForFree: true,
            keywords: article.searchIntent,
            articleSection: article.category,
            wordCount: buildArticleWordCount(article),
            author: {
              "@type": "Organization",
              name: SITE_NAME,
            },
            publisher: {
              "@type": "Organization",
              name: SITE_NAME,
            },
            mainEntityOfPage: `${getSiteOrigin()}${guidePath(slug)}`,
            image: [toAbsoluteUrl(visual.src || DEFAULT_OG_IMAGE)],
            about: [
              ...article.relatedScenes.map((scene) => ({ "@type": "Thing", name: scene })),
              ...article.relatedCategories.map((category) => ({ "@type": "Thing", name: category })),
            ],
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    if (page.startsWith("info:")) {
      const key = page.replace("info:", "");
      const info = INFO_PAGES.find((item) => item.key === key);
      if (!info) return base;
      return {
        ...base,
        title: `${info.title} | ${SITE_NAME}`,
        description: info.description,
        path: INFO_PATHS[key] || "/",
        structuredData: [
          {
            "@context": "https://schema.org",
            "@type": "WebPage",
            name: info.title,
            url: `${getSiteOrigin()}${INFO_PATHS[key] || "/"}`,
            description: info.description,
          },
          buildBreadcrumbJsonLd(breadcrumbs),
        ],
      };
    }

    return base;
  }

  function setMetaContent(id, value, attribute = "content") {
    const element = document.getElementById(id);
    if (!element || value == null) return;
    element.setAttribute(attribute, value);
  }

  function App() {
    const [tweaks, setTweaks] = useState(() => {
      try {
        const saved = localStorage.getItem("mamoru-v3");
        return saved ? { ...TWEAK_DEFAULTS, ...JSON.parse(saved) } : TWEAK_DEFAULTS;
      } catch {
        return TWEAK_DEFAULTS;
      }
    });
    const [showTweaks, setShowTweaks] = useState(false);
    const [page, setPage] = useState(getInitialPage);

    useEffect(() => {
      try {
        localStorage.setItem("mamoru-v3", JSON.stringify(tweaks));
      } catch {}
    }, [tweaks]);

    useEffect(() => {
      const h = (e) => {
        if (e.data?.type === "__activate_edit_mode") setShowTweaks(true);
        if (e.data?.type === "__deactivate_edit_mode") setShowTweaks(false);
        if (e.data?.type === "__edit_mode_set_keys") setTweaks((t) => ({ ...t, ...e.data.edits }));
      };
      window.addEventListener("message", h);
      window.parent.postMessage({ type: "__edit_mode_available" }, "*");
      return () => window.removeEventListener("message", h);
    }, []);

    useEffect(() => {
      if (window.location.protocol === "file:") return undefined;
      const handlePopState = () => {
        setPage(pathToPage(window.location.pathname));
        window.scrollTo({ top: 0, behavior: "auto" });
      };
      window.addEventListener("popstate", handlePopState);
      return () => window.removeEventListener("popstate", handlePopState);
    }, []);

    const setTweaksAndSync = (updater) => {
      const next = typeof updater === "function" ? updater(tweaks) : updater;
      setTweaks(next);
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
    };

    const heroFont = FONTS[tweaks.heroFont]?.hero || FONTS.shippori.hero;

    const getPageMeta = () => {
      if (page === "home") return { section: "トップ", title: "夜道の防犯グッズ案内", desc: "サイトの入口" };
      if (page === "products") return { section: "商品一覧", title: "防犯グッズを比べて選ぶ", desc: "全商品を比較中" };
      if (page.startsWith("kind:")) {
        const key = page.replace("kind:", "");
        const kind = PRODUCT_KINDS.find((item) => item.key === key);
        return { section: "製品種類", title: kind?.label || key, desc: "種類から探す" };
      }
      if (page === "guides") return { section: "ガイド", title: "防犯グッズの選び方ガイド", desc: "記事一覧" };
      if (page.startsWith("scene:")) {
        const key = page.replace("scene:", "");
        const scene = SCENES.find((item) => item.key === key);
        return { section: "シーン別", title: scene?.label || key, desc: "場面から探す" };
      }
      if (page.startsWith("category:")) {
        const key = page.replace("category:", "");
        const category = CATEGORIES.find((item) => item.key === key);
        return { section: "機能別", title: category ? `${category.key} / ${category.label}` : key, desc: "役割から探す" };
      }
      if (page.startsWith("product:")) {
        const id = Number(page.replace("product:", ""));
        const product = PRODUCTS.find((item) => item.id === id);
        return { section: "商品詳細", title: product?.name || "商品詳細", desc: "商品の使い方と注意点" };
      }
      if (page.startsWith("guide:")) {
        const slug = page.replace("guide:", "");
        const article = ARTICLES.find((item) => item.slug === slug);
        return { section: "記事", title: article?.title || "ガイド記事", desc: "選び方を読む" };
      }
      if (page.startsWith("info:")) {
        const key = page.replace("info:", "");
        const info = INFO_PAGES.find((item) => item.key === key);
        return { section: "サイト情報", title: info?.title || "サイト情報", desc: "運営情報" };
      }
      return { section: "現在地", title: SITE_NAME, desc: "表示中のページ" };
    };

    const pageMeta = getPageMeta();

    const getBreadcrumbs = () => {
      const top = { label: "トップ", page: "home" };
      if (page === "home") return [{ ...top, current: true }];
      if (page === "products") return [top, { label: "商品一覧", page: "products", current: true }];
      if (page.startsWith("kind:")) {
        const key = page.replace("kind:", "");
        const kind = PRODUCT_KINDS.find((item) => item.key === key);
        return [top, { label: "商品一覧", page: "products" }, { label: kind?.label || key, current: true }];
      }
      if (page === "guides") return [top, { label: "ガイド", page: "guides", current: true }];
      if (page.startsWith("scene:")) {
        const key = page.replace("scene:", "");
        const scene = SCENES.find((item) => item.key === key);
        return [top, { label: "シーン別", page: "scene:夜道" }, { label: scene?.label || key, current: true }];
      }
      if (page.startsWith("category:")) {
        const key = page.replace("category:", "");
        const category = CATEGORIES.find((item) => item.key === key);
        return [top, { label: "役割別", page: "category:A" }, { label: category ? `${category.key} / ${category.label}` : key, current: true }];
      }
      if (page.startsWith("product:")) {
        return [top, { label: "商品一覧", page: "products" }, { label: "商品詳細", current: true }];
      }
      if (page.startsWith("guide:")) {
        const slug = page.replace("guide:", "");
        const article = ARTICLES.find((item) => item.slug === slug);
        return [top, { label: "ガイド", page: "guides" }, { label: article?.title || "ガイド記事", current: true }];
      }
      if (page.startsWith("info:")) {
        const key = page.replace("info:", "");
        const info = INFO_PAGES.find((item) => item.key === key);
        return [top, { label: "サイト情報", page: "info:about" }, { label: info?.title || "サイト情報", current: true }];
      }
      return [top, { label: pageMeta.title, current: true }];
    };

    const breadcrumbs = getBreadcrumbs();

    useEffect(() => {
      if (typeof document === "undefined") return;
      const seo = getSeoMeta(page, breadcrumbs);
      const canonicalUrl = `${getSiteOrigin()}${seo.path}`;
      const imageUrl = toAbsoluteUrl(seo.image);

      document.title = seo.title;
      setMetaContent("meta-description", seo.description);
      setMetaContent("meta-keywords", seo.keywords);
      setMetaContent("meta-canonical", canonicalUrl, "href");
      setMetaContent("meta-og-type", seo.type);
      setMetaContent("meta-og-title", seo.title);
      setMetaContent("meta-og-description", seo.description);
      setMetaContent("meta-og-url", canonicalUrl);
      setMetaContent("meta-og-image", imageUrl);
      setMetaContent("meta-twitter-title", seo.title);
      setMetaContent("meta-twitter-description", seo.description);
      setMetaContent("meta-twitter-image", imageUrl);

      let structuredDataNode = document.getElementById("structured-data");
      if (!structuredDataNode) {
        structuredDataNode = document.createElement("script");
        structuredDataNode.type = "application/ld+json";
        structuredDataNode.id = "structured-data";
        document.head.appendChild(structuredDataNode);
      }
      structuredDataNode.textContent = JSON.stringify(seo.structuredData);
    }, [page]);

    const goPage = (nextPage) => {
      setPage(nextPage);
      if (window.location.protocol !== "file:") {
        const nextPath = pageToPath(nextPage);
        if (window.location.pathname !== nextPath) {
          window.history.pushState({ page: nextPage }, "", nextPath);
        }
      }
      window.scrollTo({ top: 0, behavior: "auto" });
    };

    return (
      <div style={{ fontFamily: NS, color: C.text, background: C.bg, minHeight: "100vh" }}>
        <Nav heroFont={heroFont} setPage={goPage} currentPage={page} />
        <div style={{ background: C.bg, borderBottom: `1px solid ${C.border}` }}>
          <Wrap style={{ padding: "10px 40px", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <span style={{ fontSize: 11, fontFamily: NS, color: C.accent, fontWeight: 700, letterSpacing: "0.08em", flexShrink: 0 }}>現在地</span>
            {breadcrumbs.map((crumb, index) => (
              <React.Fragment key={`${crumb.label}-${index}`}>
                {index > 0 && <span style={{ fontSize: 12, fontFamily: NS, color: C.mutedLight }}>/</span>}
                {crumb.current ? (
                  <span style={{ fontSize: 13, fontFamily: NS, color: C.navy, fontWeight: 700, lineHeight: 1.6 }}>{crumb.label}</span>
                ) : (
                  <button
                    onClick={() => goPage(crumb.page)}
                    style={{
                      fontSize: 12,
                      fontFamily: NS,
                      color: C.muted,
                      borderBottom: `1px solid ${C.borderAccent}`,
                      paddingBottom: 1,
                      lineHeight: 1.6,
                    }}
                  >
                    {crumb.label}
                  </button>
                )}
              </React.Fragment>
            ))}
          </Wrap>
        </div>
        {page === "home" && (
          <>
            <Hero heroFont={heroFont} setPage={goPage} />
            <PersonaRouteStrip setPage={goPage} />
            <ChipBar setPage={goPage} />
            <RankingSection setPage={goPage} />
            <CategorySection setPage={goPage} />
            <SceneSection setPage={goPage} />
            <GuideEntrySection setPage={goPage} />
            <AboutStrip heroFont={heroFont} setPage={goPage} />
            <TrustBar />
          </>
        )}
        {page === "products" && <ProductsPage heroFont={heroFont} setPage={goPage} />}
        {page.startsWith("kind:") && <ProductsPage heroFont={heroFont} setPage={goPage} initialKind={page.replace("kind:", "")} />}
        {page.startsWith("scene:") && <SceneDetailPage sceneKey={page.replace("scene:", "")} setPage={goPage} />}
        {page.startsWith("product:") && <ProductDetailPage productId={page.replace("product:", "")} setPage={goPage} />}
        {page.startsWith("category:") && <CategoryDetailPage categoryKey={page.replace("category:", "")} setPage={goPage} />}
        {page === "guides" && <GuideListPage setPage={goPage} />}
        {page.startsWith("guide:") && <GuideArticlePage slug={page.replace("guide:", "")} setPage={goPage} />}
        {page.startsWith("info:") && <InfoPage pageKey={page.replace("info:", "")} setPage={goPage} />}
        <Footer setPage={goPage} />
        <TweaksPanel tweaks={tweaks} setTweaks={setTweaksAndSync} show={showTweaks} />
      </div>
    );
  }

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