import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";

export function CtaBanner() {
  return (
    <section className="border-t bg-muted/30">
      <div className="container py-16 sm:py-20">
        <div className="rounded-2xl border bg-card p-8 text-center shadow-sm sm:p-12">
          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
            Start writing in Markdown — right now.
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-pretty text-muted-foreground">
            No signup, no install, no upload. Open the editor and you're three keystrokes from a
            live preview.
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-3">
            <Button asChild size="lg">
              <Link href="/editor">
                Open the editor <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/blog">Read the blog</Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}