import { createFileRoute } from "@tanstack/react-router";

import { Boarding } from "~/components/site/boarding";
import { FoldSnap } from "~/components/site/fold-snap";
import { HonestCta } from "~/components/site/honest-cta";
import { Process } from "~/components/site/process";
import { ScrubHero } from "~/components/site/scrub-hero";
import { Story } from "~/components/site/story";
import { Way } from "~/components/site/way";
import { WindowStage } from "~/components/site/window-stage";
import { currentOrigin } from "~/lib/origin";

export const Route = createFileRoute("/")({
  loader: async () => ({ origin: await currentOrigin() }),
  head: ({ loaderData }) => {
    const origin = loaderData?.origin ?? "";
    return {
      meta: [{ property: "og:url", content: `${origin}/` }],
      links: [{ rel: "canonical", href: `${origin}/` }],
    };
  },
  component: HomePage,
});

function HomePage() {
  return (
    <main>
      <ScrubHero />
      <Boarding />
      <WindowStage />
      <div className="zv-fold" data-fold="">
        <Way />
      </div>
      <div className="zv-fold" data-fold="">
        <Story />
      </div>
      <div className="zv-fold" data-fold="">
        <Process />
      </div>
      <div className="zv-fold" data-fold="">
        <HonestCta />
      </div>
      <FoldSnap />
    </main>
  );
}