import type { Metadata } from "next";
import Link from "next/link";
import { Check } from "lucide-react";

import { BorderGlowCard } from "@/components/marketing/border-glow-card";
import { Reveal, Stagger, StaggerItem } from "@/components/marketing/reveal";
import { SiteFooter } from "@/components/marketing/site-footer";
import { SiteHeader } from "@/components/marketing/site-header";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Pricing",
};

const tiers = [
  {
    name: "Solo",
    price: "Free",
    period: "during beta",
    description: "Personal workspace for testing agent workflows and markdown sync.",
    features: ["1 workspace", "Markdown backlog sync", "MCP claim / complete", "Docs & planner"],
    cta: "Start free",
    href: "/sign-up",
    highlighted: false,
  },
  {
    name: "Team",
    price: "$12",
    period: "per seat / mo",
    description: "Shared convoys, run history, and model routing for small builder teams.",
    features: [
      "Unlimited workspaces",
      "Agent run history",
      "Role-based routing",
      "Audit log",
      "Priority sync",
    ],
    cta: "Start trial",
    href: "/sign-up",
    highlighted: true,
  },
  {
    name: "Fleet",
    price: "Custom",
    period: "contact us",
    description: "Mission control for multiple repos, tenants, and orchestrated pipelines.",
    features: ["Connected repos", "Fleet dashboard", "Webhook gates", "SSO", "Self-hosted option"],
    cta: "Contact",
    href: "mailto:hello@submatter.dev",
    highlighted: false,
  },
] as const;

export default function PricingPage() {
  return (
    <>
      <SiteHeader />
      <main className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
        <Reveal className="mx-auto max-w-2xl text-center">
          <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">Pricing</p>
          <h1 className="mt-4 font-marketing text-4xl font-semibold tracking-[-0.02em] text-foreground sm:text-5xl">
            Predictable seats.
            <br />
            No per-token surprise.
          </h1>
          <p className="mt-4 font-marketing text-muted-foreground">
            Beta pricing for feedback. BYOK for model providers always.
          </p>
        </Reveal>

        <Stagger className="mt-16 grid gap-4 lg:grid-cols-3">
          {tiers.map((tier) => (
            <StaggerItem key={tier.name}>
              <BorderGlowCard
                as="article"
                className={cn(
                  "flex h-full flex-col p-6",
                  tier.highlighted && "ring-1 ring-matter/30",
                )}
              >
                {tier.highlighted ? (
                  <span className="mb-4 inline-flex w-fit font-mono-brand text-[10px] uppercase tracking-widest text-matter">
                    popular
                  </span>
                ) : (
                  <span className="mb-4 h-4" aria-hidden />
                )}
                <h2 className="font-marketing text-lg font-semibold text-foreground">{tier.name}</h2>
                <p className="mt-2 flex items-baseline gap-2">
                  <span className="font-marketing text-3xl font-semibold text-foreground">{tier.price}</span>
                  <span className="font-marketing text-sm text-muted-foreground">{tier.period}</span>
                </p>
                <p className="mt-3 font-marketing text-sm text-muted-foreground">{tier.description}</p>
                <ul className="mt-6 flex-1 space-y-2.5">
                  {tier.features.map((feature) => (
                    <li key={feature} className="flex gap-2 font-marketing text-sm text-foreground">
                      <Check className="mt-0.5 size-4 shrink-0 text-agent" aria-hidden />
                      {feature}
                    </li>
                  ))}
                </ul>
                <Link
                  href={tier.href}
                  className={cn(
                    "mt-8 inline-flex h-10 items-center justify-center font-marketing text-sm font-medium transition-colors",
                    tier.highlighted
                      ? "bg-foreground text-background hover:bg-foreground/90"
                      : "border border-border hover:bg-muted",
                  )}
                >
                  {tier.cta}
                </Link>
              </BorderGlowCard>
            </StaggerItem>
          ))}
        </Stagger>

        <p className="mt-14 text-center font-mono-brand text-[11px] text-muted-foreground">
          kind: pricing · status: draft · priority: P2
        </p>
      </main>
      <SiteFooter />
    </>
  );
}