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

import { Button } from '@spoon/ui';

export const CTA = () => (
  <section className='container mx-auto px-4 py-20'>
    <div className='border-border bg-card flex flex-col items-start justify-between gap-6 border p-8 md:flex-row md:items-center'>
      <div>
        <h2 className='text-2xl font-semibold tracking-normal'>
          Start your first Spoon
        </h2>
        <p className='text-muted-foreground mt-2 max-w-2xl'>
          Create a manual managed fork record today. Provider connections,
          scheduled checks, and AI merge request automation can build on the
          same foundation.
        </p>
      </div>
      <Button asChild>
        <Link href='/spoons/new'>
          New Spoon
          <ArrowRight className='size-4' />
        </Link>
      </Button>
    </div>
  </section>
);
