Pricing Cards

"use client";

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

export interface PricingCardsPlan {
  name: string;
  emoji: string;
  description: string;
  monthly: number;
  yearly: number;
  features: string[];
  cta: string;
  featured?: boolean;
}

export interface PricingCardsProps {
  eyebrow?: string;
  title?: string;
  plans?: PricingCardsPlan[];
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: PricingCardsPlan[] = [
  {
    name: "Sprout",
    emoji: "🌱",
    description: "For you and a few friends.",
    monthly: 0,
    yearly: 0,
    features: ["Up to 5 members", "3 boards", "Weekly view", "Mobile apps"],
    cta: "Start free",
  },
  {
    name: "Bloom",
    emoji: "🌸",
    description: "For growing small teams.",
    monthly: 8,
    yearly: 6,
    features: ["Unlimited boards", "Reminders & recurring tasks", "Guests for free", "Templates library"],
    cta: "Try Bloom free",
    featured: true,
  },
  {
    name: "Forest",
    emoji: "🌳",
    description: "For teams of teams.",
    monthly: 14,
    yearly: 11,
    features: ["Everything in Bloom", "Workload view", "Admin & SSO", "Priority support"],
    cta: "Talk to us",
  },
];

/** Three rounded plan cards with emoji, pill monthly/yearly toggle, and the featured plan filled in lavender with a “Most loved” sticker. */
export function PricingCards({
  eyebrow = "Pricing",
  title = "Simple plans that grow with you",
  plans = DEFAULT_PLANS,
  currency = "$",
  className,
}: PricingCardsProps) {
  const [yearly, setYearly] = useState(true);
  return (
    <section aria-labelledby="sf-pricing-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">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="sf-pricing-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-extrabold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <div role="group" aria-label="Billing period" className="mx-auto mt-8 inline-flex rounded-da-pill bg-da-surface-2 p-1.5">
            {[
              { v: false, l: "Monthly" },
              { v: true, l: "Yearly · save 25%" },
            ].map((o) => (
              <button
                key={o.l}
                type="button"
                aria-pressed={yearly === o.v}
                onClick={() => setYearly(o.v)}
                className={cn(
                  "da-focus da-transition rounded-da-pill px-5 py-2 text-sm font-semibold",
                  yearly === o.v ? "bg-da-surface shadow-da-sm" : "text-da-muted-fg",
                )}
              >
                {o.l}
              </button>
            ))}
          </div>
        </div>
        <ul className="mx-auto mt-12 grid max-w-5xl gap-5 lg:grid-cols-3">
          {plans.map((p) => (
            <li key={p.name} className={cn("relative flex flex-col rounded-da-lg p-8", p.featured ? "bg-da-primary/12" : "bg-da-surface shadow-da-sm")}>
              {p.featured && (
                <span className="absolute -top-3 right-6 rotate-3 rounded-da-pill bg-da-warning px-3 py-1 text-xs font-bold text-da-warning-fg shadow-da-sm">
                  Most loved 💛
                </span>
              )}
              <span aria-hidden className="text-4xl">
                {p.emoji}
              </span>
              <h3 className="mt-3 font-da-display text-2xl font-extrabold">{p.name}</h3>
              <p className="mt-1 text-sm text-da-muted-fg">{p.description}</p>
              <p className="mt-6 flex items-baseline gap-1">
                <span className="font-da-display text-5xl font-extrabold tracking-da-display">
                  {currency}
                  {yearly ? p.yearly : p.monthly}
                </span>
                <span className="text-sm text-da-muted-fg">/ member / mo</span>
              </p>
              <ul className="mt-6 flex-1 space-y-2.5">
                {p.features.map((f) => (
                  <li key={f} className="flex items-center gap-2.5 text-[15px]">
                    <span aria-hidden className="grid size-5 shrink-0 place-items-center rounded-full bg-da-secondary text-da-secondary-fg">
                      <Check className="size-3" strokeWidth={3} />
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={`#${p.name.toLowerCase()}`}
                className={cn(
                  "da-focus da-transition mt-8 inline-flex h-12 items-center justify-center rounded-da-pill font-semibold hover:-translate-y-0.5",
                  p.featured ? "bg-da-primary text-da-primary-fg shadow-da-md" : "bg-da-surface-2 hover:bg-da-muted",
                )}
              >
                {p.cta}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default PricingCards;