import { Button } from "@/registry/ui/button"

/**
 * The band is tinted rather than inverted on purpose. Inverting it would mean
 * overriding the Button's own `bg-accent` / `text-accent-fg`, and without
 * tailwind-merge that collision is settled by stylesheet order rather than by
 * you — which is how you end up with white text on a white button.
 */
export default function CtaBanner() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-5xl rounded-2xl border border-border bg-border/25 px-8 py-14 text-center">
        <h2 className="mx-auto max-w-xl text-3xl leading-tight font-semibold tracking-tight text-balance">
          Your database already has an API. Go and take it.
        </h2>

        <p className="mx-auto mt-4 max-w-md text-sm leading-relaxed text-muted">
          Linking a project takes about a minute, and the first thing you see is
          your own tables.
        </p>

        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <Button size="lg">Start free</Button>
          <Button size="lg" variant="outline">
            Read the docs
          </Button>
        </div>

        <p className="mt-5 font-mono text-xs text-muted">
          No card. Cancel by deleting the project.
        </p>
      </div>
    </section>
  )
}