import { Bolt, Layers, ShieldCheck } from "lucide-react";
import { Card } from "@sisyphos-ui/react";

const FEATURES = [
  {
    icon: Bolt,
    tint: "from-orange-500 to-orange-400",
    eyebrow: "Performance",
    title: "Zero runtime tax",
    body: "No emotion, no lodash, no date library. The bundle stays yours.",
  },
  {
    icon: ShieldCheck,
    tint: "from-sky-500 to-sky-400",
    eyebrow: "Accessibility",
    title: "Accessible by default",
    body: "Focus traps, keyboard maps, and WAI-ARIA semantics are built in.",
  },
  {
    icon: Layers,
    tint: "from-emerald-600 to-emerald-500",
    eyebrow: "Theming",
    title: "Theme at runtime",
    body: "applyTheme() flips every token in one call. No rebuild, no flash.",
  },
];

export function FeatureGrid() {
  return (
    <section className="bg-zinc-50 px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-xs font-semibold uppercase tracking-widest text-orange-600">
          Why teams switch
        </span>
        <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">
          Primitives that respect your stack
        </h2>
        <p className="mt-5 text-zinc-600">
          A design system you can grow into — never grow out of.
        </p>
      </div>

      <ul className="mx-auto mt-20 grid max-w-5xl grid-cols-1 gap-4 md:grid-cols-3">
        {FEATURES.map(({ icon: Icon, eyebrow, title, body, tint }, idx) => (
          <li key={title}>
            <Card variant="outlined" className="h-full transition-colors hover:border-orange-300">
              <Card.Body>
                <div className="flex items-center justify-between">
                  <span className={`inline-flex size-12 items-center justify-center rounded-xl bg-gradient-to-br ${tint} text-white shadow-lg`}>
                    <Icon className="size-5" />
                  </span>
                  <span className="font-mono text-xs text-zinc-400">
                    {`0${idx + 1}`.slice(-2)}
                  </span>
                </div>
                <div className="mt-7">
                  <span className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
                    {eyebrow}
                  </span>
                  <h3 className="mt-3 text-lg font-bold tracking-tight">{title}</h3>
                  <p className="mt-4 text-sm text-zinc-600">{body}</p>
                </div>
              </Card.Body>
            </Card>
          </li>
        ))}
      </ul>
    </section>
  );
}
Components used

Used in templates
