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

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: "beta",
    description: "Personal workspace for agent workflow experiments.",
    features: ["1 workspace", "Markdown sync", "MCP tools", "Docs & planner"],
    href: "/sign-up",
    highlight: false,
  },
  {
    name: "Team",
    price: "$12",
    period: "seat / mo",
    description: "Convoys, run history, and routing for builder teams.",
    features: ["Unlimited workspaces", "Agent runs", "Model routing", "Audit log"],
    href: "/sign-up",
    highlight: true,
  },
  {
    name: "Fleet",
    price: "Custom",
    period: "contact",
    description: "Mission control for repos, tenants, and orchestration.",
    features: ["Connected repos", "Fleet dashboard", "Webhook gates", "SSO"],
    href: "mailto:hello@submatter.dev",
    highlight: false,
  },
] as const;

export default function PricingPage() {
  return (
    <>
      <SiteHeader />
      <main className="marketing-paper-grain min-h-screen bg-background">
        <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6 sm:py-28">
          <Reveal>
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.24em] text-muted-foreground">Pricing</p>
            <h1 className="mt-4 font-marketing text-[clamp(2.5rem,6vw,4rem)] font-semibold leading-[1.05] tracking-[-0.03em]">
              Seats, not tokens.
            </h1>
            <p className="mt-4 max-w-xl font-marketing text-muted-foreground">
              Beta numbers for feedback. Bring your own model keys always.
            </p>
          </Reveal>

          <Stagger className="mt-16 grid gap-0 border border-foreground lg:grid-cols-3">
            {tiers.map((tier, i) => (
              <StaggerItem
                key={tier.name}
                className={cn(
                  "flex flex-col border-foreground p-8",
                  i < tiers.length - 1 && "border-b lg:border-b-0 lg:border-r",
                  tier.highlight && "bg-[hsl(var(--hero))] text-[hsl(var(--hero-foreground))]",
                )}
              >
                <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] opacity-70">{tier.name}</p>
                <p className="mt-4 flex items-baseline gap-2">
                  <span className="font-marketing text-4xl font-semibold tracking-[-0.03em]">{tier.price}</span>
                  <span className="font-mono-brand text-[11px] uppercase tracking-widest opacity-60">{tier.period}</span>
                </p>
                <p className="mt-4 font-marketing text-sm opacity-80">{tier.description}</p>
                <ul className="mt-8 flex-1 space-y-2 font-mono-brand text-[11px] uppercase tracking-wide">
                  {tier.features.map((f) => (
                    <li key={f}>{f}</li>
                  ))}
                </ul>
                <Link
                  href={tier.href}
                  className={cn(
                    "mt-10 inline-flex items-center gap-2 font-mono-brand text-[11px] uppercase tracking-[0.18em]",
                    tier.highlight ? "text-[hsl(var(--matter))]" : "text-foreground",
                  )}
                >
                  {tier.name === "Fleet" ? "Contact" : "Start"}
                  <ArrowRight className="size-3.5" aria-hidden />
                </Link>
              </StaggerItem>
            ))}
          </Stagger>
        </div>
      </main>
      <SiteFooter />
    </>
  );
}