import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";

export function PricingSection() {
  const plans = [
    {
      name: "Basic",
      target: "Great for private individuals",
      features: [
        "1 User",
        "Unlimited Projects",
        "Download prototypes",
        "1 Gb workspace",
      ],
      price: "Free",
      isPopular: false,
    },
    {
      name: "Premium",
      target: "14 days free period",
      features: [
        "15 Users",
        "Unlimited Projects",
        "Download prototypes",
        "15 Gb workspace",
      ],
      price: "$ 59 /mo",
      isPopular: true,
    },
    {
      name: "Unlimited",
      target: "Great for private individuals",
      features: [
        "100 Users",
        "Unlimited Projects",
        "Download prototypes",
        "100 Gb workspace",
      ],
      price: "$ 199 /mo",
      isPopular: false,
    },
  ];

  return (
    <SectionContainer paddingY="lg">
      <PageContainer>
        <div className="mb-16 flex flex-col items-center justify-center text-center">
          <SectionHeading
            tag="pricing"
            title="Choose the plan that fits your needs"
            titleClassName="text-white max-w-[500px] text-center"
          />
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {plans.map((plan, i) => (
            <div
              key={i}
              className={`relative flex flex-col overflow-hidden rounded-[25px] border ${
                plan.isPopular
                  ? "border-tenext-teal bg-tenext-card-dark"
                  : "border-tenext-card-border bg-tenext-dark"
              } p-10`}
            >
              {plan.isPopular && (
                <div
                  className="absolute right-6 top-6 rounded-full bg-tenext-teal px-4 py-1 text-[12px] font-bold uppercase text-tenext-dark"
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  Popular
                </div>
              )}
              <h3
                className="mb-2 text-[24px] font-bold text-white"
                style={{ fontFamily: "var(--font-dm-sans)" }}
              >
                {plan.name}
              </h3>
              <p className="mb-8 text-[14px] text-tenext-text-muted">
                {plan.target}
              </p>

              <ul className="mb-10 flex flex-col gap-4">
                {plan.features.map((feat, j) => (
                  <li key={j} className="flex items-center gap-3 text-white">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      className="text-tenext-teal"
                    >
                      <path
                        d="M20 6L9 17l-5-5"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    {feat}
                  </li>
                ))}
              </ul>

              <div className="mt-auto">
                <div
                  className="mb-6 text-[36px] font-bold text-white"
                  style={{ fontFamily: "var(--font-dm-sans)" }}
                >
                  {plan.price}
                </div>
                <a
                  href="#"
                  className={`flex w-full items-center justify-center rounded-[12px] py-4 text-[16px] font-bold transition-all ${
                    plan.isPopular
                      ? "bg-tenext-teal text-tenext-dark hover:bg-white"
                      : "border border-tenext-card-border text-white hover:border-tenext-teal hover:text-tenext-teal"
                  }`}
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  Get started
                </a>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}