import { Kanit } from 'next/font/google';
import Image from 'next/image';
import Link from 'next/link';

import { Button } from '@gib/ui/button';

const kanitSans = Kanit({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
});

export function Hero() {
  return (
    <section className='container mx-auto px-4 py-24 md:py-32 lg:py-40'>
      <div className='mx-auto flex max-w-5xl flex-col items-center gap-8 text-center'>
        {/* Badge */}
        <div className='border-border/40 bg-muted/50 inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium'>
          <span className='mr-2'>🚀</span>
          <span>Production-ready monorepo template</span>
        </div>

        {/* Heading */}
        <h1 className='from-foreground to-foreground/70 bg-linear-to-br bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl'>
          Build Full-Stack Apps with{' '}
          <span
            className={`${kanitSans.className} to-accent-foreground bg-linear-to-r from-[#281A65] via-[#363354] bg-clip-text text-transparent sm:text-6xl lg:text-7xl xl:text-8xl dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]`}
          >
            convex monorepo
          </span>
        </h1>

        {/* Description */}
        <p className='text-muted-foreground max-w-2xl text-lg md:text-xl'>
          A Turborepo starter with Next.js, Expo, and self-hosted Convex. Ship
          web and mobile apps faster with shared code, type-safe backend, and
          complete control over your infrastructure.
        </p>

        {/* CTA Buttons */}
        <div className='flex flex-col gap-3 sm:flex-row'>
          <Button size='lg' variant='outline' asChild>
            <Link
              href='https://git.gbrown.org/gib/convex-monorepo'
              target='_blank'
              rel='noopener noreferrer'
            >
              <Image
                src='/misc/gitea/gitea.svg'
                alt='Gitea'
                width={20}
                height={20}
              />
              View Source Code
            </Link>
          </Button>
        </div>

        {/* Features Quick List */}
        <div className='text-muted-foreground mt-8 flex flex-wrap items-center justify-center gap-6 text-sm'>
          <div className='flex items-center gap-2'>
            <svg
              className='h-5 w-5 text-green-500'
              fill='none'
              viewBox='0 0 24 24'
              stroke='currentColor'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M5 13l4 4L19 7'
              />
            </svg>
            <span>TypeScript</span>
          </div>
          <div className='flex items-center gap-2'>
            <svg
              className='h-5 w-5 text-green-500'
              fill='none'
              viewBox='0 0 24 24'
              stroke='currentColor'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M5 13l4 4L19 7'
              />
            </svg>
            <span>Self-Hosted</span>
          </div>
          <div className='flex items-center gap-2'>
            <svg
              className='h-5 w-5 text-green-500'
              fill='none'
              viewBox='0 0 24 24'
              stroke='currentColor'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M5 13l4 4L19 7'
              />
            </svg>
            <span>Real-time</span>
          </div>
          <div className='flex items-center gap-2'>
            <svg
              className='h-5 w-5 text-green-500'
              fill='none'
              viewBox='0 0 24 24'
              stroke='currentColor'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M5 13l4 4L19 7'
              />
            </svg>
            <span>Auth Included</span>
          </div>
        </div>
      </div>
    </section>
  );
}