"use client";
import { motion } from "framer-motion";
import SectionContainer from "../shared/SectionContainer";
import FeatureCard from "../shared/FeatureCard";
import { UI, type Lang } from "@/lib/config";

export default function PackagesSection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;

  const packages = [
    {
      icon: "🦷",
      title: t.healthcarePackage1Title,
      description: t.healthcarePackage1Desc,
      gradient: "from-blue-50 to-cyan-50",
    },
    {
      icon: "💪",
      title: t.healthcarePackage2Title,
      description: t.healthcarePackage2Desc,
      gradient: "from-purple-50 to-pink-50",
    },
    {
      icon: "⭐",
      title: t.healthcarePackage3Title,
      description: t.healthcarePackage3Desc,
      gradient: "from-amber-50 to-orange-50",
    },
  ];

  return (
    <SectionContainer
      title={t.healthcarePackagesTitle}
      subtitle={t.healthcarePackagesSubtitle}
      background="gray"
    >
      <div className="grid md:grid-cols-3 gap-6 mb-8">
        {packages.map((pkg, index) => (
          <FeatureCard
            key={pkg.title}
            icon={pkg.icon}
            title={pkg.title}
            description={pkg.description}
            gradient={pkg.gradient}
            delay={index * 0.15}
          />
        ))}
      </div>

      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="text-center"
      >
        <p className="text-brand-green font-semibold text-lg">
          {t.healthcarePackageSavings}
        </p>
      </motion.div>
    </SectionContainer>
  );
}