import Link from "next/link";
import { Card } from "@/components/ui/Card";
import { LinkButton } from "@/components/ui/Button";

/**
 * Gate A (BUSINESS_MODEL.md, board minutes #42, enforced by minutes #62):
 * no price may appear on a public surface until the pricing model is ratified
 * and the entitlements behind it exist. The previous version of this page
 * rendered the invented $0/$79/Custom catalog from lib/billing.ts with a
 * below-the-fold disclaimer — a false price anchor with a footnote is worse
 * than no price. Do not re-import PLANS here. Tracked: server-26#46.
 */
export default function PricingPage() {
  return (
    <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
      <div className="text-center max-w-2xl mx-auto">
        <h1 className="text-display-sm md:text-display text-white">Pricing is in development</h1>
        <p className="text-gray-400 mt-4">
          We are still working out what a fair price looks like for the people who actually use this.
          Rather than post a number we would have to walk back, we would rather talk to you about what
          you need and what it is worth.
        </p>
      </div>

      <Card padding="lg" className="mt-12 max-w-2xl mx-auto">
        <h2 className="text-white text-lg font-bold">What you get today</h2>
        <p className="text-gray-400 text-sm mt-2 leading-relaxed">
          The full incident pipeline — transcription, correlation into incidents, mapping, and the
          Discord relay. Node counts, seats, and history length are set per account while we work out
          the plan structure.
        </p>
        <div className="mt-6">
          <LinkButton href="/waitlist" fullWidth>Request access</LinkButton>
        </div>
      </Card>

      <div className="text-center mt-16">
        <p className="text-gray-400">
          Questions?{" "}
          <Link href="/faq" className="text-indigo-400 hover:text-indigo-300 transition-colors">Check the FAQ</Link>
          {" "}or{" "}
          <Link href="/waitlist" className="text-indigo-400 hover:text-indigo-300 transition-colors">get in touch</Link>.
        </p>
      </div>
    </div>
  );
}