/* Fantula 帮助中心 v3 — 应用层（React via Babel）*/
/* global React, ReactDOM, BLOG_DATA */
const { useState, useEffect, useRef } = React;

// ——————————————————————————————————————————————————————
// API 层：从 Cloudflare Worker 拉取数据
// ——————————————————————————————————————————————————————
const API_BASE = "https://fantula-blog-api.jiangdalin1988.workers.dev";

function mapPost(p) {
  return {
    slug: p.slug,
    product: p.product,
    kind: p.kind || "tutorial",
    featured: p.featured === 1 || p.featured === true,
    readingTime: p.reading_time || 5,
    title:   { zh: p.title_zh   || "", en: p.title_en   || p.title_zh || "", ja: p.title_ja   || p.title_zh || "" },
    excerpt: { zh: p.excerpt_zh || "", en: p.excerpt_en || p.excerpt_zh || "", ja: p.excerpt_ja || p.excerpt_zh || "" },
    body:    { zh: p.content_zh || "", en: p.content_en || "", ja: p.content_ja || "" },
    author:  { name: p.author_name || "", role: p.author_role || "", avatar: p.author_avatar || "" },
    date: (p.created_at || "").split("T")[0] || "2026-01-01",
    tags: { zh: (() => { try { return typeof p.tags_zh === "string" ? JSON.parse(p.tags_zh) : (p.tags_zh || []); } catch(e) { return []; } })() },
    keywords: p.keywords || "",
    cover: { hue: p.cover_hue || 218, label: p.cover_label || "" },
    views: p.views || 0
  };
}

function mapCategory(c) {
  const staticProduct = (window.BLOG_DATA.products || []).find(p => p.slug === c.slug) || {};
  return {
    id: c.slug, slug: c.slug,
    name:     { zh: c.name_zh, en: c.name_en, ja: c.name_ja },
    tagline:  staticProduct.tagline  || { zh: "", en: "", ja: "" },
    color:    `var(--c-${c.color || "yt"})`,
    colorSoft:`var(--c-${c.color || "yt"}-soft)`,
    kicker:   staticProduct.kicker || "0" + c.id
  };
}

async function fetchBlogData() {
  const [catsRes, postsRes] = await Promise.all([
    fetch(`${API_BASE}/api/categories`),
    fetch(`${API_BASE}/api/posts?limit=100`)
  ]);
  const cats  = await catsRes.json();
  const { posts } = await postsRes.json();
  return {
    products: cats.map(mapCategory),
    articles: posts.map(mapPost)
  };
}
// ——————————————————————————————————————————————————————

// ——————————————————————————————————————————————————————
// Top Bar（博客分类导航版）
// ——————————————————————————————————————————————————————
function TopBar({ lang, setLang, currentView, onNavigate }) {
  const catLinks = [
    { id: "home", label: { zh: "首页", en: "Home", ja: "ホーム" } },
    { id: "youtube-premium", label: { zh: "YouTube Premium", en: "YouTube Premium", ja: "YouTube Premium" } },
    { id: "spotify", label: { zh: "Spotify Premium", en: "Spotify Premium", ja: "Spotify Premium" } },
    { id: "channel-membership", label: { zh: "频道会员", en: "Channel", ja: "チャンネル" } },
  ];
  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <a className="site-logo" href="https://www.fantula.com">
          <svg className="site-logo__icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="36" height="36" rx="9" fill="url(#lg)"/>
            <defs>
              <linearGradient id="lg" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stopColor="#178fc6"/>
                <stop offset="100%" stopColor="#0d5a8a"/>
              </linearGradient>
            </defs>
            <text x="7" y="26" fontSize="20" fontWeight="800" fill="white" fontFamily="Inter,sans-serif">F</text>
            <circle cx="26" cy="14" r="4" fill="rgba(255,255,255,0.25)"/>
            <circle cx="26" cy="14" r="2" fill="white"/>
          </svg>
          <div className="site-logo__text">
            <span className="site-logo__name">Fantula</span>
            <span className="site-logo__sub">{lang==="zh"?"帮助中心":lang==="en"?"Help Center":"ヘルプ"}</span>
          </div>
        </a>
        <nav className="site-nav">
          {catLinks.map(l => (
            <button
              key={l.id}
              className={`site-nav__link${(currentView===l.id||(l.id==="home"&&!currentView))?" is-active":""}`}
              onClick={() => onNavigate(l.id==="home"?"home":"category", l.id==="home"?undefined:l.id)}
            >
              {l.label[lang]}
            </button>
          ))}
        </nav>
        <div className="site-header__right">
          <div className="lang-switch">
            {["zh","en","ja"].map(l => (
              <button key={l} className={`lang-switch__btn${lang===l?" is-active":""}`} onClick={() => setLang(l)}>
                {l==="zh"?"中文":l==="en"?"EN":"日本語"}
              </button>
            ))}
          </div>
          <a className="btn-buy" href="https://www.fantula.com/pc/home" target="_blank" rel="noopener noreferrer">
            {lang==="zh"?"立即购买":lang==="en"?"Shop Now":"今すぐ購入"} →
          </a>
        </div>
      </div>
    </header>
  );
}

