"use client";

import { useTranslations } from "next-intl";
import SectionBadge from "@/components/shared/SectionBadge/Index";
import PricingCard from "./PricingCard";

export default function PricingPackagesSection() {
  const t = useTranslations("pricingPackages");

  const basicPlanFeatures = t.raw("plans.basic.features") as string[];
  const standardPlanFeatures = t.raw("plans.standard.features") as string[];
  const masterPlanFeatures = t.raw("plans.master.features") as string[];

  return (
    <section id="pricing" className="flex flex-col justify-center items-center p-4 sm:p-6 md:p-10 lg:p-16 xl:pt-20 scroll-mt-24 md:scroll-mt-28">
      <SectionBadge text={t("badge")} variant="primary" />
      <h1 className="text-primary-main text-[24px] md:text-[40px] font-bold mb-10 md:mb-20">
        {t("title")}
      </h1>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 w-full max-w-7xl">
        <PricingCard
          title={t("plans.basic.title")}
          price="200"
          pricePeriod={t("month")}
          features={basicPlanFeatures}
          variant="default"
          buttonVariant="primary"
        />
        <PricingCard
          title={t("plans.standard.title")}
          price="500"
          features={standardPlanFeatures}
          variant="featured"
          buttonVariant="radial-gradient-white"
          featured={true}
        />
        <PricingCard
          title={t("plans.master.title")}
          price="700"
          pricePeriod={t("month")}
          features={masterPlanFeatures}
          variant="default"
          buttonVariant="primary"
        />
      </div>
    </section>
  );
}