import { ArrowRight, Sparkles } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function Hero01() {
  return (
    <section className="relative isolate overflow-hidden bg-background">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,hsl(var(--foreground)/0.08),transparent_70%)]"
      />
      <div className="mx-auto flex min-h-[640px] max-w-5xl flex-col items-center justify-center gap-8 px-6 py-24 text-center">
        <a
          href="#changelog"
          className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur transition-colors hover:bg-muted"
        >
          <Sparkles className="size-3.5" />
          <span>New — 24 production-ready blocks just landed</span>
          <ArrowRight className="size-3" />
        </a>

        <h1 className="max-w-3xl text-balance text-4xl font-medium tracking-tight text-foreground sm:text-5xl md:text-6xl">
          Ship polished interfaces in
          <span className="bg-gradient-to-br from-foreground to-foreground/50 bg-clip-text text-transparent">
            {" "}
            hours, not weeks.
          </span>
        </h1>

        <p className="max-w-2xl text-balance text-base leading-relaxed text-muted-foreground sm:text-lg">
          Stop rebuilding the same hero, pricing and feature sections from
          scratch. Crafted by Leonel Ngoya — copy the code, tweak to your brand,
          ship the same day.
        </p>

        <div className="flex flex-col items-center gap-3 sm:flex-row">
          <Button size="lg" asChild>
            <a href="/hero">
              Browse blocks
              <ArrowRight />
            </a>
          </Button>
          <Button size="lg" variant="outline" asChild>
            <a href="https://lndev.me" target="_blank" rel="noreferrer">
              See more of my work
            </a>
          </Button>
        </div>

        <ul className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 pt-4 text-xs text-muted-foreground">
          <li className="flex items-center gap-1.5">
            <span className="size-1 rounded-full bg-foreground/60" />
            Free &amp; open source
          </li>
          <li className="flex items-center gap-1.5">
            <span className="size-1 rounded-full bg-foreground/60" />
            Tailwind v4 &amp; shadcn/ui
          </li>
          <li className="flex items-center gap-1.5">
            <span className="size-1 rounded-full bg-foreground/60" />
            Dark mode included
          </li>
        </ul>
      </div>
    </section>
  )
}