import { appRouter } from "@repo/core-api";
import { bindAllProduction } from "../../server/bind-production";

export default async function AboutPage() {
  await bindAllProduction();
  const caller = appRouter.createCaller({});
  const page = await caller.marketingPages.pageBySlug({ slug: "about" });

  if (!page) {
    return (
      <main>
        <h1>About</h1>
        <p>This page hasn't been published yet.</p>
      </main>
    );
  }

  return (
    <main>
      <article>
        <header>
          <h1>{page.hero.heading}</h1>
          {page.hero.subheading ? <p>{page.hero.subheading}</p> : null}
        </header>
        <pre style={{ whiteSpace: "pre-wrap" }}>
          {JSON.stringify(page.layout, null, 2)}
        </pre>
      </article>
    </main>
  );
}