import { Code2, Palette, Rocket, Sparkles, Layers, ShieldCheck } from "lucide-react"

const features = [
  {
    icon: Code2,
    title: "Copy-paste ready",
    description:
      "Every block is a single self-contained file. Drop it into your project and tweak the copy — no setup, no dependencies to chase.",
  },
  {
    icon: Palette,
    title: "Themeable by design",
    description:
      "Built on Tailwind CSS variables and shadcn primitives. Swap your tokens and the whole library follows your brand.",
  },
  {
    icon: Rocket,
    title: "Production grade",
    description:
      "Responsive, accessible, dark-mode aware. The same patterns I ship on lndev.me — battle-tested in real products.",
  },
  {
    icon: Layers,
    title: "Composable",
    description:
      "Mix heroes, features and pricing blocks freely. They share spacing, typography and a quiet visual language.",
  },
  {
    icon: ShieldCheck,
    title: "Typed everywhere",
    description:
      "Strict TypeScript out of the box. Your editor catches the typo before your QA does.",
  },
  {
    icon: Sparkles,
    title: "Always growing",
    description:
      "New blocks land regularly. Follow the changelog and pull in whatever fits your next sprint.",
  },
]

export default function Features01() {
  return (
    <section className="bg-background py-24">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
            What you get
          </p>
          <h2 className="mt-3 text-balance text-3xl font-medium tracking-tight sm:text-4xl">
            Complete blocks. Not starter kits.
          </h2>
          <p className="mt-4 text-balance text-muted-foreground">
            Every block is a finished section, not a sketch. Drop it in, change
            the words, move on.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="group flex flex-col gap-4 bg-background p-8 transition-colors hover:bg-muted/30"
            >
              <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-muted/50 text-foreground transition-colors group-hover:bg-background">
                <feature.icon className="size-5" strokeWidth={1.5} />
              </div>
              <div className="flex flex-col gap-2">
                <h3 className="text-base font-medium text-foreground">
                  {feature.title}
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}