import Link from 'next/link';

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

export function CTA() {
  return (
    <section className="container mx-auto px-4 py-24">
      <div className="mx-auto max-w-4xl">
        <div className="border-border/40 from-muted/50 to-muted/30 rounded-2xl border bg-gradient-to-br p-8 text-center md:p-12">
          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
            Ready to Build Something Amazing?
          </h2>
          <p className="text-muted-foreground mb-8 text-lg">
            Clone the repository and start building your next project with
            everything pre-configured.
          </p>
          <div className="flex flex-col justify-center gap-3 sm:flex-row">
            <Button size="lg" asChild>
              <Link href="/sign-in">Get Started Free</Link>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <Link
                href="https://git.gbrown.org/gib/convex-monorepo"
                target="_blank"
                rel="noopener noreferrer"
              >
                View Source Code
              </Link>
            </Button>
          </div>

          {/* Quick Start Command */}
          <div className="mt-12">
            <p className="text-muted-foreground mb-3 text-sm font-medium">
              Quick Start
            </p>
            <div className="border-border/40 bg-background mx-auto max-w-2xl rounded-lg border p-4">
              <code className="text-sm">
                git clone https://git.gbrown.org/gib/convex-monorepo.git
                <br />
                cd convex-monorepo
                <br />
                bun install
              </code>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}