Pricing 1

"use client";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const plans = [
  {
    buttonText: "Get Started With Basic",
    buttonVariant: "dark" as const,
    description: "For simple desktop apps and solo developers.",
    featured: false,
    features: [
      { icon: Icons.gauge, label: "30 day", suffix: "build retention" },
      { icon: Icons.archive, label: "5,000", suffix: "downloads/month" },
      { icon: Icons.inbox, label: "", suffix: "Native module rebuilding" },
      { icon: Icons.shapes, label: "", suffix: "Build validation checks" },
    ],
    name: "Basic Plan",
    period: "/ Month",
    price: "₹999",
  },
  {
    buttonText: "Get Started With Premium",
    buttonVariant: "blue" as const,
    description: "For simple desktop apps and solo developers.",
    featured: true,
    features: [
      { icon: Icons.gauge, label: "30 day", suffix: "build retention" },
      { icon: Icons.archive, label: "5,000", suffix: "downloads/month" },
      { icon: Icons.inbox, label: "", suffix: "Native module rebuilding" },
      { icon: Icons.shapes, label: "", suffix: "Build validation checks" },
    ],
    name: "Pro Plan",
    period: "/ Month",
    price: "₹2499",
  },
  {
    buttonText: "Get Started With Platinum",
    buttonVariant: "dark" as const,
    description: "For simple desktop apps and solo developers.",
    featured: false,
    features: [
      { icon: Icons.gauge, label: "30 day", suffix: "build retention" },
      { icon: Icons.archive, label: "5,000", suffix: "downloads/month" },
      { icon: Icons.inbox, label: "", suffix: "Native module rebuilding" },
      { icon: Icons.shapes, label: "", suffix: "Build validation checks" },
    ],
    name: "Platinum Plan",
    period: "/ Month",
    price: "₹7500",
  },
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-white py-12 md:py-24 dark:bg-background">
      <div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-8">
        <div className="mb-16 flex flex-col items-center text-center">
          <Badge
            className="mb-6 border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
            variant="secondary"
          >
            <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
            Beam Our Pricing
          </Badge>

          <h1 className="relative mb-4 font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Beam Pricing Plans
            <svg
              className="absolute -top-2 -right-8 -z-10 w-24 text-neutral-200 dark:text-neutral-700"
              fill="currentColor"
              height="86"
              viewBox="0 0 108 86"
              width="108"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M38.8484 16.236L15 43.5793L78.2688 15L18.1218 71L93 34.1172L70.2047 65.2739"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="28"
              />
            </svg>
          </h1>

          <p className="max-w-xl text-neutral-600 dark:text-neutral-400">
            Lorem ipsum dolor sit amet consectetur adipiscing.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {plans.map((plan) => (
            <div
              className={`rounded-3xl p-1 ${
                plan.featured
                  ? "border-2 border-neutral-800 bg-neutral-900 dark:border-neutral-800 dark:bg-neutral-800"
                  : "border border-neutral-200 bg-gray-100 dark:border-neutral-800 dark:bg-neutral-900"
              }`}
              key={plan.name}
            >
              <div
                className={`rounded-3xl px-6 py-9 ${
                  plan.featured
                    ? "bg-neutral-700/85 dark:bg-neutral-900"
                    : "bg-white dark:bg-neutral-800"
                }`}
              >
                <h3
                  className={`mb-2 font-semibold text-xl ${
                    plan.featured
                      ? "text-white"
                      : "text-neutral-900 dark:text-neutral-100"
                  }`}
                >
                  {plan.name}
                </h3>
                <p
                  className={`w-2/3 tracking-tight ${
                    plan.featured
                      ? "text-neutral-400"
                      : "text-neutral-700 dark:text-neutral-400"
                  }`}
                >
                  {plan.description}
                </p>
              </div>

              <div
                className={`p-6 ${
                  plan.featured
                    ? "bg-neutral-900 dark:bg-neutral-800"
                    : "bg- dark:bg-neutral-900"
                }`}
              >
                <div className="mb-6 flex items-baseline">
                  <span
                    className={`font-semibold text-5xl tracking-tight ${
                      plan.featured
                        ? "text-white"
                        : "text-neutral-900 dark:text-neutral-100"
                    }`}
                  >
                    {plan.price}
                  </span>
                  <span
                    className={`ml-2 text-sm ${
                      plan.featured
                        ? "text-neutral-400"
                        : "text-neutral-600 dark:text-neutral-400"
                    }`}
                  >
                    {plan.period}
                  </span>
                </div>

                <Button
                  className={`w-full rounded-lg py-2 font-medium ${
                    plan.buttonVariant === "blue"
                      ? "bg-blue-600 text-white hover:bg-blue-700 dark:border-blue-600"
                      : "bg-neutral-900 text-white hover:bg-neutral-800 dark:border-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600"
                  }`}
                >
                  {plan.buttonText}
                </Button>
              </div>

              <div
                className={`rounded-b-3xl p-6 ${
                  plan.featured
                    ? "bg-neutral-900 dark:bg-neutral-800"
                    : "bg-gray-100 dark:bg-neutral-900"
                }`}
              >
                <p
                  className={`mb-4 font-medium text-xs uppercase tracking-wide ${
                    plan.featured
                      ? "text-neutral-500"
                      : "text-neutral-500 dark:text-neutral-500"
                  }`}
                >
                  WEEKLY SENDS
                </p>
                <div className="space-y-4">
                  {plan.features.map((feature, _index) => (
                    <div
                      className="flex items-center gap-3"
                      key={feature.label}
                    >
                      <feature.icon
                        className={`size-5 ${
                          plan.featured
                            ? "text-neutral-500"
                            : "text-neutral-500 dark:text-neutral-500"
                        }`}
                      />
                      <span
                        className={`text-sm ${
                          plan.featured
                            ? "text-white"
                            : "text-neutral-900 dark:text-neutral-100"
                        }`}
                      >
                        {feature.label && (
                          <span className="font-semibold">
                            {feature.label}{" "}
                          </span>
                        )}
                        {feature.suffix}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}