import { Badge, Button } from "@cooud-ui/ui";
import { ArrowRight, Check } from "lucide-react";

export function CompactHeroBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-5xl rounded-3xl border border-border bg-surface-raised p-8 text-center shadow-lg sm:p-12">
        <Badge variant="primary">New registry</Badge>
        <h1 className="mx-auto mt-5 max-w-3xl text-balance font-display text-4xl font-semibold tracking-tight text-fg sm:text-6xl">
          Copy polished product sections into any React app.
        </h1>
        <p className="mx-auto mt-5 max-w-2xl text-balance text-fg-secondary">
          Blocks inherit your theme, radius, color scale, and typography automatically.
        </p>
        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <Button variant="gradient" size="lg">Browse blocks <ArrowRight aria-hidden="true" /></Button>
          <Button variant="ghost" size="lg">Read docs</Button>
        </div>
        <div className="mx-auto mt-9 grid max-w-2xl gap-3 text-left sm:grid-cols-3">
          {["Accessible", "Themeable", "Composable"].map((item) => (
            <div key={item} className="flex items-center gap-2 rounded-xl bg-surface-inset px-3 py-2">
              <Check className="size-4 text-primary" aria-hidden="true" />
              <span className="text-sm text-fg-secondary">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}