import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { CheckCircle2, Sparkles, Target, Gamepad2, Trophy, Briefcase } from "lucide-react";

const solutions = [
  {
    title: "AI-based Skill Discovery",
    icon: <Sparkles className="h-6 w-6 text-blue-500" />,
    description: "Personalized assessment to find your natural strengths.",
  },
  {
    title: "Personalized Roadmap",
    icon: <Target className="h-6 w-6 text-indigo-500" />,
    description: "A step-by-step path tailored to your specific career goals.",
  },
  {
    title: "Gamified Learning",
    icon: <Gamepad2 className="h-6 w-6 text-purple-500" />,
    description: "Engaging experience that keeps you motivated to finish.",
  },
  {
    title: "Practical Projects",
    icon: <CheckCircle2 className="h-6 w-6 text-green-500" />,
    description: "Learn by doing with real-world tasks and industry projects.",
  },
  {
    title: "Rewards & Motivation",
    icon: <Trophy className="h-6 w-6 text-yellow-500" />,
    description: "Earn points and badges as you master new skills.",
  },
  {
    title: "Career Preparation",
    icon: <Briefcase className="h-6 w-6 text-orange-500" />,
    description: "Get ready for the job market with interview prep and portfolios.",
  },
];

export function SolutionSection() {
  return (
    <section className="py-20">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading level="h2" className="text-3xl md:text-4xl">Our Solution: The Core Vision</Heading>
          <Subheading className="mt-4">
            A holistic platform that solves career confusion and skill gaps simultaneously.
          </Subheading>
        </div>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {solutions.map((solution, index) => (
            <div key={index} className="p-6 rounded-2xl border border-neutral-100 hover:border-blue-100 hover:bg-blue-50/30 transition-all group">
              <div className="mb-4 p-3 rounded-xl bg-neutral-50 group-hover:bg-white w-fit transition-colors">
                {solution.icon}
              </div>
              <h3 className="text-xl font-semibold mb-2">{solution.title}</h3>
              <p className="text-neutral-600">{solution.description}</p>
            </div>
          ))}
        </div>
        
        <div className="mt-16 p-8 rounded-3xl bg-blue-600 text-white text-center">
          <h3 className="text-2xl font-bold mb-4">Our Unique Selling Proposition (USP)</h3>
          <div className="flex flex-wrap justify-center gap-6 md:gap-12">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5" />
              <span>Gamified Learning</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5" />
              <span>AI-Personalized Roadmaps</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5" />
              <span>Reward Points</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5" />
              <span>Real-life Mastery</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}