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

export default function Hero() {
  return (
    <section className="px-6 py-20 text-center">
      <Badge variant="outline">Now in public beta</Badge>

      <h1 className="mx-auto mt-6 max-w-2xl text-4xl leading-[1.1] font-semibold tracking-tight sm:text-5xl">
        Ship your API without writing a backend
      </h1>

      <p className="mx-auto mt-5 max-w-lg text-base leading-relaxed text-muted">
        Point Acme at your database and get a typed, documented, rate-limited
        API in about a minute. No servers to run.
      </p>

      <form className="mx-auto mt-8 flex max-w-md flex-col gap-2 sm:flex-row">
        <Input type="email" placeholder="you@company.com" aria-label="Work email" />
        <Button type="submit">Request access</Button>
      </form>

      <p className="mt-3 text-xs text-muted">Free while in beta. No card required.</p>
    </section>
  )
}