// ——————————————————————————————————————————————————————
// Breadcrumb
// ——————————————————————————————————————————————————————
function Breadcrumb({ items }) {
  return (
    <nav className="breadcrumb" aria-label="Breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.href ? <a href={it.href} onClick={it.onClick}>{it.label}</a> : <span className="current">{it.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

// ——————————————————————————————————————————————————————
// Left Sidebar（新版，带搜索框 + 分类 + 热门 + CTA）
// ——————————————————————————————————————————————————————
function Sidebar({ products, articles, lang, currentView, onNavigate }) {
  const t = window.BLOG_DATA.i18n[lang] || window.BLOG_DATA.i18n.zh;
  const [search, setSearch] = React.useState("");

  // 热门文章：取前5篇
  const hotArticles = articles.slice(0, 5);

  // 各分类文章数
  const countByProduct = (pid) => articles.filter(a => a.product === pid).length;

  return (
    <aside className="left-sidebar">
      {/* 搜索框 */}
      <div className="sidebar-search">
        <svg className="sidebar-search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <input
          className="sidebar-search__input"
          placeholder={lang==="zh"?"搜索文章、关键词...":lang==="en"?"Search articles...":"記事を検索..."}
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>

      {/* 分类导航 */}
      <div className="sidebar-section">
        <div className="sidebar-section__title">{lang==="zh"?"全部分类":lang==="en"?"Categories":"カテゴリ"}</div>
        <ul className="sidebar-catlist">
          <li>
            <button className={`sidebar-catlist__item${(!currentView || currentView==="home")?" is-active":""}`} onClick={() => onNavigate("home")}>
              <span>{lang==="zh"?"全部文章":lang==="en"?"All Articles":"すべての記事"}</span>
              <span className="sidebar-catlist__count">{articles.length}</span>
            </button>
          </li>
          {products.map(p => (
            <li key={p.id}>
              <button className={`sidebar-catlist__item${currentView===p.id?" is-active":""}`} onClick={() => onNavigate("category", p.id)}>
                <span className={`sidebar-catlist__dot dot--${p.id==="youtube-premium"?"yt":p.id==="spotify"?"sp":"ch"}`}></span>
                <span>{p.name[lang]}</span>
                <span className="sidebar-catlist__count">{countByProduct(p.id)}</span>
              </button>
            </li>
          ))}
        </ul>
      </div>

      {/* 热门文章 */}
      <div className="sidebar-section">
        <div className="sidebar-section__title">{lang==="zh"?"热门文章":lang==="en"?"Popular":"人気記事"}</div>
        <ul className="sidebar-hotlist">
          {hotArticles.map((a,i) => (
            <li key={a.slug}>
              <button className="sidebar-hotlist__item" onClick={() => onNavigate("article", a.slug)}>
                <span className="sidebar-hotlist__num">{String(i+1).padStart(2,"0")}</span>
                <span className="sidebar-hotlist__title">{a.title[lang]||a.title.zh}</span>
              </button>
            </li>
          ))}
        </ul>
      </div>

      {/* 商品 CTA */}
      <div className="sidebar-section">
        <div className="sidebar-section__title">{t.ctaSectionTitle||"立即购买"}</div>
        {window.BLOG_DATA.ctaCards.map(card => (
          <a key={card.id} className="sidebar-cta-card" href={card.url} target="_blank" rel="noopener noreferrer">
            <div className="sidebar-cta-card__head">
              <span className={`sidebar-cta-card__tag tag--${card.tagClass}`}>{card.name[lang]}</span>
              <span className="sidebar-cta-card__badge">{card.badge[lang]}</span>
            </div>
            <div className="sidebar-cta-card__tagline">{card.tagline[lang]}</div>
            <div className="sidebar-cta-card__price">
              {t.ctaPricePrefix} <strong>{card.price}</strong> {t.ctaPriceSuffix}
            </div>
            <div className="sidebar-cta-card__btn"><span>{t.ctaBuyBtn||"立即购买"}</span><span>→</span></div>
          </a>
        ))}
      </div>
    </aside>
  );
}

// ——————————————————————————————————————————————————————
// Article Row（紧凑行样式）
// ——————————————————————————————————————————————————————
function ArticleRow({ article, lang, onNavigate }) {
  const dateFmt = (article.date||"").slice(0,10);
  const product = window.BLOG_DATA.products.find(p => p.id === article.product);
  const klass = article.product === "youtube-premium" ? "yt" : article.product === "spotify" ? "sp" : "ch";
  const kindLabel = article.kind === "tutorial" ? (lang==="zh"?"教程":lang==="en"?"Tutorial":"チュートリアル") :
                    article.kind === "guide"    ? (lang==="zh"?"攻略":lang==="en"?"Guide":"ガイド") :
                                                  (lang==="zh"?"资讯":lang==="en"?"News":"ニュース");
  return (
    <article className="article-row" onClick={() => onNavigate("article", article.slug)}>
      <div className={`article-row__stripe stripe--${klass}`}></div>
      <div className="article-row__body">
        <div className="article-row__tags">
          <span className={`article-row__cat cat--${klass}`}>{product ? product.name[lang] : ""}</span>
          <span className="article-row__kind">{kindLabel}</span>
          {article.featured && <span className="article-row__featured">{lang==="zh"?"精选":lang==="en"?"Featured":"注目"}</span>}
        </div>
        <h3 className="article-row__title">{article.title[lang] || article.title.zh}</h3>
        <div className="article-row__meta">
          <span>{dateFmt}</span>
          <span>·</span>
          <span>{lang==="zh"?`${article.readingTime} 分钟`:lang==="en"?`${article.readingTime} min`:`${article.readingTime}分`}</span>
          {article.author?.name && <><span>·</span><span>{article.author.name}</span></>}
        </div>
      </div>
      <span className="article-row__arrow">→</span>
    </article>
  );
}

// ——————————————————————————————————————————————————————
// Home Page
// ——————————————————————————————————————————————————————
function HomePage({ lang, navigate }) {
  const articles = window.BLOG_DATA.articles;

  return (
    <div className="article-list">
      {articles.length === 0 ? (
        <div style={{ padding: 60, textAlign: "center", color: "var(--text-4)", background: "var(--bg-card)", borderRadius: 8, border: "1px solid var(--border)" }}>
          {lang==="zh"?"没有找到文章。":lang==="en"?"No articles found.":"記事が見つかりません。"}
        </div>
      ) : articles.map(a => <ArticleRow key={a.slug} article={a} lang={lang} onNavigate={navigate}/>)}
    </div>
  );
}

// ——————————————————————————————————————————————————————
// Category Page
// ——————————————————————————————————————————————————————
function CategoryPage({ lang, slug, navigate }) {
  const products = window.BLOG_DATA.products;
  const product = products.find(p => p.slug === slug) || products[0];
  const articles = window.BLOG_DATA.articles;
  const filtered = articles.filter(a => a.product === product.id);

  return (
    <div className="article-list">
      {filtered.length === 0 ? (
        <div style={{ padding: 60, textAlign: "center", color: "var(--text-4)", background: "var(--bg-card)", borderRadius: 8, border: "1px solid var(--border)" }}>
          {lang==="zh"?"该分类暂无文章。":lang==="en"?"No articles in this category.":"この分類に記事がありません。"}
        </div>
      ) : filtered.map(a => <ArticleRow key={a.slug} article={a} lang={lang} onNavigate={navigate}/>)}
    </div>
  );
}

// ——————————————————————————————————————————————————————
// Article Page（左边栏 + 正文布局）
// ——————————————————————————————————————————————————————
function ArticlePage({ lang, slug, navigate, products, articles, onNavigate }) {
  const t = window.BLOG_DATA.i18n[lang] || window.BLOG_DATA.i18n.zh;
  const idx = articles.findIndex(a => a.slug === slug);
  const article = idx >= 0 ? articles[idx] : articles[0];
  const product = (products || window.BLOG_DATA.products).find(p => p.id === article.product);
  const klass = article.product === "youtube-premium" ? "yt" : article.product === "spotify" ? "sp" : "ch";
  const related = articles.filter(a => a.product === article.product && a.slug !== article.slug).slice(0, 4);
  const isHeadline = article.slug === "or-ccseh-05-fix-2026";
  const navFn = onNavigate || navigate;

  // Schema.org 结构化数据 + per-article SEO
  useEffect(() => {
    if (!article) return;
    const existing = document.getElementById("schema-article");
    if (existing) existing.remove();
    const schema = {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": article.title[lang] || article.title.zh,
      "description": article.excerpt[lang] || article.excerpt.zh,
      "datePublished": article.date,
      "dateModified": article.date,
      "author": {
        "@type": "Person",
        "name": article.author?.name || "凡图拉编辑部"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Fantula",
        "logo": { "@type": "ImageObject", "url": "https://www.fantula.com/favicon.ico" }
      },
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": `https://www.fantula.com/blog/article/${article.slug}`
      }
    };
    const el = document.createElement("script");
    el.id = "schema-article";
    el.type = "application/ld+json";
    el.textContent = JSON.stringify(schema);
    document.head.appendChild(el);

    // per-article title & description
    document.title = `${article.title[lang]||article.title.zh} — Fantula 帮助中心`;
    let descEl = document.querySelector('meta[name="description"]');
    if (descEl) descEl.setAttribute("content", article.excerpt[lang]||article.excerpt.zh||"");

    return () => {
      document.title = "帮助中心 — Fantula · 流媒体会员充值教程";
      if (descEl) descEl.setAttribute("content", "Fantula 帮助中心：YouTube Premium、Spotify、频道会员充值教程，报错排查，家庭组拼车攻略。");
      const s = document.getElementById("schema-article"); if (s) s.remove();
    };
  }, [article, lang]);

  return (
    <div>
      {/* 面包屑 */}
      <div className="container">
        <div className="breadcrumb">
          <button onClick={() => navFn("home")} className="bc-link">凡图拉</button>
          <span className="bc-sep">/</span>
          <button onClick={() => navFn("home")} className="bc-link">{lang==="zh"?"帮助中心":lang==="en"?"Help Center":"ヘルプ"}</button>
          <span className="bc-sep">/</span>
          <button onClick={() => navFn("category", article.product)} className="bc-link">{product ? product.name[lang] : ""}</button>
          <span className="bc-sep">/</span>
          <span className="bc-current">{(article.title[lang]||article.title.zh||"").slice(0,20)}...</span>
        </div>
      </div>
      {/* 文章页主体：左边栏 + 正文 */}
      <div className="container">
        <div className="help-layout">
          {/* 左边栏复用 Sidebar 组件 */}
          <Sidebar
            products={products || window.BLOG_DATA.products}
            articles={articles}
            lang={lang}
            currentView={article.product}
            onNavigate={navFn}
          />
          {/* 文章正文 */}
          <main className="help-main article-content">
            <div className="article-page__header">
              <div className="article-page__tags">
                <span className={`article-row__cat cat--${klass}`}>{product ? product.name[lang] : ""}</span>
              </div>
              <h1 className="article-page__title">{article.title[lang] || article.title.zh}</h1>
              <div className="article-page__meta">
                <span>{(article.date||"").slice(0,10)}</span>
                <span>·</span>
                <span>{lang==="zh"?`${article.readingTime} 分钟阅读`:lang==="en"?`${article.readingTime} min read`:`${article.readingTime}分読`}</span>
                {article.author?.name && <><span>·</span><span>{article.author.name}</span></>}
              </div>
            </div>
            <div className="article-page__body">
              {(article.body && (article.body[lang] || article.body.zh))
                ? <div dangerouslySetInnerHTML={{__html: article.body[lang] || article.body.zh}}/>
                : isHeadline ? (
                  <React.Fragment>
                    <p>如果你最近一次试图给 Google 账号开通 YouTube Premium，弹出 <code>OR-CCSEH-05</code> 这串错误码——别先怪 Google，也别先换卡。这是一类<strong>支付通道被风控</strong>的提示，但它的根因不止一个，对应的解法也不止一种。</p>
                    <h2>OR-CCSEH-05 到底是什么</h2>
                    <p>这条报错码出现在 Google Play / YouTube Premium 升级页面，文案通常是「出现错误，请重试」，并附带 <code>OR-CCSEH-05</code> 字样。我们在 2026 年 4 月这一周的工单里复盘了 142 单，<strong>91% 与支付通道相关，9% 与账号年龄/区域相关</strong>。</p>
                    <div className="article-callout">
                      <strong>编辑速记</strong>
                      <p>这串码并不一定意味着你的卡有问题。Google 在最近半年把它的判定面扩大到了「支付通道整体可信度」，包括 IP 段、卡 BIN、账单地址、设备指纹的联合得分。</p>
                    </div>
                    <h2>三类常见根因排查</h2>
                    <p>把所有报错按发生频次拆开后，你会发现 OR-CCSEH-05 几乎总是落在以下三类之一。先<strong>对号入座</strong>，再决定要不要往下走。</p>
                    <table>
                      <thead><tr><th>类别</th><th>触发场景</th><th>本月占比</th></tr></thead>
                      <tbody>
                        <tr><td>① 支付通道污染</td><td>同一张虚拟卡近期被多账号反复绑定</td><td>54%</td></tr>
                        <tr><td>② IP / 区域错配</td><td>账号注册地与 IP 地不一致</td><td>27%</td></tr>
                        <tr><td>③ 账号风控冷启动</td><td>新建账号 7 天内尝试升级</td><td>10%</td></tr>
                        <tr><td>④ 其他</td><td>卡片本身被拒</td><td>9%</td></tr>
                      </tbody>
                    </table>
                    <h2>自助方案：原生 IP + 虚拟卡</h2>
                    <p>整个链路是：<strong>原生住宅 IP 节点 → 干净的 Google 账号 → 与 IP 同区的虚拟卡 → 同区账单地址</strong>。任何一环错位都会触发 CCSEH-05。</p>
                    <h2>拼车方案：家庭组</h2>
                    <p>如果你只是想自用、不想研究底层，<strong>加入一个稳定家庭组</strong>是 ROI 最高的选择。</p>
                  </React.Fragment>
                ) : (
                  <div>
                    <h2>{lang==="zh"?"背景":lang==="en"?"Background":"背景"}</h2>
                    <p>{lang==="zh"?"这是一篇示例正文，留作编辑部按周更新填充。":"Placeholder content. Editorial team will update this article weekly."}</p>
                    <h2>{lang==="zh"?"操作步骤":lang==="en"?"Steps":"手順"}</h2>
                    <p>{lang==="zh"?"占位段落。会包含具体步骤、工具链路、与凡图拉服务的衔接点。":"Placeholder. Will contain step-by-step instructions."}</p>
                    <div className="article-callout">
                      <strong>{lang==="zh"?"提示":lang==="en"?"Tip":"ヒント"}</strong>
                      <p>{lang==="zh"?"正式上线时，这里替换为本文真实正文。":"Replace with real article content when publishing."}</p>
                    </div>
                  </div>
                )
              }
            </div>
            {/* 相关文章 */}
            {related.length > 0 && (
              <div className="article-page__related">
                <h3 className="article-page__related-title">{lang==="zh"?"相关文章":lang==="en"?"Related Articles":"関連記事"}</h3>
                <div className="article-related-grid">
                  {related.map(a => <ArticleRow key={a.slug} article={a} lang={lang} onNavigate={navFn}/>)}
                </div>
              </div>
            )}
            {/* 文章底部 CTA */}
            <div className="article-page__cta">
              {window.BLOG_DATA.ctaCards.map(card => (
                <a key={card.id} className="article-cta-card" href={card.url} target="_blank" rel="noopener noreferrer">
                  <div className="article-cta-card__left">
                    <span className={`article-row__cat cat--${card.tagClass}`}>{card.name[lang]}</span>
                    <span className="article-cta-card__tagline">{card.tagline[lang]}</span>
                  </div>
                  <div className="article-cta-card__right">
                    <span className="article-cta-card__price"><strong>{card.price}</strong> {(window.BLOG_DATA.i18n[lang]||window.BLOG_DATA.i18n.zh).ctaPriceSuffix}</span>
                    <span className="article-cta-card__btn">{(window.BLOG_DATA.i18n[lang]||window.BLOG_DATA.i18n.zh).ctaBuyBtn} →</span>
                  </div>
                </a>
              ))}
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

// ——————————————————————————————————————————————————————
// Footer (matches main site dark)
// ——————————————————————————————————————————————————————
function Footer({ lang }) {
  const products = window.BLOG_DATA.products;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <span className="logo__mark"></span>
              <span>Fantula 凡图拉</span>
            </div>
            <p className="footer__brand">境外流媒体会员代充平台。十年开发经验，覆盖 YouTube Premium、Spotify、频道会员三大产品线。本帮助中心由凡图拉编辑部维护。</p>
          </div>
          <div className="footer__col">
            <h4>产品</h4>
            <ul>{window.BLOG_DATA.ctaCards.map(card => <li key={card.id}><a href={card.url}>{card.name[lang]}</a></li>)}</ul>
          </div>
          <div className="footer__col">
            <h4>关于</h4>
            <ul>
              <li><a href="https://www.fantula.com/pc/company">公司简介</a></li>
              <li><a href="https://www.fantula.com/pc/about-us">我们的使命</a></li>
              <li><a href="https://www.fantula.com/pc/advantages">我们的优势</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>支持</h4>
            <ul>
              <li><a href="https://www.fantula.com/pc/faq">常见问题</a></li>
              <li><a href="https://www.fantula.com/pc/privacy">隐私政策</a></li>
              <li><a href="https://www.fantula.com/pc/policy">用户协议</a></li>
              <li><a href="https://www.fantula.com/pc/refund">退款政策</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2019–2026 Fantula 凡图拉</span>
          <span>www.fantula.com</span>
        </div>
      </div>
    </footer>
  );
}

// ——————————————————————————————————————————————————————
// App Shell
// ——————————————————————————————————————————————————————
const BLOG_BASE = "/blog";

function App() {
  const parseRoute = () => {
    // 读取真实 URL 路径（支持 Google 抓取），同时兼容旧 hash 链接
    let path = window.location.pathname.replace(BLOG_BASE, "").replace(/^\/+/, "") || "";
    if (!path && window.location.hash) {
      // 兼容旧 hash 路由（如 /#/article/slug）
      path = window.location.hash.replace(/^#\//, "");
    }
    const parts = path.split("/").filter(Boolean);
    const page = parts[0] || "home";
    const slug = parts[1] || null;
    return { page, slug };
  };
  const [route, setRoute] = useState(parseRoute());
  const [lang, setLang] = useState("zh");
  const [dataReady, setDataReady] = useState(false);

  useEffect(() => {
    fetchBlogData()
      .then(({ products, articles }) => {
        window.BLOG_DATA.products = products;
        window.BLOG_DATA.articles = articles;
        setDataReady(true);
      })
      .catch(err => {
        console.error("API fetch failed:", err);
        setDataReady(true); // fallback to static data
      });
  }, []);

  useEffect(() => {
    // 处理浏览器前进/后退
    const onPop = () => { setRoute(parseRoute()); window.scrollTo({ top: 0 }); };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // SEO
  useEffect(() => {
    const data = window.BLOG_DATA;
    let title = "帮助中心 — Fantula · 流媒体会员充值教程";
    let desc = "Fantula 帮助中心：YouTube Premium、Spotify、频道会员充值教程，报错排查，家庭组拼车攻略。";
    if (route.page === "category") {
      const p = data.products.find(x => x.slug === route.slug);
      if (p) { title = `${p.name[lang]} · 帮助中心 · Fantula`; desc = `${p.name[lang]} 全部教程与攻略。${p.tagline[lang]}。`; }
    } else if (route.page === "article") {
      const a = data.articles.find(x => x.slug === route.slug);
      if (a) { title = `${a.title[lang] || a.title.zh} · 帮助中心 · Fantula`; desc = (a.excerpt[lang] || a.excerpt.zh).slice(0, 158); }
    }
    document.title = title;
    let m = document.querySelector('meta[name="description"]');
    if (m) m.setAttribute("content", desc);
    document.documentElement.lang = lang === "zh" ? "zh-CN" : lang === "ja" ? "ja-JP" : "en-US";
  }, [route, lang]);

  function navigate(page, slug) {
    const newPath = slug
      ? `${BLOG_BASE}/${page}/${slug}`
      : page === "home" ? BLOG_BASE + "/" : `${BLOG_BASE}/${page}`;
    history.pushState(null, "", newPath);
    setRoute({ page, slug: slug || null });
    window.scrollTo({ top: 0 });
  }

  if (!dataReady) return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",color:"var(--text-3)",fontSize:14}}>
      加载中…
    </div>
  );

  const articles = window.BLOG_DATA.articles;
  const products = window.BLOG_DATA.products;
  // 当前激活的分类视图（用于 Sidebar 高亮）
  const currentView = route.page === "home" ? "home" : route.page === "category" ? route.slug : null;

  // currentView 用于 TopBar 高亮
  const topBarView = route.page === "home" ? "home" : route.page === "category" ? route.slug : route.page;

  return (
    <div className="page-wrapper">
      <TopBar lang={lang} setLang={setLang} currentView={topBarView} onNavigate={navigate}/>

      {/* Hero banner（仅首页 & 分类页显示） */}
      {route.page !== "article" && (
        <div className="help-center-hero">
          <div className="container">
            <h1>{lang==="zh"?"帮助中心":lang==="en"?"Help Center":"ヘルプセンター"}</h1>
            <p>{lang==="zh"?"了解流媒体订阅的一切 — 教程、攻略、报错排查、家庭组拼车":lang==="en"?"Everything about streaming subscriptions — tutorials, tips, troubleshooting":"ストリーミングサブスクのすべて — チュートリアル、ガイド、トラブルシューティング"}</p>
          </div>
        </div>
      )}

      {/* 文章详情页：独立布局（含自己的 container + help-layout） */}
      {route.page === "article" ? (
        <ArticlePage lang={lang} slug={route.slug} navigate={navigate} products={products} articles={articles} onNavigate={navigate}/>
      ) : (
        <div className="container">
          <div className="help-layout">
            <Sidebar
              products={products}
              articles={articles}
              lang={lang}
              currentView={currentView}
              onNavigate={navigate}
            />
            <main className="help-main">
              {route.page === "home" && <HomePage lang={lang} navigate={navigate}/>}
              {route.page === "category" && <CategoryPage lang={lang} slug={route.slug || "youtube-premium"} navigate={navigate}/>}
            </main>
          </div>
        </div>
      )}

      <Footer lang={lang}/>
    </div>
  );
}

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