import { createFileRoute, Link } from "@tanstack/react-router";
import { CtaBand } from "~/components/marketing/CtaBand";
import { MarketingHero } from "~/components/marketing/MarketingHero";
import { FEATURE_CATALOG } from "~/lib/marketing/catalog";
import { featurePage } from "~/lib/marketing/features";
import { buttonClass } from "~/ui/Button";
import { PageContainer } from "~/ui/PageContainer";
import { TextLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/features/")({
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/features",
      title: "Features · gitfor",
      description: "Code hosting, review, CI/CD, planning, a browser editor, security scanning and site hosting.",
    }),
  }),
  component: FeaturesPage,
});

function FeaturesPage() {
  return (
    <>
      <MarketingHero
        title="What is gitfor?"
        lede="An open-source forge: Git hosting with code review, CI/CD, planning, a browser editor, security scanning and site hosting. Here is everything it does, grouped by area."
        actions={
          <>
            <Link to="/signup" className={buttonClass("primary")}>
              Create an account
            </Link>
            <Link to="/self-host" className={buttonClass("secondary")}>
              Self-host gitfor
            </Link>
          </>
        }
      />
      <PageContainer className="space-y-20 pb-24">
        <div className="divide-y divide-kumo-hairline">
          {FEATURE_CATALOG.map((group) => {
            const page = group.page ? featurePage(group.page) : undefined;
            return (
              <section
                key={group.title}
                aria-labelledby={`group-${group.title}`}
                className="grid gap-4 py-8 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] md:gap-12"
              >
                <div className="space-y-2">
                  <h2 id={`group-${group.title}`} className="text-lg font-semibold text-white">
                    {group.title}
                  </h2>
                  {page && (
                    <>
                      <p className="max-w-sm text-sm leading-6 text-kumo-subtle">{page.lede}</p>
                      <TextLink to="/features/$slug" params={{ slug: page.slug }} className="inline-block text-sm">
                        Read more about {page.nav.toLowerCase()}
                      </TextLink>
                    </>
                  )}
                </div>
                <ul className="grid gap-x-8 gap-y-2 text-sm leading-6 text-kumo-default sm:grid-cols-2">
                  {group.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </section>
            );
          })}
        </div>

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