Usage based

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cronus-ui/ui";
import { Check } from "lucide-react";

export function UsagePricingBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-5xl rounded-3xl border border-border bg-surface-raised p-6 shadow-lg sm:p-8">
        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_20rem]">
          <div>
            <Badge variant="primary">Usage based</Badge>
            <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
              Start small, pay only when your product grows.
            </h2>
            <p className="mt-4 max-w-2xl text-fg-secondary">
              A pricing layout for APIs, infrastructure, and usage-metered products.
            </p>
            <div className="mt-8 grid gap-3 sm:grid-cols-3">
              {["10k events", "5 seats", "99.9% SLA"].map((item) => (
                <div
                  key={item}
                  className="rounded-xl border border-border bg-surface-inset px-4 py-3 text-sm text-fg-secondary"
                >
                  {item}
                </div>
              ))}
            </div>
          </div>

          <Card className="border-primary bg-surface-floating shadow-glow">
            <CardHeader>
              <CardTitle>Growth</CardTitle>
              <CardDescription>Best for teams validating scale.</CardDescription>
              <div className="mt-2">
                <span className="font-display text-4xl font-semibold text-fg">$0.08</span>
                <span className="text-sm text-fg-tertiary"> / 1k events</span>
              </div>
            </CardHeader>
            <CardContent className="flex flex-col gap-3">
              {["Unlimited projects", "Realtime analytics", "Priority queues"].map((item) => (
                <div key={item} className="flex items-center gap-2 text-sm text-fg-secondary">
                  <Check className="size-4 text-primary" aria-hidden="true" />
                  {item}
                </div>
              ))}
            </CardContent>
            <CardFooter>
              <Button variant="primary" className="w-full">
                Estimate usage
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </section>
  );
}