import type { Metadata } from "next";
import Link from "next/link";
import { CtaBand } from "@/components/cta-band";
import { FaqList } from "@/components/faq-list";
import { Eyebrow, Section } from "@/components/section";
import { buttonVariants } from "@/components/ui/button";
import { plans } from "@/lib/content";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Pricing",
  description:
    "Core, Enterprise, and Sovereign instantiations of The Agentic Cloud. All custom. All invitation-based.",
};

export default function PricingPage() {
  return (
    <>
      <Section className="pt-16 md:pt-24">
        <Eyebrow>Pricing</Eyebrow>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
          Instantiations, not seats.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
          The Agentic Cloud is not priced per prompt. It is instantiated
          against an operating thesis. Core for a value stream. Enterprise
          for the institution. Sovereign for the environments that have a
          neutrino plane and a lawyer.
        </p>
      </Section>
      <Section className="pt-0">
        <div className="grid gap-4 lg:grid-cols-3">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={cn(
                "flex flex-col rounded-2xl border p-6 md:p-8",
                plan.featured
                  ? "border-fuchsia-400/40 bg-gradient-to-b from-violet-500/20 via-fuchsia-500/10 to-cyan-500/10 shadow-[0_0_50px_oklch(0.6_0.2_305/0.2)]"
                  : "border-white/10 bg-white/5 backdrop-blur-xl"
              )}
            >
              <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-primary">
                {plan.name}
              </p>
              <p className="mt-3 font-heading text-3xl">{plan.price}</p>
              <p className="mt-2 text-sm text-muted-foreground">
                {plan.audience}
              </p>
              <ul className="mt-8 flex-1 space-y-2.5 text-sm text-foreground/85">
                {plan.features.map((f) => (
                  <li key={f} className="leading-relaxed">
                    {f}
                  </li>
                ))}
              </ul>
              <Link
                href="/request-access"
                className={cn(
                  buttonVariants({
                    variant: plan.featured ? "default" : "outline",
                  }),
                  "mt-8 h-10 justify-center px-4"
                )}
              >
                {plan.cta}
              </Link>
            </div>
          ))}
        </div>
      </Section>
      <Section className="border-t border-white/10">
        <Eyebrow>Questions</Eyebrow>
        <h2 className="mt-3 font-heading text-3xl md:text-4xl">
          Before the commercial conversation.
        </h2>
        <div className="mt-8 max-w-3xl">
          <FaqList />
        </div>
      </Section>
      <CtaBand />
    </>
  );
}