export function BrutalistPricingTable() {
  const rows = [
    { label: "Components", free: "12", pro: "ALL", team: "ALL" },
    { label: "Visual systems", free: "1", pro: "5", team: "5" },
    { label: "Figma files", free: "—", pro: "✓", team: "✓" },
    { label: "Seats", free: "1", pro: "1", team: "25" },
    { label: "Support", free: "Community", pro: "Email", team: "Priority" },
  ];
  const plans = [
    { name: "FREE", price: "$0" },
    { name: "PRO", price: "$79", featured: true },
    { name: "TEAM", price: "$249" },
  ];

  return (
    <section
      className="bg-[#FAFAF8] px-8 py-16 text-[#111111]"
      style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
    >
      <div className="mx-auto max-w-4xl">
        <h2 className="mb-8 text-[36px] font-bold uppercase leading-[0.9] tracking-[-0.03em] md:text-[52px]">
          Pick a plan.
        </h2>

        <div className="overflow-hidden border-2 border-[#111111]">
          {/* header */}
          <div className="grid grid-cols-4 border-b-2 border-[#111111]">
            <div className="p-4" />
            {plans.map((p) => (
              <div
                key={p.name}
                className={`border-l-2 border-[#111111] p-4 text-center ${
                  p.featured ? "bg-[#111111] text-[#FAFAF8]" : ""
                }`}
              >
                <div className="font-mono text-[11px] font-bold tracking-[0.12em]">
                  {p.name}
                </div>
                <div className="mt-1 text-[26px] font-bold tracking-[-0.02em]">
                  {p.price}
                </div>
              </div>
            ))}
          </div>

          {/* rows */}
          {rows.map((r, i) => (
            <div
              key={r.label}
              className={`grid grid-cols-4 ${
                i < rows.length - 1 ? "border-b-2 border-[#111111]" : ""
              }`}
            >
              <div className="p-4 font-mono text-[11px] font-bold uppercase tracking-[0.08em]">
                {r.label}
              </div>
              <div className="border-l-2 border-[#111111] p-4 text-center text-[14px] font-medium">
                {r.free}
              </div>
              <div className="border-l-2 border-[#111111] bg-[#111111] p-4 text-center text-[14px] font-bold text-[#FAFAF8]">
                {r.pro}
              </div>
              <div className="border-l-2 border-[#111111] p-4 text-center text-[14px] font-medium">
                {r.team}
              </div>
            </div>
          ))}
        </div>

        <button
          type="button"
          className="mt-4 w-full border-2 border-[#111111] bg-[#2A3D2F] py-4 text-[15px] font-bold uppercase tracking-[0.06em] text-[#FAFAF8] transition-transform hover:-translate-y-0.5"
        >
          Get Pro — $79
        </button>
      </div>
    </section>
  );
}
Brutalist Pricing Table

Pick a plan.
