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

export function Cta() {
  return (
    <section className="relative mx-auto max-w-6xl overflow-hidden px-6 py-28 text-center">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-1/2 h-[300px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-25 blur-3xl"
        style={{
          background:
            'conic-gradient(from 180deg at 50% 50%, #7c3aed, #2563eb, #06b6d4, #ec4899, #7c3aed)',
        }}
      />
      <h2 className="relative mx-auto max-w-2xl text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship your first project in minutes.
      </h2>
      <p className="relative mx-auto mt-5 max-w-xl text-lg text-white/55">
        Import a repository or start from a template. No credit card required to
        deploy your first preview.
      </p>
      <div className="relative mt-9 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="#">Talk to Sales</a>
        </Button>
      </div>
    </section>
  );
}