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

export default function HeroSplit() {
  return (
    <section className="grid items-center gap-12 px-6 py-20 md:grid-cols-2">
      <div>
        <Badge variant="outline">v4.2 is out</Badge>

        <h1 className="mt-6 text-4xl leading-[1.1] font-semibold tracking-tight">
          Your database, with an API in front of it
        </h1>

        <p className="mt-5 max-w-md text-base leading-relaxed text-muted">
          Acme reads your schema and serves a typed, documented, rate-limited
          API. Nothing to deploy and nothing to keep running.
        </p>

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

        <p className="mt-4 text-xs text-muted">
          Works with Postgres, MySQL and SQLite.
        </p>
      </div>

      <div className="overflow-hidden rounded-xl border border-border">
        <div className="flex items-center gap-1.5 border-b border-border px-4 py-2.5">
          <span className="size-2.5 rounded-full bg-border" />
          <span className="size-2.5 rounded-full bg-border" />
          <span className="size-2.5 rounded-full bg-border" />
          <span className="ml-2 font-mono text-xs text-muted">terminal</span>
        </div>
        <pre className="overflow-x-auto bg-border/20 p-4 font-mono text-xs leading-relaxed text-muted">
{`$ acme link postgres://…
✓ read 14 tables
✓ generated 38 endpoints

  https://api.acme.dev/v1
  ready in 1.2s`}
        </pre>
      </div>
    </section>
  )
}