import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { Reveal } from "@/components/marketing/reveal";

export function CtaSection() {
  return (
    <section className="border-b border-foreground bg-background py-24 sm:py-32">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="border border-foreground bg-[hsl(var(--hero))] p-10 text-[hsl(var(--hero-foreground))] sm:p-16">
          <p className="font-mono-brand text-[11px] uppercase tracking-[0.28em] text-[hsl(var(--hero-muted))]">---</p>
          <h2 className="mt-6 font-display text-[clamp(3.5rem,12vw,8rem)] font-extrabold leading-[0.9] tracking-[0.08em]">
            SBMTR
          </h2>
          <p className="mt-8 max-w-xl font-marketing text-lg text-[hsl(var(--hero-muted))]">
            Open Monday morning in Submatter. Your backlog is already in git — give your agents a workspace that
            respects that.
          </p>
          <div className="mt-10 flex flex-wrap items-center gap-8">
            <Link
              href="/sign-up"
              className="group inline-flex items-center gap-3 font-mono-brand text-[11px] uppercase tracking-[0.18em]"
            >
              <span className="border-b-2 border-[hsl(var(--matter))] pb-1 text-[hsl(var(--hero-foreground))] transition-colors group-hover:text-[hsl(var(--matter))]">
                Start free
              </span>
              <ArrowRight className="size-4" aria-hidden />
            </Link>
            <Link
              href="/landing/pricing"
              className="font-mono-brand text-[11px] uppercase tracking-[0.18em] text-[hsl(var(--hero-muted))] hover:text-[hsl(var(--hero-foreground))]"
            >
              Pricing
            </Link>
          </div>
        </Reveal>
      </div>
    </section>
  );
}