import { Rocket, Shield, Zap, Code } from "lucide-react";
import { Card, CardContent } from "../ui/card";

const features = [
  {
    icon: Rocket,
    title: "Deploy in Seconds",
    description:
      "One-click deployment to Vercel with automatic CI/CD and preview deployments.",
  },
  {
    icon: Shield,
    title: "Production Ready",
    description:
      "Built with best practices, TypeScript, and comprehensive error handling.",
  },
  {
    icon: Zap,
    title: "Blazing Fast",
    description:
      "Optimized for performance with React Server Components and edge runtime.",
  },
  {
    icon: Code,
    title: "Developer Experience",
    description:
      "Hot reload, TypeScript support, and modern tooling for rapid development.",
  },
];

export function FeaturesSection() {
  return (
    <section id="features" className="container mx-auto px-4 py-16 md:py-24">
      <div className="text-center mb-12">
        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">
          Everything you need to ship fast
        </h2>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-balance">
          Pre-configured with the best tools and practices to help you build
          production-ready applications.
        </p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {features.map((feature, index) => (
          <Card
            key={index}
            className="border-border/50 hover:border-foreground/20 transition-colors"
          >
            <CardContent className="pt-6">
              <div className="p-3 rounded-lg bg-secondary/50 w-fit mb-4">
                <feature.icon className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">
                {feature.description}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}