import { Card, CardContent, CardHeader, CardTitle } from '@gib/ui/card';

const features = [
  {
    title: 'Turborepo',
    description:
      'Efficient build system with intelligent caching. Share code between web and mobile apps seamlessly.',
    icon: '⚡',
  },
  {
    title: 'Self-Hosted Convex',
    description:
      'Complete control over your data with self-hosted Convex backend. No vendor lock-in, deploy anywhere.',
    icon: '🏠',
  },
  {
    title: 'Next.js 16 + Expo',
    description:
      'Modern Next.js 16 with App Router for web, Expo 54 for mobile. One codebase, multiple platforms.',
    icon: '📱',
  },
  {
    title: 'Type-Safe Backend',
    description:
      'Fully type-safe queries and mutations with Convex. Auto-generated TypeScript types for the entire API.',
    icon: '🔒',
  },
  {
    title: 'Authentication Included',
    description:
      'OAuth with Authentik + custom password auth with email verification. Production-ready auth out of the box.',
    icon: '🔐',
  },
  {
    title: 'Real-time Updates',
    description:
      'Built-in real-time subscriptions with Convex reactive queries. No WebSocket configuration needed.',
    icon: '⚡',
  },
  {
    title: 'shadcn/ui Components',
    description:
      'Beautiful, accessible components from shadcn/ui. Customizable with Tailwind CSS v4.',
    icon: '🎨',
  },
  {
    title: 'Docker Ready',
    description:
      'Production Docker setup included. Deploy to any server with docker-compose up.',
    icon: '🐳',
  },
  {
    title: 'Developer Experience',
    description:
      'Hot reload, TypeScript strict mode, ESLint, Prettier, and Bun for blazing fast installs.',
    icon: '⚙️',
  },
];

export function Features() {
  return (
    <section id="features" className="container mx-auto px-4 py-24">
      <div className="mx-auto max-w-6xl">
        {/* Section Header */}
        <div className="mb-16 text-center">
          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Everything You Need to Ship Fast
          </h2>
          <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
            A complete monorepo template with all the tools and patterns you
            need for production-ready applications.
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <Card key={feature.title} className="border-border/40">
              <CardHeader className='flex items-center gap-2'>
                <div className="mb-2 text-3xl">{feature.icon}</div>
                <CardTitle className="text-xl">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}