Pricing Single

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

export interface PricingSingleProps {
  title?: string;
  description?: string;
  price?: string;
  cadence?: string;
  features?: string[];
  cta?: { label: string; href: string };
  guarantee?: string;
  className?: string;
}

/** One honest plan: a wide rounded card split into a sage-tinted price side (big serif price, CTA, guarantee) and a two-column “everything included” list. */
export function PricingSingle({
  title = "One plan. Everything included.",
  description = "We don’t believe in locking climate features behind tiers.",
  price = "€9",
  cadence = "per employee / month",
  features = [
    "Automatic footprint",
    "Unlimited integrations",
    "Reduction plan & targets",
    "Supplier portal",
    "CSRD & CDP reports",
    "Public climate page",
    "Human support, always",
    "Annual methodology review",
  ],
  cta = { label: "Start your 30-day trial", href: "#trial" },
  guarantee = "Not happy after 60 days? Full refund, no questions.",
  className,
}: PricingSingleProps) {
  return (
    <section aria-labelledby="os-ps-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="os-ps-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display">
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
        </div>
        <div className="mx-auto mt-12 grid max-w-4xl overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md md:grid-cols-[1fr_1.3fr]">
          <div className="flex flex-col bg-da-accent p-8 text-da-accent-fg sm:p-10">
            <Sprout aria-hidden className="size-8" />
            <p className="mt-8 font-da-display text-6xl">{price}</p>
            <p className="mt-1 opacity-85">{cadence}</p>
            <a
              href={cta.href}
              className="da-focus da-transition mt-8 inline-flex h-12 items-center justify-center rounded-da-pill bg-da-primary px-6 font-medium text-da-primary-fg hover:bg-da-primary/90"
            >
              {cta.label}
            </a>
            <p className="mt-4 text-sm opacity-85">{guarantee}</p>
          </div>
          <div className="p-8 sm:p-10">
            <h3 className="font-da-display text-2xl">Everything included</h3>
            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
              {features.map((f) => (
                <li key={f} className="flex items-start gap-2.5">
                  <Check aria-hidden className="mt-0.5 size-4 shrink-0 text-da-primary" strokeWidth={2.5} />
                  {f}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

export default PricingSingle;