check this code "import React, { useState, useEffect } from 'react';
import { Clock, CheckCircle2, XCircle, HelpCircle, ChevronRight, AlertCircle, BookOpen, Calendar, ArrowRight, Menu, Award, BarChart3, Timer, Brain } from 'lucide-react';

// Types
interface Question {
  word: string;
  question: string;
  options: string[];
  correct: string;
}

interface VocabItem {
  word: string;
  synonyms: string[];
}

interface QuizAnalysis {
  totalQuestions: number;
  correctAnswers: number;
  incorrectAnswers: number;
  unattempted: number;
  score: number;
  accuracy: number;
  timeSpent: number;
}

const day1VocabList: VocabItem[] = [
  { word: "Abrogate", synonyms: ["cancel", "repeal", "revoke", "rescind", "repudiate", "annul", "nullify", "invalidate", "negate", "exterminate", "quash"] },
  { word: "Adulation", synonyms: ["flattery", "coax", "cajolery", "bootlicking", "wheedle", "obsequiousness", "sycophancy"] },
  { word: "Amicable", synonyms: ["friendly", "gregarious", "amiable", "affable", "courteous", "genial", "polite", "harmonious", "cordial"] },
  { word: "Ablution", synonyms: ["religious washing", "cleansing", "purification", "purgation", "baptism"] },
  { word: "Assertive", synonyms: ["domineering", "authoritative", "forceful", "aggressive", "commanding", "pushy"] },
  { word: "Alert", synonyms: ["watchful", "cautious", "careful", "meticulous", "vigilant", "attentive", "observant"] },
  { word: "Accede", synonyms: ["consent", "agree", "approve", "accept", "comply", "concede", "yield", "acquiesce"] },
  { word: "Acumen", synonyms: ["expertise", "adroit", "dextrous", "affichado", "maestro", "doyen", "perspicuity", "shrewdness"] },
  { word: "Accused", synonyms: ["indicted", "impeached", "charged", "arraigned", "prosecuted"] },
  { word: "Avarice", synonyms: ["greed", "cupidity", "voracity", "covetousness", "rapacious", "avid", "grasping"] },
  { word: "August", synonyms: ["majestic", "regal", "grand", "kingly", "courtly", "dignified", "stately", "noble"] },
  { word: "Apposite", synonyms: ["appropriate", "apt", "related", "relevant", "pertained", "germane", "suitable", "fitting"] },
  { word: "Accoutrement", synonyms: ["equipment", "tools", "paraphernalia", "apparatus", "gear", "tackle", "kit"] },
  { word: "Antipathy", synonyms: ["dislike", "disdain", "detestation", "abomination", "abhorrence", "loathsome", "aversion", "anathema", "hatred", "repugnance"] },
  { word: "Abysmal", synonyms: ["bottomless", "depthless", "immeasurable", "unfathomable", "terrible", "dreadful"] },
  { word: "Artful", synonyms: ["cunning", "sly", "canny", "crafty", "wily", "scheming", "foxlike", "vulpine", "clever", "shrewd", "insidious"] },
  { word: "Ancestors", synonyms: ["forefathers", "forebears", "progenitors", "predecessors", "antecedents"] },
  { word: "Appraise", synonyms: ["judge", "evaluate", "assess", "estimate", "value", "rate", "gauge"] },
  { word: "Accrue", synonyms: ["gather", "accumulate", "assimilate", "store", "hoard", "pileup", "amass", "stock"] },
  { word: "Audacious", synonyms: ["bold", "temerity", "heroic", "candid", "fearless", "brave", "daring", "intrepid"] },
  { word: "Affluence", synonyms: ["richness", "prosperity", "opulence", "wealth", "abundance", "plenty"] },
  { word: "Abstain", synonyms: ["refrain", "avoid", "forbear", "desist", "hold back", "withhold"] },
  { word: "Aversion", synonyms: ["dislike", "hatred", "repugnance", "antipathy", "disgust", "loathing"] },
  { word: "Autocratic", synonyms: ["dictatorial", "authoritarian", "tyrannical", "despotic", "oppressive", "domineering"] },
  { word: "Atrocity", synonyms: ["violence", "brutality", "barbarity", "heinousness", "outrage", "horror"] },
  { word: "Appear", synonyms: ["seem", "look", "emerge", "surface", "manifest", "show"] },
  { word: "Abuse", synonyms: ["scorn", "insult", "despise", "debase", "affront", "maltreat", "mistreat"] },
  { word: "Adorn", synonyms: ["beautify", "decorate", "garnish", "embellish", "ornate", "deck", "enhance"] },
  { word: "Abundant", synonyms: ["plentiful", "dime-a-dozen", "copious", "plethora", "lush", "bountiful", "ample"] },
  { word: "Anticipate", synonyms: ["hope", "expect", "foresee", "await", "predict", "forecast"] },
  { word: "Adverse", synonyms: ["unfavorable", "hostile", "detrimental", "harmful", "negative", "inimical"] },
  { word: "Apex", synonyms: ["top", "pinnacle", "acme", "supreme", "summit", "zenith", "culmination", "apotheosis", "paramount", "apogee"] },
  { word: "Inform", synonyms: ["notify", "tell", "advise", "apprise", "brief", "enlighten"] },
  { word: "Absurd", synonyms: ["ridiculous", "preposterous", "nonsensical", "ludicrous", "foolish", "silly"] },
  { word: "Adversity", synonyms: ["misfortune", "mishap", "tragedy", "calamity", "sufferings", "hardships", "affliction"] },
  { word: "Antagonist", synonyms: ["opponent", "rival", "contender", "adversary", "competitor", "foe"] },
  { word: "Absolve", synonyms: ["exonerate", "acquit", "exculpate", "clear", "pardon", "forgive"] },
  { word: "Ascription", synonyms: ["attribution", "assignment", "imputation", "credit", "acknowledgment"] },
  { word: "Advocate", synonyms: ["support", "encourage", "promote", "champion", "back", "endorse"] },
  { word: "Affection", synonyms: ["liking", "fondness", "admiration", "propensity", "penchant", "affinity"] },
  { word: "Affectation", synonyms: ["show off", "sham", "flaunt", "ostentation", "hypocrisy", "pretension"] },
  { word: "Assuage", synonyms: ["pacify", "placate", "alleviate", "mitigate", "appease", "mollify", "propitiate", "tranquilize"] },
  { word: "Adamant", synonyms: ["obdurate", "stubborn", "obstinate", "pig-headed", "mulish", "perverse", "intransigent", "refractory"] },
  { word: "Arable", synonyms: ["fertile", "cultivable", "productive", "fruitful", "rich"] },
  { word: "Acerbic", synonyms: ["bitter", "acrid", "acrimonious", "vitriolic", "acidic", "sarcastic"] },
  { word: "Affable", synonyms: ["friendly", "genial", "amiable", "cordial", "sociable", "gracious"] },
  { word: "Benevolent", synonyms: ["kind", "generous", "altruistic", "philanthropic", "compassionate", "gracious"] },
  { word: "Blister", synonyms: ["wound", "sore", "lesion", "blain", "vesicle"] },
  { word: "Battered", synonyms: ["destroyed", "damaged", "beaten", "worn", "bruised"] },
  { word: "Baleful", synonyms: ["harmful", "detrimental", "parlous", "perilous", "menacing", "jeopardy", "deleterious", "hazardous", "lethal", "noxious", "noisome"] }
];

