// 不自动运行
// 服务端组件（默认）：在服务器上取数和渲染，HTML 直接包含常见问题，对 SEO 友好；不会把这段代码发到浏览器。
import { Chat } from "./chat";

interface Faq {
  id: number;
  q: string;
  a: string;
}

async function getFaqs(): Promise<Faq[]> {
  // 真实项目：await fetch("https://cms.example.com/faqs", { next: { revalidate: 300 } })（缓存策略以官方文档为准）
  return [
    { id: 1, q: "多久内可以退货？", a: "签收 7 天内可以无理由退货。" },
    { id: 2, q: "怎么开发票？", a: "在订单详情页申请电子发票。" },
  ];
}

export default async function Page() {
  const faqs = await getFaqs();
  return (
    <main>
      <h1>帮助中心</h1>
      <section>
        {faqs.map((f) => (
          <details key={f.id}>
            <summary>{f.q}</summary>
            <p>{f.a}</p>
          </details>
        ))}
      </section>
      {/* 交互部分是客户端组件，只有它的 JS 会发到浏览器 */}
      <Chat />
    </main>
  );
}