import { Landmark, Infinity, Key } from "lucide-react";

const CARDS = [
  {
    icon: Landmark,
    title: "Money without banks",
    description:
      "Operate outside the legacy financial system with peer-to-peer digital sound money.",
  },
  {
    icon: Infinity,
    title: "Scarcity: 21 million",
    description:
      "A mathematical certainty of fixed supply. No inflation, no dilution, ever.",
  },
  {
    icon: Key,
    title: "Self-custody",
    description:
      "True ownership. Your keys, your bitcoin. No counterparty risk, absolute freedom.",
  },
];

export function KnowledgeCards() {
  return (
    <section className="py-16 px-8 border-t border-zinc-800/50">
      <div className="max-w-5xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {CARDS.map((card) => (
            <div
              key={card.title}
              className="flex gap-4 p-6 rounded-xl bg-zinc-900/60 border border-zinc-800/60"
            >
              <div className="mt-0.5 shrink-0 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                <card.icon size={16} className="text-primary" />
              </div>
              <div>
                <h4 className="font-bold mb-1.5 text-sm">{card.title}</h4>
                <p className="text-on-surface-variant text-sm leading-relaxed">
                  {card.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}