SaaS Pricing Table Generator

'use client';

import { useState } from 'react';

interface Tier {
  id: string;
  name: string;
  description: string;
  monthlyPrice: number;
  annualPrice: number;
  isPopular: boolean;
  ctaText: string;
  ctaUrl: string;
  features: string[];
}

const TIERS: Tier[] = [
  {
    "id": "starter",
    "name": "Starter",
    "description": "Essential tools for solo founders and early projects.",
    "monthlyPrice": 19,
    "annualPrice": 15,
    "isPopular": false,
    "ctaText": "Start 14-day trial",
    "ctaUrl": "#signup",
    "features": [
      "Up to 3 team members",
      "5,000 monthly active users",
      "Community Discord support",
      "Basic analytics dashboard",
      "Standard API access (100 req/min)"
    ]
  },
  {
    "id": "pro",
    "name": "Pro",
    "description": "Advanced automation, team collaboration, and higher volume limits.",
    "monthlyPrice": 49,
    "annualPrice": 39,
    "isPopular": true,
    "ctaText": "Get started with Pro",
    "ctaUrl": "#signup",
    "features": [
      "Unlimited team members",
      "50,000 monthly active users",
      "Priority email & chat support",
      "Advanced analytics & audit logs",
      "High-speed API access (1,000 req/min)",
      "Custom webhooks & integrations",
      "99.9% uptime SLA guarantee"
    ]
  },
  {
    "id": "enterprise",
    "name": "Enterprise",
    "description": "Maximum security, compliance, and dedicated team governance.",
    "monthlyPrice": 149,
    "annualPrice": 119,
    "isPopular": false,
    "ctaText": "Talk to Sales",
    "ctaUrl": "#contact",
    "features": [
      "Unlimited everything",
      "Dedicated customer success manager",
      "SAML / Okta Single Sign-On (SSO)",
      "Custom data retention policies",
      "SOC 2 Type II compliance report",
      "Custom invoicing & PO billing",
      "24/7 emergency phone SLA"
    ]
  }
];

export default function PricingSection() {
  const [isAnnual, setIsAnnual] = useState(true);

  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-950 text-zinc-100 min-h-screen">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4">
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
            Simple, transparent pricing
          </h2>
          <p className="text-base sm:text-lg text-zinc-400">
            Choose the plan that fits your growth. Upgrade or cancel anytime.
          </p>

          {/* Billing Cycle Toggle */}
          <div className="pt-6 flex items-center justify-center gap-3">
            <span className={`text-sm font-medium ${!isAnnual ? 'text-white' : 'text-zinc-400'}`}>
              Monthly billing
            </span>
            <button
              type="button"
              role="switch"
              aria-checked={isAnnual}
              onClick={() => setIsAnnual(!isAnnual)}
              className="relative inline-flex h-7 w-13 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-zinc-800 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
              <span
                className={`pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ${
                  isAnnual ? 'translate-x-6 bg-emerald-400' : 'translate-x-0'
                }`}
              />
            </button>
            <span className={`text-sm font-medium flex items-center gap-1.5 ${isAnnual ? 'text-white' : 'text-zinc-400'}`}>
              <span>Annual billing</span>
              <span className="inline-block px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                Save 20%
              </span>
            </span>
          </div>
        </div>

        {/* Pricing Cards Grid */}
        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
          {TIERS.map((tier) => {
            const price = isAnnual ? tier.annualPrice : tier.monthlyPrice;

            return (
              <div
                key={tier.id}
                className={`relative rounded-2xl p-8 flex flex-col justify-between transition-all duration-200 ${
                  tier.isPopular
                    ? 'bg-zinc-900 border-2 border-emerald-500 shadow-xl shadow-emerald-500/10 scale-100 lg:-translate-y-2'
                    : 'bg-zinc-900/60 border border-zinc-800 hover:border-zinc-700'
                }`}
              >
                {tier.isPopular && (
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-3 py-1 bg-emerald-500 text-zinc-950 text-xs font-bold uppercase tracking-wider rounded-full shadow-md">
                    Most Popular
                  </div>
                )}

                <div>
                  <div className="flex justify-between items-baseline">
                    <h3 className="text-xl font-bold tracking-tight text-white">{tier.name}</h3>
                  </div>
                  <p className="mt-2 text-sm text-zinc-400 min-h-[40px] leading-relaxed">
                    {tier.description}
                  </p>

                  <div className="mt-6 flex items-baseline gap-1">
                    <span className="text-4xl sm:text-5xl font-black text-white">
                      ${price}
                    </span>
                    <span className="text-sm font-medium text-zinc-400">
                      {price === 0 ? '' : isAnnual ? '/month, billed annually' : '/month'}
                    </span>
                  </div>

                  {/* Feature Checklist */}
                  <ul className="mt-8 space-y-3.5 text-sm text-zinc-300">
                    {tier.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-3">
                        <svg
                          className="h-5 w-5 text-emerald-400 shrink-0 mt-0.5"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mt-8 pt-4">
                  <a
                    href={tier.ctaUrl}
                    className={`w-full block py-3 px-4 rounded-xl text-center text-sm font-semibold transition-all duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zinc-950 ${
                      tier.isPopular
                        ? 'bg-emerald-500 text-zinc-950 hover:bg-emerald-400 focus:ring-emerald-500'
                        : 'bg-zinc-800 text-white hover:bg-zinc-700 focus:ring-zinc-600'
                    }`}
                  >
                    {tier.ctaText}
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}