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

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

export default function Footer() {
  return (
    <footer className='border-border/40 bg-muted/30 border-t'>
      <div className='container mx-auto px-4 py-12'>
        <div className='grid gap-8 md:grid-cols-4'>
          {/* Brand */}
          <div className='md:col-span-2'>
            <h3 className={`mb-2 text-3xl font-bold ${kanitSans.className}`}>
              convex monorepo
            </h3>
            <p className='text-muted-foreground text-sm'>
              A production-ready Turborepo starter with Next.js, Expo, and a
              self-hosted Convex backend, including Convex Auth with a custom
              useSend email provider to ensure everything can be self-hosted.
              Built for developers who want complete control without sacrificing
              ease of use.
            </p>
          </div>

          {/* Links */}
          <div>
            <h4 className='mb-4 text-sm font-semibold'>Resources</h4>
            <ul className='space-y-2 text-sm'>
              <li>
                <Link
                  href='https://git.gbrown.org/gib/convex-monorepo'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  Gitea Repository
                </Link>
              </li>
              <li>
                <Link
                  href='https://docs.convex.dev'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  Convex Documentation
                </Link>
              </li>
              <li>
                <Link
                  href='https://turbo.build'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  Turborepo
                </Link>
              </li>
            </ul>
          </div>

          {/* Tech */}
          <div>
            <h4 className='mb-4 text-sm font-semibold'>Built With</h4>
            <ul className='space-y-2 text-sm'>
              <li>
                <Link
                  href='https://nextjs.org'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  Next.js
                </Link>
              </li>
              <li>
                <Link
                  href='https://expo.dev'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  Expo
                </Link>
              </li>
              <li>
                <Link
                  href='https://ui.shadcn.com'
                  target='_blank'
                  rel='noopener noreferrer'
                  className='text-muted-foreground hover:text-foreground transition-colors'
                >
                  shadcn/ui
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className='border-border/40 text-muted-foreground mt-12 border-t pt-8 text-center text-sm'>
          <p>
            Built by{' '}
            <Link
              href='https://gbrown.org'
              target='_blank'
              rel='noopener noreferrer'
              className='hover:text-foreground font-medium transition-colors'
            >
              Gib.
            </Link>
          </p>
        </div>
      </div>
    </footer>
  );
}