import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { CtaBand } from "~/components/marketing/CtaBand";
import { DisplayTitle } from "~/components/marketing/DisplayTitle";
import { FeatureDemo } from "~/components/marketing/FeatureDemo";
import { MarketingHero } from "~/components/marketing/MarketingHero";
import { FEATURE_PAGES, featurePage } from "~/lib/marketing/features";
import { buttonClass } from "~/ui/Button";
import { CodeBlock } from "~/ui/CodeBlock";
import { PageContainer } from "~/ui/PageContainer";
import { TextLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";
import { featureOgPath } from "~/lib/og";

export const Route = createFileRoute("/features/$slug")({
  loader: ({ params }) => {
    const page = featurePage(params.slug);
    if (!page) throw notFound();
    return page;
  },
  head: ({ loaderData, match }) => ({
    meta: loaderData
      ? seo({
          origin: match.context.publicUrl,
          path: `/features/${loaderData.slug}`,
          title: `${loaderData.nav} · gitfor`,
          description: loaderData.lede,
          image: featureOgPath(loaderData.slug, loaderData.title, loaderData.lede),
          imageAlt: loaderData.title,
        })
      : [],
  }),
  component: FeaturePage,
});

function FeaturePage() {
  const page = Route.useLoaderData();
  const others = FEATURE_PAGES.filter((other) => other.slug !== page.slug);
  return (
    <>
      <MarketingHero
        title={page.title}
        lede={page.lede}
        aside={<FeatureDemo demo={page.demo} />}
        actions={
          <>
            <Link to="/signup" className={buttonClass("primary")}>
              Create an account
            </Link>
            <Link to="/features" className={buttonClass("secondary")}>
              All features
            </Link>
          </>
        }
      />
      <PageContainer className="space-y-20 pb-24">
        <dl className="grid gap-x-10 gap-y-8 border-t border-kumo-hairline pt-10 sm:grid-cols-2">
          {page.highlights.map((item) => (
            <div key={item.title}>
              <dt className="font-medium text-kumo-strong">{item.title}</dt>
              <dd className="mt-1 max-w-md text-sm leading-6 text-kumo-subtle">{item.body}</dd>
            </div>
          ))}
        </dl>

        {page.details.map((detail) => (
          <section key={detail.title} className="grid items-start gap-8 lg:grid-cols-2 lg:gap-12">
            <div className="space-y-3">
              <DisplayTitle title={detail.title} />
              <p className="max-w-lg leading-7 text-kumo-subtle">{detail.body}</p>
            </div>
            {detail.code && (
              <CodeBlock title={detail.code.title} language={detail.code.language} source={detail.code.source} />
            )}
          </section>
        ))}

        <nav aria-labelledby="other-features" className="border-t border-kumo-hairline pt-10">
          <h2 id="other-features" className="mb-4 text-sm font-medium text-kumo-default">
            Other features
          </h2>
          <ul className="flex flex-wrap gap-x-6 gap-y-3">
            {others.map((other) => (
              <li key={other.slug}>
                <TextLink to="/features/$slug" params={{ slug: other.slug }} className="text-sm">
                  {other.nav}
                </TextLink>
              </li>
            ))}
          </ul>
        </nav>

        <CtaBand
          title="Try it on your own code"
          body="Create an account and import a repository with its full history, or run your own instance."
        />
      </PageContainer>
    </>
  );
}