Pricing Gradient

// Three pricing cards with a soft peach gradient header (price, plan, button)
// and a white body listing features. The middle plan can be highlighted.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Plan = {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta: string;
  featured?: boolean;
};

type Props = {
  heading?: string;
  intro?: string;
  plans?: Plan[];
};

const DEFAULT_PLANS: Plan[] = [
  {
    name: "Starter",
    price: "Free",
    description: "Everything you need to try it out and set up your first workflow.",
    features: ["Up to 3 projects", "Basic analytics", "Email support", "Community access"],
    cta: "Start for free",
  },
  {
    name: "Pro",
    price: "$189",
    period: "/yr",
    description: "For growing teams that need more room and fewer limits.",
    features: ["Unlimited projects", "Advanced analytics", "Priority support", "Team roles & permissions", "Custom domains"],
    cta: "Start 14-day trial",
    featured: true,
  },
  {
    name: "Business",
    price: "$300",
    period: "/yr",
    description: "Tailored for organisations with security and scale in mind.",
    features: ["Everything in Pro", "SSO & audit logs", "Dedicated manager", "99.9% uptime SLA", "Onboarding sessions"],
    cta: "Talk to sales",
  },
];

const Check = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden className="mt-0.5 h-4 w-4 shrink-0 text-gray-500">
    <path d="M20 6 9 17l-5-5" />
  </svg>
);

export default function PricingGradient({
  heading = "Simple, honest pricing",
  intro = "Start free and upgrade when you need to. No hidden fees, cancel any time.",
  plans = DEFAULT_PLANS,
}: Props) {
  return (
    <section className="bg-[radial-gradient(ellipse_at_top,#fde8d8_0%,#ffffff_60%)] px-5 py-20 font-['Host_Grotesk',ui-sans-serif,system-ui,sans-serif] antialiased md:px-10 md:py-28">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto mb-14 max-w-2xl text-center">
          <h2 className="text-[clamp(36px,5vw,56px)] font-semibold leading-[1.1] tracking-tight text-gray-900">{heading}</h2>
          <p className="mt-4 text-lg text-gray-500">{intro}</p>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          {plans.map((plan) => (
            <div key={plan.name} className={`overflow-hidden rounded-3xl bg-white ${plan.featured ? "shadow-2xl shadow-orange-200 ring-2 ring-orange-300" : "shadow-sm ring-1 ring-black/5"}`}>
              <div className="bg-[radial-gradient(circle_at_20%_20%,#ffd9c2_0%,transparent_55%),radial-gradient(circle_at_85%_30%,#fbc6d9_0%,transparent_50%),linear-gradient(135deg,#fff1e6_0%,#fde2d4_100%)] px-8 pb-12 pt-10">
                <p className="text-5xl font-semibold tracking-tight text-gray-900">
                  {plan.price}
                  {plan.period && <span className="text-xl font-medium text-gray-500">{plan.period}</span>}
                </p>
                <p className="mt-1 text-xl font-semibold text-amber-700">{plan.name}</p>
                <a href="#" className="mt-6 block w-full rounded-full border border-white/70 bg-white/55 py-4 text-center font-bold text-gray-800 backdrop-blur-md transition-opacity hover:opacity-80 active:scale-95">
                  {plan.cta}
                </a>
              </div>

              <div className="bg-white px-8 pb-8 pt-7">
                <p className="mb-6 text-base leading-snug text-gray-500">{plan.description}</p>
                <ul className="mb-2 space-y-4">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-3">
                      <Check />
                      <span className="text-base leading-snug text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}