"use client";

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

export function HeroSplitBlock() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-24">
      <div className="grid lg:grid-cols-2 gap-12 items-center">
        {/* Left — text */}
        <div>
          <Badge variant="secondary" className="mb-6">New • v2.0</Badge>
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-5 leading-tight">
            Build faster with{" "}
            <span className="font-serif italic font-normal text-foreground/80">
              production-ready
            </span>{" "}
            UI.
          </h1>
          <p className="text-lg text-muted-foreground leading-relaxed mb-7">
            Stop reinventing buttons, forms, and modals. Get a complete set of
            accessible components, themed and ready to ship.
          </p>
          <div className="flex flex-wrap gap-3">
            <Button size="lg" className="h-11 px-6 text-[15px]">Start free</Button>
            <Button size="lg" variant="outline" className="h-11 px-6 text-[15px]">
              View pricing
            </Button>
          </div>
          <div className="mt-8 flex items-center gap-4 text-sm text-muted-foreground">
            <div className="flex -space-x-2">
              {["bg-indigo-500", "bg-sky-500", "bg-emerald-500", "bg-rose-500"].map((c, i) => (
                <div key={i} className={`size-7 rounded-full border-2 border-background ${c}`} />
              ))}
            </div>
            <span>Trusted by 5,000+ developers</span>
          </div>
        </div>

        {/* Right — visual */}
        <div className="relative">
          <div className="aspect-square rounded-2xl border border-border bg-gradient-to-br from-indigo-100 via-sky-50 to-emerald-50 dark:from-indigo-950/60 dark:via-sky-950/40 dark:to-emerald-950/40 p-8 flex items-center justify-center">
            <div className="grid grid-cols-3 gap-3 w-full">
              {Array.from({ length: 9 }).map((_, i) => (
                <div
                  key={i}
                  className={`aspect-square rounded-lg ${
                    i === 4
                      ? "bg-foreground/90"
                      : "bg-foreground/10 backdrop-blur"
                  }`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}