'use client';

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

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

export const CTA = () => {
  const { isAuthenticated } = useConvexAuth();

  return (
    <section className='container mx-auto px-4 py-20'>
      <div className='bg-primary text-primary-foreground rounded-lg px-6 py-10 md:px-10'>
        <div className='flex flex-col items-start justify-between gap-8 md:flex-row md:items-center'>
          <div>
            <h2 className='text-2xl font-semibold tracking-normal md:text-3xl'>
              Fork the project. Keep the relationship.
            </h2>
            <p className='text-primary-foreground/80 mt-3 max-w-2xl leading-7'>
              Create your first Spoon, connect GitHub, and let upstream
              maintenance become a visible thread instead of a lonely recurring
              chore.
            </p>
          </div>
          <Button variant='secondary' size='lg' asChild>
            <Link href={isAuthenticated ? '/spoons/new' : '/sign-in'}>
              {isAuthenticated ? 'Create a Spoon' : 'Start with Spoon'}
              <ArrowRight className='size-4' />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
};
