import { Button } from '@/components/ui/button';

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black,transparent)]"
        style={{
          backgroundImage:
            'linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px)',
          backgroundSize: '56px 56px',
        }}
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-[-120px] h-[420px] w-[820px] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
        style={{
          background:
            'conic-gradient(from 180deg at 50% 50%, #7c3aed, #2563eb, #06b6d4, #ec4899, #7c3aed)',
        }}
      />

      <div className="relative mx-auto max-w-6xl px-6 pt-24 pb-20 text-center sm:pt-32">
        <a
          href="#"
          className="group inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-xs text-white/70 transition-colors hover:border-white/25 hover:text-white"
        >
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-400" />
          Vertex Edge is now generally available
          <span className="transition-transform group-hover:translate-x-0.5">
            &rarr;
          </span>
        </a>

        <h1 className="mx-auto mt-8 max-w-4xl bg-gradient-to-b from-white to-white/60 bg-clip-text text-5xl font-semibold leading-[1.05] tracking-tight text-transparent sm:text-7xl">
          Build. Preview. Ship.
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-white/55">
          Vertex is the frontend cloud. Give your team the tooling and global
          infrastructure to build, preview, and ship a faster web — from your
          first commit to production traffic.
        </p>

        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <Button
            asChild
            size="lg"
            className="h-11 rounded-full bg-white px-6 text-[15px] text-black hover:bg-white/90"
          >
            <a href="#">Start Deploying</a>
          </Button>
          <Button
            asChild
            size="lg"
            variant="outline"
            className="h-11 rounded-full border-white/20 bg-transparent px-6 text-[15px] text-white hover:bg-white/5 hover:text-white"
          >
            <a href="#">Get a Demo</a>
          </Button>
        </div>

        <div className="mx-auto mt-14 flex max-w-md items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 font-mono text-sm text-white/70">
          <span className="text-white/30">$</span>
          <span>
            <span className="text-white">vertex</span> deploy --prod
          </span>
          <span className="ml-auto h-4 w-px animate-pulse bg-white/40" />
        </div>
      </div>
    </section>
  );
}