import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/contexts/language-context";

export default function Pricing() {
  const {t} = useLanguage();
  const pricingTiers = [
    {
      name: t.pricingSection.plans.one.title,
      price: t.pricingSection.plans.one.price,
      period: "/year",
      description: t.pricingSection.plans.one.desc,
      features: [
        t.pricingSection.plans.one.features[0],
        t.pricingSection.plans.one.features[1],
        t.pricingSection.plans.one.features[2],
        t.pricingSection.plans.one.features[3],
        t.pricingSection.plans.one.features[4],
      ],
    },
    {
      name: t.pricingSection.plans.two.title,
      price: t.pricingSection.plans.two.price,
      period: "/year",
      description: t.pricingSection.plans.two.desc,
      
      features: [
        t.pricingSection.plans.two.features[0],
        t.pricingSection.plans.two.features[1],
        t.pricingSection.plans.two.features[2],
        t.pricingSection.plans.two.features[3],
        t.pricingSection.plans.two.features[4],
        t.pricingSection.plans.two.features[5]
      ],
    },
    {
      name: t.pricingSection.plans.three.title,
      price: t.pricingSection.plans.three.price,
      period: "per station/year",
      popular: true,
      description: t.pricingSection.plans.three.desc,
      features: [
        t.pricingSection.plans.three.features[0],
        t.pricingSection.plans.three.features[1],
        t.pricingSection.plans.three.features[2],
        t.pricingSection.plans.three.features[3],
        t.pricingSection.plans.three.features[4],
        t.pricingSection.plans.three.features[5],
        t.pricingSection.plans.three.features[6],
      ],
    },
  ];
  return (
    <section
      id="pricing"
      className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted"
    >
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12 md:mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            {t.pricingSection.title}
          </h2>
          <p className="text-lg text-muted-foreground">
            {t.pricingSection.subtitle}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {pricingTiers.map((tier, index) => (
            <div
              key={index}
              className={`relative rounded-xl border transition-all duration-300 ${
                tier.popular
                  ? "border-primary bg-background shadow-lg scale-105"
                  : "border-border bg-background hover:border-primary/50"
              }`}
            >
              {tier.popular && (
                <div className="absolute -top-4 left-0 right-0 flex justify-center">
                  <span className="bg-primary text-white text-sm font-semibold px-4 py-1 rounded-full">
                    {t.pricingSection.popular}
                  </span>
                </div>
              )}

              <div className="p-6">
                <h3 className="text-xl font-bold text-foreground mb-2">
                  {tier.name}
                </h3>
                <p className="text-muted-foreground text-sm mb-4">
                  {tier.description}
                </p>

                <div className="mb-6">
                  <span className="text-4xl font-bold text-foreground">
                    {tier.price}
                  </span>
                </div>

                <Button
                  className={`w-full mb-6 ${
                    tier.popular
                      ? "bg-primary hover:bg-primary/90"
                      : "border-primary text-primary hover:bg-primary/5"
                  }`}
                  variant={tier.popular ? "default" : "outline"}
                >
                  {t.pricingSection.started}
                </Button>

                <div className="space-y-3">
                  {tier.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center gap-3">
                      <Check size={20} className="text-primary shrink-0" />
                      <span className="text-foreground text-sm">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}