import type { Metadata } from "next";
import Link from "next/link";

import { PageHero } from "@/components/marketing/page-hero";
import { PlaceholderNotice } from "@/components/marketing/placeholder-notice";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Pricing",
  description: "krypco pricing — structure preview; final numbers coming later.",
};

const TIERS = [
  {
    name: "Explorer",
    price: "Free",
    note: "Preview",
    items: ["Public portal access", "Read explorer data", "Docs & architecture"],
  },
  {
    name: "Builder",
    price: "TBD",
    note: "Coming soon",
    items: ["API / SDK access", "Higher rate limits", "Support channel"],
  },
  {
    name: "Enterprise",
    price: "Custom",
    note: "Talk to us",
    items: ["Permissioned membership", "SLA & onboarding", "Dedicated path"],
  },
] as const;

export default function PricingPage() {
  return (
    <>
      <PageHero
        eyebrow="Pricing"
        title="Clear structure. Honest placeholders."
        description="Final fees and packages are not published yet. This layout shows how pricing will be presented — without inventing numbers."
      />

      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <PlaceholderNotice className="mb-10">
            Preview only — not live commercial offers. Contact us for early
            access conversations.
          </PlaceholderNotice>

          <div className="grid gap-5 md:grid-cols-3">
            {TIERS.map((tier) => (
              <article
                key={tier.name}
                className="flex flex-col rounded-2xl border border-border bg-card p-7"
              >
                <p className="text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
                  {tier.note}
                </p>
                <h2 className="font-display mt-2 text-2xl font-semibold">
                  {tier.name}
                </h2>
                <p className="font-display mt-4 text-3xl font-semibold tabular-nums">
                  {tier.price}
                </p>
                <ul className="mt-6 flex flex-1 flex-col gap-2.5 text-sm text-muted-foreground">
                  {tier.items.map((item) => (
                    <li key={item} className="flex gap-2">
                      <span className="text-proof" aria-hidden>
                        ·
                      </span>
                      {item}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>

          <div className="mt-12 text-center">
            <Link href="/contact" className={cn(buttonVariants({ size: "lg" }))}>
              Ask about access
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}