Bento grid

import { Badge, Card, CardDescription, CardHeader, CardTitle } from "@cronus-ui/ui";
import { BarChart3, Layers, Lock, Palette, Workflow, Zap } from "lucide-react";

const FEATURES = [
  {
    icon: Zap,
    title: "Lightning fast",
    description: "Optimized rendering and zero-runtime styling keep every interaction instant.",
  },
  {
    icon: Palette,
    title: "Themeable by design",
    description: "Swap a palette and every surface, border, and gradient updates live.",
  },
  {
    icon: Lock,
    title: "Secure by default",
    description: "SOC 2 compliant infrastructure with end-to-end encryption on every request.",
  },
  {
    icon: Layers,
    title: "Composable primitives",
    description: "Build complex layouts from small, predictable, accessible building blocks.",
  },
  {
    icon: BarChart3,
    title: "Insightful analytics",
    description: "Understand how people use your product with real-time usage dashboards.",
  },
  {
    icon: Workflow,
    title: "Automate anything",
    description: "Connect your favorite tools and wire up workflows without writing glue code.",
  },
] as const;

export function BentoFeatureBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Platform</Badge>
        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
          A bento grid for product capabilities.
        </h2>
      </div>

      <div className="mx-auto mt-12 grid max-w-5xl gap-4 md:grid-cols-6">
        {FEATURES.slice(0, 4).map((feature, index) => (
          <Card
            key={feature.title}
            className={[
              "border-border bg-surface-raised",
              index === 0 ? "md:col-span-4 md:row-span-2" : "md:col-span-2",
              index === 3 ? "md:col-span-3" : "",
            ].join(" ")}
          >
            <CardHeader>
              <span className="grid size-11 place-items-center rounded-xl bg-primary/15 text-primary">
                <feature.icon aria-hidden="true" className="size-5" />
              </span>
              <CardTitle className="mt-4">{feature.title}</CardTitle>
              <CardDescription>{feature.description}</CardDescription>
            </CardHeader>
          </Card>
        ))}
        <Card className="border-primary bg-gradient-primary text-primary-foreground shadow-glow md:col-span-3">
          <CardHeader>
            <CardTitle className="text-primary-foreground">Production ready</CardTitle>
            <CardDescription className="text-primary-foreground/75">
              Compose, theme, and ship from one registry.
            </CardDescription>
          </CardHeader>
        </Card>
      </div>
    </section>
  );
}