Feature Grid

import { Zap, Shield, Sparkles } from "lucide-react";

const features = [
  { icon: Zap, title: "Fast to ship", body: "Copy a section and it renders in your tokens instantly." },
  { icon: Shield, title: "Solid by default", body: "Accessible, responsive markup you can trust in production." },
  { icon: Sparkles, title: "On-brand", body: "Every block themes itself from your existing design system." },
];

export function FeatureGrid() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="mx-auto mb-14 max-w-lg text-center">
        <p className="mb-3 text-sm font-semibold uppercase tracking-wider text-muted-foreground">Why teams pick it</p>
        <h2 className="text-4xl font-bold tracking-tight">Everything you need to launch faster.</h2>
      </div>
      <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
        {features.map((f) => (
          <div key={f.title} className="flex flex-col items-center text-center">
            <div className="mb-5 grid size-12 place-items-center rounded-2xl border border-border">
              <f.icon className="size-6" />
            </div>
            <h3 className="mb-3 text-xl font-bold">{f.title}</h3>
            <p className="text-muted-foreground">{f.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}