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-aiero-teal bg-aiero-card-dark" : "border-aiero-card-border bg-aiero-dark"
              } p-10`}
            >
              {plan.isPopular && (
                <div className="absolute right-6 top-6 rounded-full bg-aiero-teal px-4 py-1 text-[12px] font-bold uppercase text-aiero-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-aiero-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-aiero-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-aiero-teal text-aiero-dark hover:bg-white"
                      : "border border-aiero-card-border text-white hover:border-aiero-teal hover:text-aiero-teal"
                  }`}
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  Get started
                </a>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}
