import * as React from "react";
import { cn } from "@/lib/utils";

const plans = [
  {
    id: "starter",
    name: "Starter",
    price: "$19",
    period: "/month",
    description: "For individuals and small projects.",
    highlight: false,
  },
  {
    id: "pro",
    name: "Pro",
    price: "$49",
    period: "/month",
    description: "For growing teams that need more power.",
    highlight: true,
    badge: "Most popular",
  },
  {
    id: "enterprise",
    name: "Enterprise",
    price: "Custom",
    period: "",
    description: "For large organizations with custom needs.",
    highlight: false,
  },
];

const features = [
  { name: "Unlimited projects", values: [true, true, true] },
  { name: "Team members", values: ["Up to 3", "Up to 20", "Unlimited"] },
  { name: "Storage", values: ["5 GB", "50 GB", "Unlimited"] },
  { name: "Custom domains", values: [false, true, true] },
  { name: "Analytics dashboard", values: [false, true, true] },
  { name: "API access", values: [false, true, true] },
  { name: "Priority support", values: [false, false, true] },
  { name: "Custom integrations", values: [false, false, true] },
  { name: "SLA guarantee", values: [false, false, true] },
];

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M5 12l5 5L20 7" />
    </svg>
  );
}

function CrossIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  );
}

function FeatureValue({ value }: { value: boolean | string }) {
  if (typeof value === "boolean") {
    return value ? (
      <CheckIcon className="h-5 w-5 text-primary" />
    ) : (
      <CrossIcon className="h-5 w-5 text-muted-foreground/50" />
    );
  }
  return <span className="text-sm font-medium text-foreground">{value}</span>;
}

export function PricingComparison() {
  return (
    <section className="relative overflow-hidden rounded-3xl border border-border bg-card px-6 py-14">
      {/* Background glow */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-10 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute -bottom-20 right-10 h-72 w-72 rounded-full bg-secondary/10 blur-3xl" />
      </div>

      <div className="relative space-y-10">
        {/* Header */}
        <div className="space-y-4 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-primary">
            Pricing
          </p>
          <h2 className="text-3xl font-semibold text-foreground md:text-4xl">
            Compare plans and features
          </h2>
          <p className="mx-auto max-w-2xl text-sm text-muted-foreground md:text-base">
            Choose the plan that best fits your needs. All plans include a
            14-day free trial with no credit card required.
          </p>
        </div>

        {/* Comparison table */}
        <div className="overflow-x-auto">
          <div className="min-w-[700px]">
            {/* Plan headers */}
            <div className="grid grid-cols-[1.5fr_repeat(3,1fr)] gap-3 pb-6">
              <div />
              {plans.map((plan) => (
                <div
                  key={plan.id}
                  className={cn(
                    "rounded-2xl border p-5 text-center transition-shadow",
                    plan.highlight
                      ? "border-primary/40 bg-primary/5 shadow-lg shadow-primary/10"
                      : "border-border bg-card/80"
                  )}
                >
                  {plan.badge && (
                    <span className="mb-2 inline-block rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground">
                      {plan.badge}
                    </span>
                  )}
                  <p
                    className={cn(
                      "text-lg font-semibold",
                      plan.highlight ? "text-primary" : "text-foreground"
                    )}
                  >
                    {plan.name}
                  </p>
                  <p className="mt-2">
                    <span className="text-3xl font-bold text-foreground">
                      {plan.price}
                    </span>
                    <span className="text-sm text-muted-foreground">
                      {plan.period}
                    </span>
                  </p>
                  <p className="mt-2 text-xs text-muted-foreground">
                    {plan.description}
                  </p>
                </div>
              ))}
            </div>

            {/* Feature rows */}
            <div className="space-y-2">
              {features.map((feature) => (
                <div
                  key={feature.name}
                  className="grid grid-cols-[1.5fr_repeat(3,1fr)] items-center gap-3 rounded-xl border border-border/60 bg-card/60 px-5 py-4"
                >
                  <span className="text-sm font-medium text-foreground">
                    {feature.name}
                  </span>
                  {feature.values.map((value, index) => (
                    <div
                      key={`${feature.name}-${index}`}
                      className="flex items-center justify-center"
                    >
                      <FeatureValue value={value} />
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Pricing Comparison

Preview

Compare plans and features

Installation
