Hero Waitlist

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

const initials = ["KM", "AS", "JD", "RT", "LN"];

export default function HeroWaitlist() {
  return (
    <section className="relative overflow-hidden bg-background">
      <div
        aria-hidden
        className="absolute inset-0 bg-dots mask-[radial-gradient(ellipse_65%_65%_at_50%_0%,black,transparent)]"
      />
      <div className="relative mx-auto flex w-full max-w-2xl flex-col items-center px-6 py-24 text-center sm:py-32">
        <Badge variant="secondary" className="mb-6 border border-border/60">
          Private beta
        </Badge>
        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
          Your staging data, finally realistic
        </h1>
        <p className="mt-5 max-w-md text-lg text-pretty text-muted-foreground">
          Production-shaped synthetic data, generated from your schema.
          No PII, no fixtures to maintain.
        </p>

        <form className="mt-8 flex w-full max-w-sm flex-col gap-2 sm:flex-row">
          <label htmlFor="waitlist-email" className="sr-only">
            Email address
          </label>
          <input
            id="waitlist-email"
            type="email"
            autoComplete="email"
            placeholder="you@company.com"
            className="h-10 w-full flex-1 rounded-lg border border-input bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
          />
          <Button type="submit" size="lg" className="sm:shrink-0">
            Join the waitlist
          </Button>
        </form>

        <div className="mt-8 flex items-center gap-3">
          <div className="flex -space-x-2">
            {initials.map((tag) => (
              <span
                key={tag}
                className="flex size-7 items-center justify-center rounded-full border border-background bg-muted font-mono text-[9px] font-semibold text-muted-foreground"
              >
                {tag}
              </span>
            ))}
          </div>
          <p className="font-mono text-xs text-muted-foreground tabular-nums">
            2,341 engineers already in line
          </p>
        </div>
      </div>
    </section>
  );
}