Pricing Tiers

import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingTiersPlan {
  name: string;
  tagline: string;
  price: string;
  cadence: string;
  features: string[];
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingTiersProps {
  title?: string;
  description?: string;
  plans?: PricingTiersPlan[];
  className?: string;
}

const DEFAULT_PLANS: PricingTiersPlan[] = [
  {
    name: "Seedling",
    tagline: "For small teams taking a first honest look.",
    price: "Free",
    cadence: "up to 20 people",
    features: ["Automatic footprint", "3 integrations", "Public climate page"],
    cta: { label: "Start free", href: "#seedling" },
  },
  {
    name: "Grove",
    tagline: "For growing companies ready to reduce.",
    price: "€290",
    cadence: "per month",
    features: ["Everything in Seedling", "Unlimited integrations", "Reduction plan & targets", "Supplier portal", "CSRD-ready reports"],
    cta: { label: "Try Grove free", href: "#grove" },
    featured: true,
  },
  {
    name: "Forest",
    tagline: "For groups with several entities.",
    price: "Let’s talk",
    cadence: "annual plan",
    features: ["Everything in Grove", "Multi-entity roll-ups", "Audit support", "Dedicated climate advisor"],
    cta: { label: "Talk to us", href: "#forest" },
  },
];

/** Three rounded plans on cream; the middle one sits on a deep sage card (inverted colors) lifted slightly higher, with a leaf ribbon; checklists use soft tinted checks. */
export function PricingTiers({
  title = "Simple plans that grow with you",
  description = "Start free. Upgrade when you’re ready to reduce — every paid plan includes a 30-day trial.",
  plans = DEFAULT_PLANS,
  className,
}: PricingTiersProps) {
  return (
    <section aria-labelledby="os-pt-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="os-pt-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <ul className="mt-14 grid items-center gap-5 lg:grid-cols-3">
          {plans.map((p) => (
            <li
              key={p.name}
              className={cn(
                "flex flex-col rounded-da-lg p-8",
                p.featured ? "bg-da-primary text-da-primary-fg shadow-da-lg lg:-my-4 lg:py-12" : "bg-da-surface text-da-surface-fg shadow-da-sm",
              )}
            >
              <div className="flex items-center justify-between gap-3">
                <h3 className="font-da-display text-3xl">{p.name}</h3>
                {p.featured && <span className="rounded-da-pill bg-da-primary-fg/15 px-3 py-1 text-xs font-medium">Most chosen</span>}
              </div>
              <p className={cn("mt-2", p.featured ? "opacity-85" : "text-da-muted-fg")}>{p.tagline}</p>
              <p className="mt-8">
                <span className="font-da-display text-5xl">{p.price}</span>{" "}
                <span className={cn("text-sm", p.featured ? "opacity-80" : "text-da-muted-fg")}>{p.cadence}</span>
              </p>
              <ul className="mt-8 flex-1 space-y-3">
                {p.features.map((f) => (
                  <li key={f} className="flex items-start gap-3">
                    <span
                      aria-hidden
                      className={cn(
                        "mt-0.5 grid size-5 shrink-0 place-items-center rounded-full",
                        p.featured ? "bg-da-primary-fg/20" : "bg-da-accent text-da-accent-fg",
                      )}
                    >
                      <Check className="size-3" strokeWidth={3} />
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={p.cta.href}
                className={cn(
                  "da-focus da-transition mt-10 inline-flex h-12 items-center justify-center rounded-da-pill font-medium",
                  p.featured ? "bg-da-primary-fg text-da-primary hover:opacity-90" : "bg-da-surface-2 hover:bg-da-muted",
                )}
              >
                {p.cta.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default PricingTiers;