export function PricingTierCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group relative w-full max-w-sm rounded-2xl border-2 border-[#111111] bg-white p-7 transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_30px_60px_-30px_rgba(17,17,17,0.3)]">
        {/* Popular badge */}
        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
          <span className="inline-flex items-center gap-1.5 rounded-full bg-[#111111] text-white px-3 py-1 text-[10.5px] font-mono uppercase tracking-[0.18em]">
            <span className="h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
            Most popular
          </span>
        </div>

        <div className="flex items-baseline justify-between">
          <h3
            className="text-[36px] leading-none italic"
            style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
          >
            Studio
          </h3>
          <span className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-[#6B6B66]">
            For teams
          </span>
        </div>

        <p className="mt-2 text-[13px] text-[#6B6B66] leading-relaxed">
          For small teams shipping a real product, not a side-project.
        </p>

        <div className="mt-6 flex items-baseline gap-1">
          <span className="font-mono text-[13px] text-[#6B6B66]">$</span>
          <span
            className="text-[64px] leading-none tracking-tight"
            style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
          >
            29
          </span>
          <span className="font-mono text-[12px] text-[#6B6B66] ml-1">/ seat / mo</span>
        </div>
        <p className="mt-1 text-[11.5px] text-[#6B6B66] font-mono">
          Billed yearly — save 20%
        </p>

        <ul className="mt-6 space-y-3 border-t border-[#1111111A] pt-5 text-[13px]">
          {[
            "Up to 12 seats",
            "Unlimited projects",
            "Branded share links",
            "Audit log & SSO",
            "Priority support",
          ].map((f) => (
            <li key={f} className="flex items-start gap-3">
              <span className="text-[#2A3D2F] mt-0.5">✓</span>
              <span>{f}</span>
            </li>
          ))}
        </ul>

        <button
          type="button"
          className="mt-6 w-full bg-[#111111] text-white py-3 text-[13px] font-medium hover:bg-[#1F1F1D] transition-colors rounded-md flex items-center justify-center gap-2 group/cta"
        >
          <span>Start with Studio</span>
          <span
            aria-hidden
            className="transition-transform group-hover/cta:translate-x-1"
          >
            →
          </span>
        </button>
        <p className="mt-3 text-center text-[11px] text-[#6B6B66]">
          14-day free trial · no card required
        </p>
      </article>
    </div>
  );
}
Pricing Tier Card

Studio
