SaaS Pricing Page Builder

import { useMemo, useState } from "react";

type BillingCycle = "monthly" | "yearly";
type PricingStyle = "cards" | "comparison" | "minimal";

type Plan = {
  id: string;
  name: string;
  description: string;
  monthlyPrice: number;
  yearlyPrice: number;
  cta: string;
  features: string[];
};

export default function PricingSection() {
  const plans: Plan[] = [
  {
    "id": "starter",
    "name": "Starter",
    "description": "For early teams validating product-market fit.",
    "monthlyPrice": 19,
    "yearlyPrice": 15,
    "cta": "Start Free",
    "features": [
      "Up to 3 team members",
      "Basic analytics",
      "Email support"
    ]
  },
  {
    "id": "growth",
    "name": "Growth",
    "description": "For teams scaling activation and retention.",
    "monthlyPrice": 59,
    "yearlyPrice": 49,
    "cta": "Choose Growth",
    "features": [
      "Up to 15 team members",
      "Advanced analytics",
      "Priority support",
      "Automation workflows"
    ]
  },
  {
    "id": "enterprise",
    "name": "Enterprise",
    "description": "For mature SaaS organizations with complex needs.",
    "monthlyPrice": 149,
    "yearlyPrice": 129,
    "cta": "Book Demo",
    "features": [
      "Unlimited seats",
      "SLA + security controls",
      "Dedicated success manager",
      "Custom integrations"
    ]
  }
];
  const [billing, setBilling] = useState<BillingCycle>("monthly");
  const style: PricingStyle = "cards";
  const recommendedPlanId = "growth";

  const allFeatures = useMemo(
    () => Array.from(new Set(plans.flatMap((plan) => plan.features))),
    [plans]
  );

  return (
    <section className="max-w-6xl mx-auto px-6 py-16">
      <div className="text-center mb-10">
        <h2 className="text-4xl font-bold tracking-tight">Simple pricing that scales with your SaaS</h2>
        <p className="mt-3 text-slate-600 max-w-2xl mx-auto">
          Flexible plans for startups and growth-stage teams with transparent pricing.
        </p>
        <div className="mt-6 inline-flex rounded-full border border-slate-200 p-1">
          <button
            onClick={() => setBilling("monthly")}
            className={`px-4 py-2 rounded-full text-sm ${billing === "monthly" ? "bg-slate-900 text-white" : "text-slate-600"}`}
          >
            Monthly
          </button>
          <button
            onClick={() => setBilling("yearly")}
            className={`px-4 py-2 rounded-full text-sm ${billing === "yearly" ? "bg-slate-900 text-white" : "text-slate-600"}`}
          >
            Yearly
          </button>
        </div>
      </div>

      {style === "cards" && (
        <div className="grid gap-4 md:grid-cols-3">
          {plans.map((plan) => (
            <article key={plan.id} className={`rounded-2xl border p-6 ${plan.id === recommendedPlanId ? "border-sky-400 shadow-lg bg-sky-50/40" : "border-slate-200 bg-white"}`}>
              <h3 className="text-lg font-semibold">{plan.name}</h3>
              <p className="mt-1 text-sm text-slate-600">{plan.description}</p>
              <p className="mt-4 text-3xl font-bold">{billing === "monthly" ? `$${plan.monthlyPrice}` : `$${plan.yearlyPrice}`}</p>
              <p className="text-xs text-slate-500">per seat / month</p>
              <ul className="mt-4 space-y-2 text-sm">
                {plan.features.map((feature) => <li key={feature}>• {feature}</li>)}
              </ul>
              <button className={`mt-6 w-full rounded-lg px-4 py-2 text-sm font-medium ${plan.id === recommendedPlanId ? "bg-sky-600 text-white" : "bg-slate-900 text-white"}`}>
                {plan.cta}
              </button>
            </article>
          ))}
        </div>
      )}

      {style === "comparison" && (
        <div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white">
          <table className="w-full min-w-[680px] text-sm">
            <thead className="bg-slate-50">
              <tr>
                <th className="p-4 text-left">Feature</th>
                {plans.map((plan) => (
                  <th key={plan.id} className="p-4 text-left">
                    <p className="font-semibold">{plan.name}</p>
                    <p className="text-xs text-slate-500">{billing === "monthly" ? `$${plan.monthlyPrice}` : `$${plan.yearlyPrice}`}/mo</p>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {allFeatures.map((feature) => (
                <tr key={feature} className="border-t border-slate-100">
                  <td className="p-4">{feature}</td>
                  {plans.map((plan) => (
                    <td key={plan.id} className="p-4">
                      {plan.features.includes(feature) ? "✓" : "—"}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {style === "minimal" && (
        <div className="space-y-3">
          {plans.map((plan) => (
            <article key={plan.id} className={`rounded-xl border p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 ${plan.id === recommendedPlanId ? "border-sky-400 bg-sky-50/50" : "border-slate-200 bg-white"}`}>
              <div>
                <h3 className="font-semibold">{plan.name}</h3>
                <p className="text-sm text-slate-600">{plan.description}</p>
              </div>
              <div className="text-right">
                <p className="text-2xl font-bold">{billing === "monthly" ? `$${plan.monthlyPrice}` : `$${plan.yearlyPrice}`}</p>
                <button className="mt-2 rounded-md bg-slate-900 text-white px-3 py-1.5 text-sm">{plan.cta}</button>
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}