const day2VocabList: VocabItem[] = [
  { word: "Bondage", synonyms: ["Captivity", "Serfdom", "Imprisonment", "Confinement"] },
  { word: "Blaze", synonyms: ["Fire", "Flame", "Inferno"] },
  { word: "Boast", synonyms: ["Brag", "Swagger", "Egotist", "Exaggerate"] },
  { word: "Benediction", synonyms: ["Blessing", "Benison", "Approval"] },
  { word: "Barren", synonyms: ["Infertile", "Sterile", "Arid", "Futile"] },
  { word: "Benefactor", synonyms: ["Helper", "Patron", "Supporter"] },
  { word: "Bliss", synonyms: ["Happiness", "Ecstasy", "Euphoria"] },
  { word: "Bucolic", synonyms: ["Rustic", "Rural", "Pastoral"] },
  { word: "Behaviour", synonyms: ["Conduct", "Decorum", "Demeanor"] },
  { word: "Barbaric", synonyms: ["Savage", "Uncivilized", "Brutal"] },
  { word: "Brutalize", synonyms: ["Coarsen", "Dehumanize", "Mistreat"] },
  { word: "Board", synonyms: ["Wooden plank", "Food", "Provision"] },
  { word: "Bane", synonyms: ["Curse", "Threat", "Scourge"] },
  { word: "Beckoned", synonyms: ["Called", "Summoned", "Gestured"] },
  { word: "Bifurcated", synonyms: ["Divided", "Split", "Branched"] },
  { word: "Boisterous", synonyms: ["Noisy", "Clamorous", "Unruly"] },
  { word: "Brisk", synonyms: ["Quick", "Lively", "Energetic"] },
  { word: "Blunder", synonyms: ["Mistake", "Error", "Gaffe"] },
  { word: "Baffle", synonyms: ["Confuse", "Bewilder", "Perplex"] },
  { word: "Belligerent", synonyms: ["Hostile", "Aggressive", "Pugnacious"] },
  { word: "Bashful", synonyms: ["Shy", "Timid", "Coy"] },
  { word: "Brittle", synonyms: ["Fragile", "Delicate", "Frail"] },
  { word: "Brutal", synonyms: ["Savage", "Cruel", "Harsh"] },
  { word: "Badger", synonyms: ["Pester", "Annoy", "Heckle"] },
  { word: "Burgeon", synonyms: ["Grow", "Expand", "Flourish"] },
  { word: "Buoyant", synonyms: ["Cheerful", "Optimistic", "Lighthearted"] },
  { word: "Bizarre", synonyms: ["Strange", "Weird", "Peculiar"] },
  { word: "Beseech", synonyms: ["Beg", "Plead", "Implore"] },
  { word: "Banal", synonyms: ["Clichéd", "Trite", "Hackneyed"] },
  { word: "Blithe", synonyms: ["Carefree", "Cheerful", "Lighthearted"] },
  { word: "Blandishment", synonyms: ["Flattery", "Sweet talk", "Cajolery"] },
  { word: "Banter", synonyms: ["Teasing", "Joking", "Repartee"] },
  { word: "Benison", synonyms: ["Blessing", "Benediction", "Approval"] },
  { word: "Bigoted", synonyms: ["Intolerant", "Prejudiced", "Narrow-minded"] },
  { word: "Brash", synonyms: ["Rude", "Impulsive", "Reckless"] },
  { word: "Babble", synonyms: ["Chatter", "Prattle", "Gabble"] },
  { word: "Bawdy", synonyms: ["Indecent", "Ribald", "Lewd"] },
  { word: "Brevity", synonyms: ["Conciseness", "Briefness", "Succinctness"] },
  { word: "Brazen", synonyms: ["Bold", "Shameless", "Audacious"] },
  { word: "Bumptious", synonyms: ["Arrogant", "Self-assertive", "Overconfident"] },
  { word: "Bewail", synonyms: ["Lament", "Mourn", "Bemoan"] },
  { word: "Beguile", synonyms: ["Deceive", "Charm", "Enchant"] },
  { word: "Belittle", synonyms: ["Disparage", "Demean", "Undermine"] },
  { word: "Browbeat", synonyms: ["Bully", "Intimidate", "Coerce"] },
  { word: "Covenant", synonyms: ["Agreement", "Pact", "Contract"] },
  { word: "Colossal", synonyms: ["Enormous", "Gigantic", "Mammoth"] },
  { word: "Censure", synonyms: ["Criticize", "Condemn", "Denounce"] },
  { word: "Contemplation", synonyms: ["Meditation", "Reflection", "Pondering"] },
  { word: "Coherent", synonyms: ["Logical", "Consistent", "Clear"] },
  { word: "Commotion", synonyms: ["Uproar", "Disturbance", "Turmoil"] }
];

