'use client';

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

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

import { ProductStoryDemo } from './product-story-demo';

export const Hero = () => {
  const { isAuthenticated } = useConvexAuth();
  return (
    <section className='container mx-auto px-4 py-16 md:py-24'>
      <div className='grid items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]'>
        <div className='max-w-3xl'>
          <Badge variant='outline' className='mb-5 gap-2'>
            <ShieldCheck className='size-3.5 text-emerald-600' />
            Self-hostable fork maintenance with Threads
          </Badge>
          <h1 className='max-w-4xl text-4xl font-semibold tracking-normal text-balance sm:text-5xl md:text-6xl'>
            Fork freely & keep them all{' '}
            <em className='text-primary'>intimately</em> close to upstream.
          </h1>
          <p className='text-muted-foreground mt-6 max-w-2xl text-lg leading-8'>
            Spoon is a self-hostable maintenance cockpit for forks. It watches
            upstream, understands your fork-only changes, opens threads when
            decisions are needed, and helps keep your managed forks close
            without asking you to support them alone.
          </p>
          <div className='mt-8 flex flex-col gap-3 sm:flex-row'>
            <Button size='lg' asChild>
              <Link href={isAuthenticated ? '/dashboard' : '/sign-in'}>
                {isAuthenticated ? 'Open dashboard' : 'Start with Spoon'}
                <ArrowRight className='size-4' />
              </Link>
            </Button>
            <Button size='lg' variant='outline' asChild>
              <Link href='#demo'>Watch the flow</Link>
            </Button>
          </div>
          <div className='text-muted-foreground mt-8 grid max-w-2xl gap-3 text-sm sm:grid-cols-2'>
            {[
              'GitHub App backed',
              'Thread-first maintenance',
              'OpenCode workspaces',
              'Draft PR workflow',
            ].map((item) => (
              <span key={item} className='flex items-center gap-2'>
                <CircleDot className='text-primary size-3.5' />
                {item}
              </span>
            ))}
          </div>
        </div>

        <ProductStoryDemo />
      </div>
    </section>
  );
};
