import Link from "next/link"
import { Check } from "lucide-react"
import { useTranslation } from "react-i18next"

export default function PricingSection() {
  const { t } = useTranslation()

  const packageLevels = [
    {
      id: "foundation",
      name: "Foundation",
      description: "Essential cognitive training for beginners",
      color: "from-blue-500 to-blue-600",
      textColor: "text-blue-600",
      borderColor: "border-blue-200",
      shadowColor: "shadow-blue-100",
      features: [
        "Core memory techniques",
        "Basic speed reading methods",
        "Fundamental mind mapping",
        "Weekly practice exercises",
        "Access to beginner resources",
      ],
    },
    {
      id: "accelerated",
      name: "Accelerated",
      description: "Advanced training for intermediate learners",
      color: "from-purple-500 to-purple-600",
      textColor: "text-purple-600",
      borderColor: "border-purple-200",
      shadowColor: "shadow-purple-100",
      features: [
        "Advanced memory palace techniques",
        "Intermediate speed reading methods",
        "Comprehensive mind mapping",
        "Bi-weekly coaching sessions",
        "Personalized learning path",
        "Progress tracking dashboard",
      ],
    },
    {
      id: "mastery",
      name: "Mastery",
      description: "Elite cognitive development for serious learners",
      color: "from-amber-500 to-amber-600",
      textColor: "text-amber-600",
      borderColor: "border-amber-200",
      shadowColor: "shadow-amber-100",
      features: [
        "Expert memory systems",
        "Advanced speed reading certification",
        "Complex information visualization",
        "Weekly 1-on-1 coaching",
        "Custom training program",
        "Exclusive mastermind group access",
        "Lifetime resource updates",
      ],
    },
  ]

  return (
    <section className="py-16 bg-gradient-to-b from-white to-gray-50">
      <div className="container">
        <div className="text-center mb-12">
          <div className="inline-flex items-center text-secondary mb-4">
            <span className="mr-2">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 8V16M8 12H16"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </span>
            <span className="uppercase font-medium tracking-wider">TRAINING PACKAGES</span>
          </div>

          <h2 className="text-4xl md:text-5xl font-bold mb-4 font-heading">
            Our Package <span className="text-primary">Levels</span>
          </h2>

          <p className="section-subtitle max-w-3xl mx-auto">
            Choose the perfect training level to enhance your mental capabilities and transform your learning
            experience. Each package is designed to develop specific cognitive skills at different proficiency levels.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {packageLevels.map((level) => (
            <div
              key={level.id}
              className={`bg-white rounded-lg overflow-hidden shadow-lg p-8 relative border ${level.borderColor} transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${level.shadowColor}`}
            >
              <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r ${level.color}"></div>

              <div className="mb-6">
                <h3 className={`text-2xl font-bold ${level.textColor} mb-2 font-heading`}>{level.name}</h3>
                <p className="text-gray-600">{level.description}</p>
              </div>

              <div className="space-y-4 mb-8">
                {level.features.map((feature, index) => (
                  <div key={index} className="flex items-start">
                    <Check className={`h-5 w-5 ${level.textColor} mr-2 mt-0.5 flex-shrink-0`} />
                    <span className="text-gray-700">{feature}</span>
                  </div>
                ))}
              </div>

              <Link
                href="/enroll"
                className={`block w-full py-3 px-4 text-center rounded-md font-medium transition-colors duration-200 bg-gradient-to-r ${level.color} text-white hover:opacity-90`}
              >
                Learn More
              </Link>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center">
          <p className="text-gray-600 mb-4">Not sure which package is right for you?</p>
          <Link href="/contact" className="inline-flex items-center text-primary font-medium hover:underline">
            Contact us for a personalized assessment
            <svg
              className="ml-2 w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </Link>
        </div>
      </div>
    </section>
  )
}