function App() {
  const [view, setView] = useState<'home' | 'instructions' | 'quiz' | 'analysis'>('home');
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [correctCount, setCorrectCount] = useState(0);
  const [incorrectCount, setIncorrectCount] = useState(0);
  const [timeLeft, setTimeLeft] = useState(600); // 10 minutes
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
  const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
  const [questionStatus, setQuestionStatus] = useState<string[]>([]);
  const [questions, setQuestions] = useState<Question[]>([]);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [selectedDay, setSelectedDay] = useState<1 | 2 | 'full'>(1);
  const [startTime, setStartTime] = useState<number>(0);
  const [quizAnalysis, setQuizAnalysis] = useState<QuizAnalysis | null>(null);

  // Initialize questions
  useEffect(() => {
    if (view === 'quiz') {
      let currentVocabList: VocabItem[];
      if (selectedDay === 'full') {
        currentVocabList = [...day1VocabList, ...day2VocabList];
      } else {
        currentVocabList = selectedDay === 1 ? day1VocabList : day2VocabList;
      }
      
      const allSynonyms = currentVocabList.reduce((acc, item) => acc.concat(item.synonyms), []);
      
      const generateQuestions = () => {
        return currentVocabList.map(item => {
          const correct = item.synonyms[Math.floor(Math.random() * item.synonyms.length)];
          const distractorPool = allSynonyms.filter(syn => !item.synonyms.includes(syn));
          const distractors = shuffle(distractorPool.slice()).slice(0, 3);
          const options = shuffle([correct, ...distractors]);
          return {
            word: item.word,
            question: `Which of the following is a synonym for "${item.word}"?`,
            options,
            correct
          };
        });
      };

      const shuffledQuestions = shuffle(generateQuestions());
      setQuestions(shuffledQuestions);
      setQuestionStatus(new Array(shuffledQuestions.length).fill('Unattempted'));
      setStartTime(Date.now());
    }
  }, [view, selectedDay]);

  // Timer
  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (view === 'quiz' && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prev) => {
          if (prev <= 1) {
            clearInterval(timer);
            handleQuizComplete();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [view, timeLeft]);

  // Utility function to shuffle array
  function shuffle<T>(array: T[]): T[] {
    const newArray = [...array];
    for (let i = newArray.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
    }
    return newArray;
  }

  const handleSubmit = () => {
    if (!selectedAnswer) {
      alert('Please select an answer');
      return;
    }

    const currentQuestion = questions[currentQuestionIndex];
    const isCorrect = selectedAnswer === currentQuestion.correct;

    setScore((prev) => prev + (isCorrect ? 2 : -0.5));
    setCorrectCount((prev) => prev + (isCorrect ? 1 : 0));
    setIncorrectCount((prev) => prev + (isCorrect ? 0 : 1));

    const newStatus = [...questionStatus];
    newStatus[currentQuestionIndex] = isCorrect ? 'Correct' : 'Incorrect';
    setQuestionStatus(newStatus);

    setIsAnswerSubmitted(true);
  };

  const handleNext = () => {
    setCurrentQuestionIndex((prev) => prev + 1);
    setSelectedAnswer(null);
    setIsAnswerSubmitted(false);
  };

  const handleQuizComplete = () => {
    const timeSpent = Math.floor((Date.now() - startTime) / 1000);
    const analysis: QuizAnalysis = {
      totalQuestions: questions.length,
      correctAnswers: correctCount,
      incorrectAnswers: incorrectCount,
      unattempted: questions.length - (correctCount + incorrectCount),
      score,
      accuracy: (correctCount / (correctCount + incorrectCount)) * 100 || 0,
      timeSpent
    };
    setQuizAnalysis(analysis);
    setView('analysis');
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const startQuiz = () => {
    setView('quiz');
    setTimeLeft(600);
    setScore(0);
    setCorrectCount(0);
    setIncorrectCount(0);
    setCurrentQuestionIndex(0);
    setQuizAnalysis(null);
  };

  if (view === 'home') {
    return (
      <div className="min-h-screen bg-gray-50 p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-8">SSC CGL Vocabulary Quiz Series</h1>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-blue-500">
              <div className="flex items-center mb-4">
                <Calendar className="w-6 h-6 text-blue-600 mr-2" />
                <h2 className="text-xl font-semibold">Day 1 Quiz</h2>
              </div>
              <p className="text-gray-600 mb-4">Master essential vocabulary with our comprehensive Day 1 quiz covering 50 important words.</p>
              <button
                onClick={() => {
                  setSelectedDay(1);
                  setView('instructions');
                }}
                className="w-full bg-blue-600 text-white rounded-lg py-2 px-4 flex items-center justify-center hover:bg-blue-700 transition-colors"
              >
                Start Quiz <ArrowRight className="w-4 h-4 ml-2" />
              </button>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-blue-500">
              <div className="flex items-center mb-4">
                <Calendar className="w-6 h-6 text-blue-600 mr-2" />
                <h2 className="text-xl font-semibold">Day 2 Quiz</h2>
              </div>
              <p className="text-gray-600 mb-4">Continue your vocabulary journey with Day 2 covering 50 new essential words.</p>
              <button
                onClick={() => {
                  setSelectedDay(2);
                  setView('instructions');
                }}
                className="w-full bg-blue-600 text-white rounded-lg py-2 px-4 flex items-center justify-center hover:bg-blue-700 transition-colors"
              >
                Start Quiz <ArrowRight className="w-4 h-4 ml-2" />
              </button>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-purple-500">
              <div className="flex items-center mb-4">
                <Brain className="w-6 h-6 text-purple-600 mr-2" />
                <h2 className="text-xl font-semibold">Full Vocabulary Quiz</h2>
              </div>
              <p className="text-gray-600 mb-4">Challenge yourself with a comprehensive quiz covering all vocabulary words from Day 1 and Day 2.</p>
              <button
                onClick={() => {
                  setSelectedDay('full');
                  setView('instructions');
                }}
                className="w-full bg-purple-600 text-white rounded-lg py-2 px-4 flex items-center justify-center hover:bg-purple-700 transition-colors"
              >
                Start Full Quiz <ArrowRight className="w-4 h-4 ml-2" />
              </button>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6 border-2 border-gray-200">
              <div className="flex items-center mb-4">
                <Calendar className="w-6 h-6 text-gray-400 mr-2" />
                <h2 className="text-xl font-semibold text-gray-400">Day 3 Quiz (Coming Soon)</h2>
              </div>
              <p className="text-gray-400 mb-4">The next set of vocabulary words will be available soon.</p>
              <button
                disabled
                className="w-full bg-gray-100 text-gray-400 rounded-lg py-2 px-4 cursor-not-allowed"
              >
                Coming Soon
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (view === 'instructions') {
    return (
      <div className="min-h-screen bg-gray-50 p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow-sm p-6 md:p-8">
            <div className="flex items-center mb-6">
              <BookOpen className="w-8 h-8 text-blue-600 mr-3" />
              <h1 className="text-2xl md:text-3xl font-bold">
                {selectedDay === 'full' ? 'Full Vocabulary Quiz' : `Day ${selectedDay} Quiz`} Instructions
              </h1>
            </div>

            <div className="space-y-4 text-gray-700 mb-8">
              <p className="font-semibold text-xl text-gray-800">Important Guidelines:</p>
              <ul className="list-disc pl-5 space-y-2">
                <li>
                  {selectedDay === 'full'
                    ? 'This quiz contains questions from all available vocabulary words'
                    : `The quiz contains questions from Day ${selectedDay} vocabulary words`}
                </li>
                <li>Total duration: 10 minutes</li>
                <li>Each correct answer: +2 marks</li>
                <li>Each incorrect answer: -0.5 marks</li>
                <li>Questions must be attempted sequentially</li>
                <li>You can submit the quiz at any time</li>
                <li>The quiz will auto-submit when the time is up</li>
              </ul>
            </div>

            <div className="flex space-x-4">
              <button
                onClick={() => setView('home')}
                className="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Back to Home
              </button>
              <button
                onClick={startQuiz}
                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
              >
                Start Quiz Now <ArrowRight className="w-5 h-5 ml-2" />
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (view === 'analysis') {
    return (
      <div className="min-h-screen bg-gray-50 p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-lg shadow-sm p-6 md:p-8">
            <div className="flex items-center mb-6">
              <Award className="w-8 h-8 text-blue-600 mr-3" />
              <h1 className="text-2xl md:text-3xl font-bold">Quiz Analysis</h1>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
              <div className="bg-blue-50 rounded-lg p-6">
                <h2 className="text-xl font-semibold mb-4 text-blue-800">Score Overview</h2>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Total Score:</span>
                    <span className="text-2xl font-bold text-blue-600">{quizAnalysis?.score}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Accuracy:</span>
                    <span className="text-lg font-semibold text-blue-600">
                      {quizAnalysis?.accuracy.toFixed(1)}%
                    </span>
                  </div>
                </div>
              </div>

              <div className="bg-purple-50 rounded-lg p-6">
                <h2 className="text-xl font-semibold mb-4 text-purple-800">Time Analysis</h2>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Time Spent:</span>
                    <span className="text-lg font-semibold text-purple-600">
                      {formatTime(quizAnalysis?.timeSpent || 0)}
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Avg. Time per Question:</span>
                    <span className="text-lg font-semibold text-purple-600">
                      {((quizAnalysis?.timeSpent || 0) / (quizAnalysis?.totalQuestions || 1)).toFixed(1)}s
                    </span>
                  </div>
                </div>
              </div>

              <div className="bg-green-50 rounded-lg p-6">
                <h2 className="text-xl font-semibold mb-4 text-green-800">Question Analysis</h2>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Total Questions:</span>
                    <span className="text-lg font-semibold text-green-600">{quizAnalysis?.totalQuestions}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Correct Answers:</span>
                    <span className="text-lg font-semibold text-green-600">{quizAnalysis?.correctAnswers}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Incorrect Answers:</span>
                    <span className="text-lg font-semibold text-red-600">{quizAnalysis?.incorrectAnswers}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Unattempted:</span>
                    <span className="text-lg font-semibold text-gray-600">{quizAnalysis?.unattempted}</span>
                  </div>
                </div>
              </div>

              <div className="bg-yellow-50 rounded-lg p-6">
                <h2 className="text-xl font-semibold mb-4 text-yellow-800">Performance Metrics</h2>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Attempt Rate:</span>
                    <span className="text-lg font-semibold text-yellow-600">
                      {(((quizAnalysis?.totalQuestions || 0) - (qu izAnalysis?.unattempted || 0)) / (quizAnalysis?.totalQuestions || 1) * 100).toFixed(1)}%
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600">Success Rate:</span>
                    <span className="text-lg font-semibold text-yellow-600">
                      {((quizAnalysis?.correctAnswers || 0) / ((quizAnalysis?.correctAnswers || 0) + (quizAnalysis?.incorrectAnswers || 1)) * 100).toFixed(1)}%
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex space-x-4">
              <button
                onClick={() => setView('home')}
                className="px-6 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors flex items-center"
              >
                Back to Home
              </button>
              <button
                onClick={() => {
                  setSelectedDay(selectedDay);
                  setView('instructions');
                }}
                className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center"
              >
                Try Again <ArrowRight className="w-5 h-5 ml-2" />
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (questions.length === 0) return <div>Loading...</div>;

  const currentQuestion = questions[currentQuestionIndex];
  const isLastQuestion = currentQuestionIndex === questions.length - 1;

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row">
      {/* Mobile Header */}
      <div className="md:hidden bg-white border-b p-4 flex items-center justify-between">
        <h1 className="text-lg font-semibold">SSC Vocabulary Quiz</h1>
        <button
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="p-2 hover:bg-gray-100 rounded-lg"
        >
          <Menu className="w-6 h-6" />
        </button>
      </div>

      {/* Main Content */}
      <div className="flex-1 p-4 md:p-6 md:order-1">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
          <h1 className="text-xl md:text-2xl font-bold text-gray-800">
            {selectedDay === 'full' ? 'Full Vocabulary Quiz' : `Day ${selectedDay}: SSC CGL Tier-II Vocabulary Quiz`}
          </h1>
          <div className="text-sm text-gray-500 mt-1">October 26, 2023</div>
          
          <div className="flex justify-between items-center mt-4">
            <div className="flex items-center space-x-4">
              <div className="flex items-center">
                <Clock className="w-5 h-5 text-blue-600 mr-2" />
                <span className="font-semibold">
                  Time Left: {formatTime(timeLeft)}
                </span>
              </div>
              <div className="flex items-center">
                <BarChart3 className="w-5 h-5 text-green-600 mr-2" />
                <span className="font-semibold text-green-600">
                  Score: {score}
                </span>
              </div>
            </div>
            <button
              onClick={handleQuizComplete}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center text-sm"
            >
              Submit Quiz <ArrowRight className="w-4 h-4 ml-2" />
            </button>
          </div>
        </div>

        {/* Question Card */}
        <div className="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <span className="text-sm font-medium text-gray-500">
              Question {currentQuestionIndex + 1} of {questions.length}
            </span>
            <span className="text-sm font-medium text-gray-500">
              Marks: +2 for correct, -0.5 for incorrect
            </span>
          </div>

          <h2 className="text-lg md:text-xl font-semibold text-gray-800 mb-6">
            {currentQuestion.question}
          </h2>

          <div className="space-y-3">
            {currentQuestion.options.map((option, index) => (
              <div
                key={index}
                className={`p-3 md:p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  selectedAnswer === option
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-200'
                }`}
                onClick={() => !isAnswerSubmitted && setSelectedAnswer(option)}
              >
                <label className="flex items-center cursor-pointer">
                  <input
                    type="radio"
                    name="answer"
                    value={option}
                    checked={selectedAnswer === option}
                    onChange={() => setSelectedAnswer(option)}
                    disabled={isAnswerSubmitted}
                    className="hidden"
                  />
                  <span className="text-gray-700">{option}</span>
                </label>
              </div>
            ))}
          </div>

          {isAnswerSubmitted && (
            <div className={`mt-6 p-4 rounded-lg ${
              selectedAnswer === currentQuestion.correct
                ? 'bg-green-50 text-green-700'
                : 'bg-red-50 text-red-700'
            }`}>
              {selectedAnswer === currentQuestion.correct ? (
                <div className="flex items-center">
                  <CheckCircle2 className="w-5 h-5 mr-2" />
                  <span>Correct!</span>
                </div>
              ) : (
                <div className="flex items-center">
                  <XCircle className="w-5 h-5 mr-2" />
                  <span>Incorrect! The correct answer is: {currentQuestion.correct}</span>
                </div>
              )}
            </div>
          )}

          <div className="mt-6 flex justify-end space-x-4">
            {!isAnswerSubmitted ? (
              <button
                onClick={handleSubmit}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Submit Answer
              </button>
            ) : !isLastQuestion && (
              <button
                onClick={handleNext}
                className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center"
              >
                Next Question
                <ChevronRight className="w-4 h-4 ml-2" />
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Sidebar */}
      <div className={`
        fixed md:static inset-0 bg-white md:w-80 transform transition-transform duration-200 ease-in-out
        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        md:translate-x-0 z-50 md:border-l border-gray-200
      `}>
        <div className="p-4 md:p-6">
          <div className="md:hidden flex justify-end">
            <button
              onClick={() => setIsSidebarOpen(false)}
              className="p-2 hover:bg-gray-100 rounded-lg"
            >
              ✕
            </button>
          </div>

          <h3 className="text-lg font-semibold mb-4">Question Navigation</h3>
          <div className="grid grid-cols-5 gap-2 mb-6">
            {questionStatus.map((status, index) => (
              <div
                key={index}
                className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${
                  status === 'Unattempted'
                    ? 'bg-gray-100 text-gray-600'
                    : status === 'Correct'
                    ? 'bg-green-100 text-green-600'
                    : 'bg-red-100 text-red-600'
                }`}
              >
                {index + 1}
              </div>
            ))}
          </div>

          <div className="space-y-4">
            <div className="flex items-center">
              <CheckCircle2 className="w-5 h-5 text-green-600 mr-2" />
              <span>Correct: {correctCount}</span>
            </div>
            <div className="flex items-center">
              <XCircle className="w-5 h-5 text-red-600 mr-2" />
              <span>Incorrect: {incorrectCount}</span>
            </div>
            <div className="flex items-center">
              <HelpCircle className="w-5 h-5 text-gray-600 mr-2" />
              <span>Unattempted: {questions.length - (correctCount + incorrectCount)}</span>
            </div>
          </div>

          {timeLeft === 0 && (
            <div className="mt-6 p-4 bg-yellow-50 rounded-lg">
              <div className="flex items-center text-yellow-800">
                <AlertCircle className="w-5 h-5 mr-2" />
                <span>Time's up! Quiz completed.</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default App;"    this have error "[plugin:vite:react-babel] /home/project/src/App.tsx: Unexpected token, expected "," (467:67)
  470 |                   <div className="flex justify-between items-center">
/home/project/src/App.tsx:467:67
465|                      <span className="text-gray-600">Attempt Rate:</span>
466|                      <span className="text-lg font-semibold text-yellow-600">
467|                        {(((quizAnalysis?.totalQuestions || 0) - (qu izAnalysis?.unattempted || 0)) / (quizAnalysis?.totalQuestions || 1) * 100).toFixed(1)}%
   |                                                                     ^
468|                      </span>
469|                    </div>"