import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@cooud-ui/ui";
import { ArrowRight, Sparkles } from "lucide-react";

export function SplitHeroBlock() {
  return (
    <section className="px-6 py-20 sm:py-28">
      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[minmax(0,1fr)_26rem]">
        <div>
          <Badge variant="secondary" className="gap-1.5">
            <Sparkles aria-hidden="true" className="size-3.5" />
            Design systems in minutes
          </Badge>
          <h1 className="mt-6 text-balance font-display text-5xl font-semibold leading-[1.04] tracking-tight text-fg sm:text-6xl">
            Build the product surface before the backlog catches up.
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-8 text-fg-secondary">
            Compose accessible primitives, tokenized themes, and production-ready sections.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button variant="gradient" size="lg">Start building <ArrowRight aria-hidden="true" /></Button>
            <Button variant="outline" size="lg">View templates</Button>
          </div>
        </div>

        <Card className="border-border bg-surface-raised/85 shadow-glow backdrop-blur">
          <CardHeader>
            <CardTitle>Release quality</CardTitle>
            <CardDescription>Everything tokenized before handoff.</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            {[
              ["Components", "52 ready"],
              ["Themes", "Aurora + Neutral"],
              ["Coverage", "A11y pass"],
            ].map(([label, value]) => (
              <div key={label} className="flex items-center justify-between rounded-xl border border-border bg-surface-inset px-4 py-3">
                <span className="text-sm text-fg-secondary">{label}</span>
                <span className="text-sm font-medium text-fg">{value}</span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </section>
  );
}