KLC-Learners-Portal-Frontend-Figmamake/src/components/ProgrammeWizard.tsx

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { ChevronRight, RotateCcw, Wand2 } from "lucide-react";
import { navigateTo } from './Router';
 
const wizardSteps = [
  {
    id: 1,
    question: "What's your current role?",
    options: ["Individual Contributor", "Team Lead", "Manager", "Senior Manager", "Director", "VP/C-Level"]
  },
  {
    id: 2,
    question: "Which industry describes your organization?",
    options: ["Technology", "Financial Services", "Healthcare", "Manufacturing", "Consulting", "Other"]
  },
  {
    id: 3,
    question: "What's your primary development goal?",
    options: ["Strategic Thinking", "Team Leadership", "Communication", "Digital Transformation", "Innovation", "Change Management"]
  },
  {
    id: 4,
    question: "How much leadership experience do you have?",
    options: ["0-2 years", "3-5 years", "6-10 years", "10+ years"]
  }
];
 
export function ProgrammeWizard() {
  const [currentStep, setCurrentStep] = useState(0);
  const [answers, setAnswers] = useState<string[]>([]);
  const [isCompleted, setIsCompleted] = useState(false);
 
  const handleAnswer = (answer: string) => {
    const newAnswers = [...answers, answer];
    setAnswers(newAnswers);
 
    if (currentStep < wizardSteps.length - 1) {
      setCurrentStep(currentStep + 1);
    } else {
      setIsCompleted(true);
    }
  };
 
  const reset = () => {
    setCurrentStep(0);
    setAnswers([]);
    setIsCompleted(false);
  };
 
  const getRecommendation = () => {
    // Simple recommendation logic based on answers
    const [role, industry, goal, experience] = answers;
    if (goal === "Strategic Thinking" && experience === "10+ years") {
      return {
        title: "Strategic Leadership Mastery",
        reason: "Perfect for senior leaders focused on strategic thinking",
        slug: "strategic-leadership"
      };
    } else if (goal === "Communication") {
      return {
        title: "Executive Leadership Program",
        reason: "Ideal for developing communication and executive presence",
        slug: "exec-leadership-program"
      };
    } else if (role === "Individual Contributor" || role === "Team Lead") {
      return {
        title: "Emerging Leaders Program",
        reason: "Great foundation for emerging leaders",
        slug: "emerging-leaders"
      };
    } else if (goal === "Innovation" || goal === "Digital Transformation") {
      return {
        title: "Innovation Leadership",
        reason: "Perfect for driving innovation and digital transformation",
        slug: "innovation-leadership"
      };
    } else {
      return {
        title: "Team Leadership Intensive",
        reason: "Comprehensive programme for effective team leadership",
        slug: "team-leadership-intensive"
      };
    }
  };
 
  if (isCompleted) {
    const recommendation = getRecommendation();
    return (
      <Card className="bg-primary/5 border-primary">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-foreground">
            <Wand2 className="w-5 h-5 text-primary" />
            Your Recommended Programme
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-white p-6 rounded-lg border shadow-sm">
            <h3 className="text-xl text-foreground mb-2">{recommendation.title}</h3>
            <p className="text-muted-foreground mb-6">{recommendation.reason}</p>
            <div className="flex flex-col sm:flex-row gap-3">
              <Button 
                className="bg-primary hover:bg-primary/90 text-primary-foreground"
                onClick={() => navigateTo(`/programme/${recommendation.slug}`)}
              >
                View Programme Details
              </Button>
              <Button variant="outline" onClick={reset}>
                <RotateCcw className="w-4 h-4 mr-2" />
                Try Again
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }
 
  return (
    <Card className="bg-white border border-primary/20 shadow-lg">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-foreground">
          <Wand2 className="w-5 h-5 text-primary" />
          Need Help Choosing?
        </CardTitle>
        <div className="flex gap-1 mt-4">
          {wizardSteps.map((_, index) => (
            <div
              key={index}
              className={`h-2 flex-1 rounded ${
                index <= currentStep ? "bg-primary" : "bg-secondary/30"
              }`}
            />
          ))}
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        <div>
          <h3 className="text-lg mb-6 text-foreground">
            {wizardSteps[currentStep].question}
          </h3>
          <div className="grid grid-cols-1 gap-3">
            {wizardSteps[currentStep].options.map((option) => (
              <Button
                key={option}
                variant="outline"
                className="justify-between hover:bg-primary hover:text-primary-foreground hover:border-primary text-left p-4 h-auto"
                onClick={() => handleAnswer(option)}
              >
                <span>{option}</span>
                <ChevronRight className="w-4 h-4 flex-shrink-0" />
              </Button>
            ))}
          </div>
        </div>
        {answers.length > 0 && (
          <div>
            <p className="text-sm text-muted-foreground mb-3">Your answers:</p>
            <div className="flex flex-wrap gap-2">
              {answers.map((answer, index) => (
                <Badge key={index} variant="secondary" className="bg-primary/10 text-foreground">
                  {answer}
                </Badge>
              ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}