Pricing / Featured Card

import { Button } from "@/app/components/ui/button";
import { cn } from "@/lib/utils";
import { Check, X } from "lucide-react";

/**
 * Pattern D — "Pricing / Featured Card".
 * Seen on: PricingCard, WhyChooseUsCard. Two variants: default (white +
 * border) vs "populer/featured" (solid primary-70 background, white text).
 * Feature rows: included uses an h-8 w-8 rounded-full badge matching the
 * real platform's own treatment exactly (bg-primary-10, icon
 * text-primary-70) — bg-white/20 on the featured/dark card instead, since
 * a light-blue tint would barely show up against the primary-70
 * background. Excluded is just a plain danger-red X, no badge.
 */
const plans = [
  {
    name: "Starter",
    price: "$29",
    featured: false,
    features: [
      { text: "1 project", included: true },
      { text: "Email support", included: true },
      { text: "Monthly reports", included: true },
      { text: "Priority support", included: false },
    ],
  },
  {
    name: "Growth",
    price: "$79",
    featured: true,
    features: [
      { text: "5 projects", included: true },
      { text: "Priority support", included: true },
      { text: "Weekly reports", included: true },
      { text: "Dedicated manager", included: true },
    ],
  },
];

export function CardPricingFeaturedDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
      {plans.map((plan) => (
        <div
          key={plan.name}
          className={cn(
            "flex h-full flex-col gap-6 rounded-xl p-8",
            plan.featured
              ? "bg-primary-70 text-white"
              : "text-foreground border border-gray-200 bg-white",
          )}
        >
          <div>
            <p
              className={cn(
                "text-sm font-medium",
                plan.featured ? "text-white/80" : "text-muted",
              )}
            >
              {plan.name}
            </p>
            <p className="text-3xl font-bold tracking-tight">
              {plan.price}
              <span className="text-base font-normal">/mo</span>
            </p>
          </div>
          <ul className="flex-1 space-y-3 text-sm">
            {plan.features.map((feature) => (
              <li key={feature.text} className="flex items-center gap-2.5">
                {feature.included ? (
                  <span
                    className={cn(
                      "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
                      plan.featured
                        ? "bg-white/20 text-white"
                        : "bg-primary-10 text-primary-70",
                    )}
                  >
                    <Check size={18} strokeWidth={2.5} />
                  </span>
                ) : (
                  <span className="text-danger-70 flex h-8 w-8 shrink-0 items-center justify-center">
                    <X size={18} strokeWidth={2.5} />
                  </span>
                )}
                <span
                  className={cn(
                    !feature.included &&
                      (plan.featured ? "text-white/60" : "text-muted"),
                  )}
                >
                  {feature.text}
                </span>
              </li>
            ))}
          </ul>
          <Button
            variant={plan.featured ? "secondary" : "default"}
            className={cn(
              plan.featured && "text-primary-70 bg-white hover:bg-white/90",
            )}
          >
            Choose {plan.name}
          </Button>
        </div>
      ))}
    </div>
  );
}