SaaS starter

import { Link } from "../router";

const tiers = [
  { name: "Free", price: "$0", features: ["1 workspace", "3 projects", "Community support"] },
  { name: "Pro", price: "$19/mo", features: ["Unlimited projects", "Priority support", "Usage analytics"] },
  { name: "Team", price: "$49/mo", features: ["Everything in Pro", "5 seats", "Roles and audit log"] },
];

export function Pricing() {
  return (
    <section>
      <h1 className="text-3xl font-semibold tracking-tight">Pricing</h1>
      <p className="mt-2 text-slate-600">Placeholder tiers. Connect a payment provider to make these real.</p>
      <div className="mt-8 grid gap-6 sm:grid-cols-3">
        {tiers.map((t) => (
          <div key={t.name} className="flex flex-col rounded-xl border border-slate-200 bg-white p-6">
            <h2 className="font-medium">{t.name}</h2>
            <p className="mt-2 text-3xl font-semibold">{t.price}</p>
            <ul className="mt-4 flex-1 space-y-2 text-sm text-slate-600">
              {t.features.map((f) => (
                <li key={f}>• {f}</li>
              ))}
            </ul>
            <Link to="/signup" className="mt-6 rounded-lg bg-slate-900 px-4 py-2 text-center text-sm font-medium text-white">
              Choose {t.name}
            </Link>
          </div>
        ))}
      </div>
    </section>
  );
}