export function ThreeTierPricing() {
  const tiers = [
    {
      name: "Free",
      price: "0",
      cycle: "forever",
      desc: "For trying the kit on a side project.",
      features: ["12 starter components", "1 visual system", "Community support"],
      cta: "Start free",
      featured: false,
    },
    {
      name: "Pro",
      price: "79",
      cycle: "lifetime",
      desc: "For builders who ship for a living.",
      features: [
        "All premium components",
        "Five visual systems",
        "Figma source files",
        "Lifetime updates",
      ],
      cta: "Get Pro",
      featured: true,
    },
    {
      name: "Team",
      price: "249",
      cycle: "lifetime",
      desc: "For studios shipping together.",
      features: ["Everything in Pro", "Up to 25 seats", "Priority support"],
      cta: "Get Team",
      featured: false,
    },
  ];

  return (
    <section className="bg-[#FAFAF8] px-8 py-20 text-[#111111]">
      <div className="mx-auto max-w-5xl">
        <h2
          className="mb-12 text-center leading-[0.98] tracking-[-0.02em]"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: "clamp(34px, 5vw, 54px)",
          }}
        >
          Pay once. <span className="italic text-[#2A3D2F]">Own it.</span>
        </h2>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          {tiers.map((t) => (
            <div
              key={t.name}
              className={`flex flex-col rounded-2xl border p-7 ${
                t.featured
                  ? "border-[#111111] bg-[#111111] text-[#FAFAF8]"
                  : "border-[#1111111A] bg-[#FAFAF8]"
              }`}
            >
              <div className="flex items-center justify-between">
                <span
                  className={`font-mono text-[11px] uppercase tracking-[0.14em] ${
                    t.featured ? "text-[#FAFAF8]/60" : "text-[#6B6B66]"
                  }`}
                >
                  {t.name}
                </span>
                {t.featured && (
                  <span className="rounded-full bg-[#2A3D2F] px-2.5 py-1 font-mono text-[9px] uppercase tracking-[0.12em] text-[#FAFAF8]">
                    Popular
                  </span>
                )}
              </div>

              <div className="mt-4 flex items-baseline gap-1">
                <span
                  className={`text-[14px] ${
                    t.featured ? "text-[#FAFAF8]/60" : "text-[#6B6B66]"
                  }`}
                >
                  $
                </span>
                <span
                  className="text-[56px] leading-none tracking-[-0.02em]"
                  style={{ fontFamily: "'Instrument Serif', Georgia, serif" }}
                >
                  {t.price}
                </span>
                <span
                  className={`ml-1 font-mono text-[11px] ${
                    t.featured ? "text-[#FAFAF8]/60" : "text-[#6B6B66]"
                  }`}
                >
                  /{t.cycle}
                </span>
              </div>

              <p
                className={`mt-3 text-[13.5px] leading-[1.5] ${
                  t.featured ? "text-[#FAFAF8]/70" : "text-[#6B6B66]"
                }`}
              >
                {t.desc}
              </p>

              <ul className="mt-6 flex flex-1 flex-col gap-2.5">
                {t.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5 text-[13.5px]">
                    <span className="text-[#2A3D2F]">✓</span>
                    <span className={t.featured ? "text-[#FAFAF8]/90" : ""}>
                      {f}
                    </span>
                  </li>
                ))}
              </ul>

              <button
                type="button"
                className={`mt-7 w-full rounded-full py-3 text-[14px] font-medium transition-colors ${
                  t.featured
                    ? "bg-[#FAFAF8] text-[#111111] hover:bg-[#2A3D2F] hover:text-[#FAFAF8]"
                    : "border border-[#111111] hover:bg-[#111111] hover:text-[#FAFAF8]"
                }`}
              >
                {t.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Three Tier Pricing

Pay once. Own it.
