"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Brain, Map, Gamepad2, Briefcase, Trophy, Rocket } from "lucide-react";

const solutions = [
  { title: "AI-based Skill Discovery", description: "Personalized assessment to find your true potential.", icon: Brain },
  { title: "Personalized Skill Roadmap", description: "A step-by-step guide tailored to your goals.", icon: Map },
  { title: "Gamified Learning", description: "Engaging content that feels like playing a game.", icon: Gamepad2 },
  { title: "Practical Tasks + Projects", description: "Learn by doing with real-world industry projects.", icon: Rocket },
  { title: "Rewards & Motivation", description: "Earn points and badges as you master new skills.", icon: Trophy },
  { title: "Career Preparation", description: "Get ready for jobs, freelancing, or business.", icon: Briefcase },
];

export function SolutionSection() {
  return (
    <section className="py-20">
      <Container>
        <div className="text-center mb-16">
          <Heading className="text-3xl md:text-4xl">Our Solution: The Core Vision</Heading>
          <div className="mt-6 flex flex-wrap justify-center gap-4">
            <span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">Gamified Learning</span>
            <span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">AI Roadmap</span>
            <span className="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">Reward Points</span>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {solutions.map((item, index) => (
            <Card key={index} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <item.icon className="w-6 h-6 text-primary" />
                </div>
                <CardTitle>{item.title}</CardTitle>
                <CardDescription>{item.description}</CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}