import React, { useState, useEffect } from 'react';
import { 
  BookOpen, 
  Network, 
  ClipboardList, 
  CheckCircle2, 
  XCircle, 
  ArrowRight, 
  RotateCcw, 
  AlertTriangle,
  Info
} from 'lucide-react';

// --- UTILITY FUNCTIONS ---
const shuffleArray = (array) => {
  const newArr = [...array];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
};

// --- QUIZ QUESTION GENERATORS ---
// We use functions to generate questions so that numbers and scenarios are randomized every time the quiz is played.
const questionPool = [
  // 1. Identify Simple Random
  () => {
    const N = Math.floor(Math.random() * 400) + 600; 
    const n = Math.floor(Math.random() * 30) + 50;
    return {
      text: `A researcher wants to survey students at a school of ${N}. They assign each student a number from 1 to ${N} and use a computer's random number generator to select ${n} students. Which sampling technique is this?`,
      options: ["Simple Random", "Systematic", "Stratified", "Convenience"],
      answer: "Simple Random",
      explanation: "Since every individual has an equal chance of being selected and a random number generator is used on the entire population list, this is Simple Random Sampling."
    };
  },
  // 2. Identify Systematic
  () => {
    const k = Math.floor(Math.random() * 10) + 10; 
    const start = Math.floor(Math.random() * k) + 1;
    return {
      text: `A quality control inspector wants to check a production line. They randomly select a starting item between 1 and ${k} (they chose item ${start}). Then, they check every ${k}th item that comes off the line. Which method is this?`,
      options: ["Simple Random", "Systematic", "Stratified", "Quota"],
      answer: "Systematic",
      explanation: `Selecting at regular intervals (every ${k}th item) from a random starting point is the definition of Systematic Sampling.`
    };
  },
  // 3. Identify Stratified
  () => {
    const N = Math.floor(Math.random() * 5 + 5) * 100; 
    const pct = Math.floor(Math.random() * 3 + 4) * 10; 
    const n = Math.floor(Math.random() * 5 + 5) * 10; 
    const group1 = Math.round(n * (pct/100));
    const group2 = n - group1;
    return {
      text: `A school has ${N} students, where ${pct}% are juniors and ${100-pct}% are seniors. To get a sample of ${n} students, the researcher uses a random number generator to independently select ${group1} juniors and ${group2} seniors from the official school registers. Which method is this?`,
      options: ["Stratified", "Quota", "Simple Random", "Systematic"],
      answer: "Stratified",
      explanation: `The population is divided into subgroups (strata), and a RANDOM sampling method is used within each group to ensure proportional representation. Thus, it's Stratified Sampling.`
    };
  },
  // 4. Identify Quota
  () => {
    const pct = Math.floor(Math.random() * 3 + 4) * 10; 
    const n = Math.floor(Math.random() * 5 + 5) * 10; 
    const group1 = Math.round(n * (pct/100));
    const group2 = n - group1;
    return {
      text: `A researcher wants to survey ${n} students at a school. They know ${pct}% of the school are juniors. The researcher stands in the cafeteria and asks students their grade, surveying anyone who agrees until they have spoken to exactly ${group1} juniors and ${group2} seniors. Which method is this?`,
      options: ["Stratified", "Quota", "Simple Random", "Convenience"],
      answer: "Quota",
      explanation: `Although the sample is proportional (like stratified), the researcher uses CONVENIENCE sampling (whoever is in the cafeteria) to fill these groups, not random selection from a list. This makes it Quota Sampling.`
    };
  },
  // 5. Identify Convenience
  () => {
    const n = Math.floor(Math.random() * 20) + 30;
    return {
      text: `A teacher wants to know what the whole school thinks about a new uniform. They ask the first ${n} students who walk into their morning class to fill out the survey. Which method is this?`,
      options: ["Convenience", "Quota", "Simple Random", "Systematic"],
      answer: "Convenience",
      explanation: `The teacher is simply selecting the people who are easiest to reach (readily available), with no random process or grouping. This is Convenience Sampling.`
    };
  },
  // 6. Critique Convenience
  () => {
    const N = Math.floor(Math.random() * 400) + 800;
    const n = Math.floor(Math.random() * 30) + 40;
    return {
      text: `To find out the average reading level of all ${N} students in a school, the librarian surveys ${n} students currently sitting in the library. Why is this inappropriate?`,
      options: [
        "It is Convenience Sampling and will be biased towards students who like to read.",
        "It is Quota Sampling because they didn't separate by grade.",
        "It is Simple Random Sampling, but the sample size is too small.",
        "It is Systematic Sampling, but the interval is incorrect."
      ],
      answer: "It is Convenience Sampling and will be biased towards students who like to read.",
      explanation: `Surveying people just because they are easily available in the library introduces severe bias, as their reading habits likely differ from the whole school.`
    };
  },
  // 7. Critique Systematic
  () => {
    const interval = Math.floor(Math.random() * 5 + 10);
    return {
      text: `A factory machine produces items. Due to a mechanical gear flaw, every ${interval}th item has a slight defect. The quality control manager decides to use Systematic Sampling, checking every ${interval}th item. Why is this a terrible idea?`,
      options: [
        "The sampling interval matches a periodic pattern in the population, leading to a highly biased sample.",
        "Systematic sampling is never truly random, so it should be avoided in factories.",
        "They should use Stratified sampling instead to separate the defective items from good ones.",
        "They should check every single item instead, as sampling is illegal here."
      ],
      answer: "The sampling interval matches a periodic pattern in the population, leading to a highly biased sample.",
      explanation: `Systematic sampling fails when the population has a hidden periodic trait that aligns with the sampling interval (k). They will either select ALL defective items or NO defective items.`
    };
  },
  // 8. Fix Quota -> Stratified
  () => {
    const n = Math.floor(Math.random() * 5 + 5) * 10;
    return {
      text: `A market researcher wants to survey adults about a product. They want exactly ${n} men and ${n} women. Currently, they stand outside a store and ask people until they reach their targets. How MUST they change this to make it Stratified Sampling instead of Quota Sampling?`,
      options: [
        `They must select the ${n} men and ${n} women randomly from a complete population database or list.`,
        `They should just ask the first ${n*2} people they see, regardless of gender.`,
        `They should ask every 5th person who walks out of the store until they get ${n} of each.`,
        `They must change the numbers so they match the exact population percentage, even if they still ask people outside.`
      ],
      answer: `They must select the ${n} men and ${n} women randomly from a complete population database or list.`,
      explanation: `The key difference is how individuals are chosen. Quota uses convenience (standing outside a store), while Stratified MUST use a random selection process (like a database/RNG) within the subgroups.`
    };
  },
  // 9. Critique Simple Random
  () => {
    const N = Math.floor(Math.random() * 50) + 100 * 10;
    return {
      text: `A company of ${N} employees wants to survey staff. 95% of employees are regular staff and 5% are executives. They use Simple Random Sampling to select 20 employees. What is a major risk here, and what method would fix it?`,
      options: [
        "Risk: Executives might not be selected at all by chance. Fix: Use Stratified Sampling.",
        "Risk: Regular staff will be over-represented. Fix: Use Systematic Sampling.",
        "Risk: It's too difficult to get a list of all staff. Fix: Use Convenience Sampling.",
        "Risk: The sample size is too small. Fix: Use Quota Sampling."
      ],
      answer: "Risk: Executives might not be selected at all by chance. Fix: Use Stratified Sampling.",
      explanation: `In Simple Random Sampling, small minority groups might by chance be completely missed. Stratified Sampling guarantees proportional representation of all subgroups.`
    };
  },
  // 10. Fix Convenience -> Systematic
  () => {
    const n = Math.floor(Math.random() * 10) + 20;
    return {
      text: `A principal wants to sample ${n} parents from a list of 500 attendees to an event. They plan to just pick the first ${n} names on the alphabetical sign-in sheet. Which of the following changes would turn this into Systematic Sampling?`,
      options: [
        `Pick a random starting parent from the first few names, then select every 10th parent on the list.`,
        `Put all 500 names in a hat and draw ${n} names.`,
        `Divide the parents by their child's year group, and ask whoever is easiest to find.`,
        `Ask the first ${n} parents who actually arrive at the event.`
      ],
      answer: `Pick a random starting parent from the first few names, then select every 10th parent on the list.`,
      explanation: `Systematic sampling requires a random starting point followed by a fixed interval (e.g., every 'k'th item) through the list.`
    };
  },
  // 11. Conceptual Distinction
  () => {
    return {
      text: `Both Stratified and Quota sampling involve dividing the population into groups. What is the fundamental difference between them?`,
      options: [
        "Stratified sampling selects individuals randomly within groups; Quota sampling selects them by convenience.",
        "Stratified sampling is only for large populations; Quota sampling is for small populations.",
        "Stratified sampling uses equal numbers from each group; Quota sampling uses proportional numbers.",
        "There is no difference; they are two names for the exact same technique."
      ],
      answer: "Stratified sampling selects individuals randomly within groups; Quota sampling selects them by convenience.",
      explanation: `This is the vital distinction! Stratified is a probability method requiring random selection within strata. Quota is a non-probability method relying on convenience selection to fill targets.`
    };
  },
  // 12. Pure Identification (Hat)
  () => {
    const N = Math.floor(Math.random() * 10) + 20;
    return {
      text: `A teacher wants to select 3 students from a class of ${N} to answer questions. They write every student's name on a piece of paper, put them in a hat, mix them well, and draw 3 names. Which method is this?`,
      options: ["Simple Random", "Systematic", "Convenience", "Stratified"],
      answer: "Simple Random",
      explanation: `The 'names in a hat' method ensures every individual has an equal and independent chance of selection, which is the definition of Simple Random Sampling.`
    };
  }
];

// --- MAIN APPLICATION COMPONENT ---
export default function App() {
  const [activeTab, setActiveTab] = useState('learn');

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans pb-12">
      {/* Header */}
      <header className="bg-indigo-600 text-white shadow-md">
        <div className="max-w-5xl mx-auto px-4 py-6">
          <h1 className="text-2xl md:text-3xl font-bold mb-2">Sampling Techniques</h1>
          <p className="text-indigo-100 text-sm md:text-base">Year 12 Mathematics: Understanding Probability & Non-Probability Sampling</p>
        </div>
      </header>

      {/* Navigation */}
      <nav className="bg-white shadow-sm border-b sticky top-0 z-10">
        <div className="max-w-5xl mx-auto px-4 flex overflow-x-auto">
          <button 
            onClick={() => setActiveTab('learn')}
            className={`flex items-center space-x-2 px-4 py-4 border-b-2 font-medium whitespace-nowrap transition-colors ${activeTab === 'learn' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-600 hover:text-indigo-500'}`}
          >
            <BookOpen size={18} />
            <span>Learn Concepts</span>
          </button>
          <button 
            onClick={() => setActiveTab('hierarchy')}
            className={`flex items-center space-x-2 px-4 py-4 border-b-2 font-medium whitespace-nowrap transition-colors ${activeTab === 'hierarchy' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-600 hover:text-indigo-500'}`}
          >
            <Network size={18} />
            <span>Hierarchy & Links</span>
          </button>
          <button 
            onClick={() => setActiveTab('quiz')}
            className={`flex items-center space-x-2 px-4 py-4 border-b-2 font-medium whitespace-nowrap transition-colors ${activeTab === 'quiz' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-600 hover:text-indigo-500'}`}
          >
            <ClipboardList size={18} />
            <span>Interactive Quiz</span>
          </button>
        </div>
      </nav>

      {/* Main Content Area */}
      <main className="max-w-5xl mx-auto px-4 mt-8">
        {activeTab === 'learn' && <LearnSection />}
        {activeTab === 'hierarchy' && <HierarchySection />}
        {activeTab === 'quiz' && <QuizSection />}
      </main>
    </div>
  );
}

// --- TAB 1: LEARN SECTION ---
function LearnSection() {
  return (
    <div className="space-y-8 animate-in fade-in duration-500">
      
      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
        <h2 className="text-xl font-bold text-indigo-700 mb-4 flex items-center">
          <Info className="mr-2" size={20} /> Introduction
        </h2>
        <p className="text-slate-600">
          When we want to find out information about a large group (the <strong>population</strong>), it's often too expensive or time-consuming to ask everyone. Instead, we select a smaller group (a <strong>sample</strong>). 
          How we choose that sample determines whether our results are biased or accurately represent the population.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Probability Sampling */}
        <div className="space-y-6">
          <h3 className="text-lg font-bold text-slate-800 border-b-2 border-emerald-500 pb-2">Probability (Random) Sampling</h3>
          
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="bg-emerald-50 px-4 py-3 border-b border-emerald-100 font-semibold text-emerald-800">
              1. Simple Random Sampling
            </div>
            <div className="p-4 text-sm text-slate-700 space-y-2">
              <p><strong>Definition:</strong> Every member of the population has an equal and independent chance of being selected.</p>
              <p><strong>Requirement:</strong> Needs a complete list of the population (sampling frame).</p>
              <div className="bg-slate-50 p-3 rounded border border-slate-100 mt-2">
                <strong>Example:</strong> Assigning a number to all 500 students in a school and using a computer to randomly generate 50 numbers.
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="bg-emerald-50 px-4 py-3 border-b border-emerald-100 font-semibold text-emerald-800">
              2. Systematic Sampling
            </div>
            <div className="p-4 text-sm text-slate-700 space-y-2">
              <p><strong>Definition:</strong> Selecting a random starting point, then picking every <em>k</em>-th item/person from the list.</p>
              <p><strong>Warning:</strong> Can introduce bias if the list has a hidden periodic pattern.</p>
              <div className="bg-slate-50 p-3 rounded border border-slate-100 mt-2">
                <strong>Example:</strong> Picking a random number between 1 and 10 (e.g., 4). Then surveying the 4th, 14th, 24th, etc., person on a register.
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-emerald-300 overflow-hidden relative">
            <div className="absolute top-0 right-0 bg-emerald-500 text-white text-xs px-2 py-1 rounded-bl-lg font-bold">Uses Random!</div>
            <div className="bg-emerald-50 px-4 py-3 border-b border-emerald-100 font-semibold text-emerald-800">
              3. Stratified Sampling
            </div>
            <div className="p-4 text-sm text-slate-700 space-y-2">
              <p><strong>Definition:</strong> The population is divided into subgroups (strata). A <em>proportional random sample</em> is taken from each group using Simple Random or Systematic sampling.</p>
              <p><strong>Benefit:</strong> Guarantees all minority groups are proportionally represented.</p>
              <div className="bg-slate-50 p-3 rounded border border-slate-100 mt-2">
                <strong>Example:</strong> A school is 60% boys and 40% girls. To sample 100 students, you randomly draw 60 boys from the boys' register and 40 girls from the girls' register.
              </div>
            </div>
          </div>
        </div>

        {/* Non-Probability Sampling */}
        <div className="space-y-6">
          <h3 className="text-lg font-bold text-slate-800 border-b-2 border-rose-500 pb-2">Non-Probability (Non-Random)</h3>
          
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 font-semibold text-rose-800">
              4. Convenience Sampling
            </div>
            <div className="p-4 text-sm text-slate-700 space-y-2">
              <p><strong>Definition:</strong> Selecting individuals who are simply easiest to reach or readily available.</p>
              <p><strong>Warning:</strong> Highly prone to bias. The sample is rarely representative of the whole population.</p>
              <div className="bg-slate-50 p-3 rounded border border-slate-100 mt-2">
                <strong>Example:</strong> A researcher stands outside a library and asks the first 20 people who walk out to fill out a survey.
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-rose-300 overflow-hidden relative">
            <div className="absolute top-0 right-0 bg-rose-500 text-white text-xs px-2 py-1 rounded-bl-lg font-bold">Uses Convenience!</div>
            <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 font-semibold text-rose-800">
              5. Quota Sampling
            </div>
            <div className="p-4 text-sm text-slate-700 space-y-2">
              <p><strong>Definition:</strong> The population is divided into subgroups. Participants are selected using <em>Convenience sampling</em> until a specific quota is filled for each group.</p>
              <p><strong>Key Difference:</strong> Unlike Stratified, there is no random selection from a list.</p>
              <div className="bg-slate-50 p-3 rounded border border-slate-100 mt-2">
                <strong>Example:</strong> A researcher needs 10 men and 10 women. They stand on the street and ask whoever walks past until they reach exactly 10 of each.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- TAB 2: HIERARCHY SECTION ---
function HierarchySection() {
  return (
    <div className="animate-in fade-in duration-500 space-y-8">
      <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 mb-8">
        <h2 className="text-xl font-bold text-indigo-700 mb-4">How do they connect?</h2>
        <p className="text-slate-600">
          Sampling techniques are fundamentally split by whether they use <strong>Probability</strong> (random chance) or <strong>Non-Probability</strong> (human choice/convenience). Notice how Stratified and Quota both use groups, but rely on different underlying mechanics.
        </p>
      </div>

      <div className="flex flex-col items-center w-full pb-10 overflow-x-auto">
        {/* Root Node */}
        <div className="bg-slate-800 text-white font-bold py-3 px-8 rounded-lg shadow-md z-10">
          Sampling Techniques
        </div>
        
        {/* Main Split Line */}
        <div className="w-px h-8 bg-slate-300"></div>
        <div className="w-full max-w-3xl flex justify-between px-16 relative">
          <div className="absolute top-0 left-1/4 right-1/4 h-px bg-slate-300"></div>
          
          {/* Left Branch: Probability */}
          <div className="flex flex-col items-center w-1/2 relative pt-8">
            <div className="absolute top-0 left-1/2 w-px h-8 bg-slate-300 -translate-x-1/2"></div>
            <div className="bg-emerald-600 text-white font-semibold py-2 px-6 rounded-lg shadow mb-6 text-center">
              Probability<br/><span className="text-xs font-normal opacity-80">(Random Selection)</span>
            </div>
            
            <div className="w-px h-6 bg-slate-300"></div>
            <div className="flex flex-col space-y-4 w-full px-4 border-t-2 border-emerald-200 pt-4 items-center">
              <div className="bg-emerald-50 border border-emerald-200 text-emerald-900 py-2 px-4 rounded w-full max-w-xs text-center font-medium shadow-sm">
                Simple Random
              </div>
              <div className="bg-emerald-50 border border-emerald-200 text-emerald-900 py-2 px-4 rounded w-full max-w-xs text-center font-medium shadow-sm">
                Systematic
              </div>
              <div className="flex flex-col items-center w-full">
                <div className="h-6 w-px bg-dashed border-l-2 border-emerald-300 border-dashed"></div>
                <div className="bg-emerald-100 border-2 border-emerald-400 text-emerald-900 py-3 px-4 rounded w-full max-w-xs text-center shadow-md relative">
                  <div className="font-bold">Stratified</div>
                  <div className="text-xs mt-1 text-emerald-700">Divides into Strata, then applies Simple Random or Systematic.</div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Branch: Non-Probability */}
          <div className="flex flex-col items-center w-1/2 relative pt-8">
            <div className="absolute top-0 left-1/2 w-px h-8 bg-slate-300 -translate-x-1/2"></div>
            <div className="bg-rose-600 text-white font-semibold py-2 px-6 rounded-lg shadow mb-6 text-center">
              Non-Probability<br/><span className="text-xs font-normal opacity-80">(Non-Random)</span>
            </div>
            
            <div className="w-px h-6 bg-slate-300"></div>
            <div className="flex flex-col space-y-4 w-full px-4 border-t-2 border-rose-200 pt-4 items-center">
              <div className="bg-rose-50 border border-rose-200 text-rose-900 py-2 px-4 rounded w-full max-w-xs text-center font-medium shadow-sm">
                Convenience
              </div>
              <div className="flex flex-col items-center w-full">
                <div className="h-6 w-px bg-dashed border-l-2 border-rose-300 border-dashed"></div>
                <div className="bg-rose-100 border-2 border-rose-400 text-rose-900 py-3 px-4 rounded w-full max-w-xs text-center shadow-md relative">
                  <div className="font-bold">Quota</div>
                  <div className="text-xs mt-1 text-rose-700">Divides into Strata, then applies Convenience sampling.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- TAB 3: QUIZ SECTION ---
function QuizSection() {
  const [quizState, setQuizState] = useState('start'); // 'start', 'playing', 'end'
  const [questions, setQuestions] = useState([]);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedOption, setSelectedOption] = useState(null);
  const [showExplanation, setShowExplanation] = useState(false);

  // Initialize a new quiz
  const startQuiz = () => {
    // Randomly pick 10 questions from the pool and generate them
    const shuffledPool = shuffleArray(questionPool).slice(0, 10);
    const generatedQuestions = shuffledPool.map(generator => {
      const q = generator();
      return {
        ...q,
        options: shuffleArray(q.options) // shuffle options for display
      };
    });

    setQuestions(generatedQuestions);
    setCurrentIdx(0);
    setScore(0);
    setSelectedOption(null);
    setShowExplanation(false);
    setQuizState('playing');
  };

  const handleOptionClick = (option) => {
    if (showExplanation) return; // Prevent changing answer
    setSelectedOption(option);
    setShowExplanation(true);
    if (option === questions[currentIdx].answer) {
      setScore(prev => prev + 1);
    }
  };

  const handleNext = () => {
    if (currentIdx < questions.length - 1) {
      setCurrentIdx(prev => prev + 1);
      setSelectedOption(null);
      setShowExplanation(false);
    } else {
      setQuizState('end');
    }
  };

  if (quizState === 'start') {
    return (
      <div className="flex flex-col items-center justify-center py-16 animate-in fade-in zoom-in duration-500">
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-slate-100 max-w-lg text-center">
          <ClipboardList size={64} className="text-indigo-500 mx-auto mb-6" />
          <h2 className="text-2xl font-bold text-slate-800 mb-4">Test Your Knowledge</h2>
          <p className="text-slate-600 mb-8">
            You will be given 10 scenarios. Identify the sampling technique used, spot errors, and fix inappropriate methods. 
            Numbers and scenarios are randomized every time you play!
          </p>
          <button 
            onClick={startQuiz}
            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full shadow-md transition-transform transform hover:scale-105 active:scale-95"
          >
            Start Quiz
          </button>
        </div>
      </div>
    );
  }

  if (quizState === 'end') {
    const percentage = (score / questions.length) * 100;
    let feedback = "";
    if (percentage >= 90) feedback = "Excellent! You have a firm grasp of sampling techniques.";
    else if (percentage >= 70) feedback = "Good job! You understand most of the concepts.";
    else feedback = "Keep practicing! Review the Learn tab to solidify your understanding.";

    return (
      <div className="flex flex-col items-center justify-center py-16 animate-in fade-in duration-500">
        <div className="bg-white p-8 rounded-2xl shadow-lg border border-slate-100 max-w-lg text-center w-full">
          <div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-indigo-50 mb-6">
            <span className="text-3xl font-bold text-indigo-600">{score}/{questions.length}</span>
          </div>
          <h2 className="text-2xl font-bold text-slate-800 mb-2">Quiz Complete!</h2>
          <p className="text-slate-600 mb-8">{feedback}</p>
          
          <button 
            onClick={startQuiz}
            className="flex items-center justify-center w-full space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-xl shadow-md transition-colors"
          >
            <RotateCcw size={20} />
            <span>Try Again</span>
          </button>
        </div>
      </div>
    );
  }

  const question = questions[currentIdx];
  const isCorrect = selectedOption === question.answer;

  return (
    <div className="max-w-3xl mx-auto animate-in fade-in duration-300">
      
      {/* Progress Bar */}
      <div className="mb-6">
        <div className="flex justify-between text-sm font-semibold text-slate-500 mb-2">
          <span>Question {currentIdx + 1} of {questions.length}</span>
          <span>Score: {score}</span>
        </div>
        <div className="w-full bg-slate-200 rounded-full h-2.5">
          <div 
            className="bg-indigo-600 h-2.5 rounded-full transition-all duration-500" 
            style={{ width: `${((currentIdx) / questions.length) * 100}%` }}
          ></div>
        </div>
      </div>

      {/* Question Card */}
      <div className="bg-white rounded-2xl shadow-md border border-slate-200 overflow-hidden">
        <div className="p-6 md:p-8">
          <h3 className="text-lg md:text-xl font-medium text-slate-800 leading-relaxed mb-8">
            {question.text}
          </h3>

          <div className="space-y-3">
            {question.options.map((option, idx) => {
              
              // Styling logic for options based on state
              let btnClass = "w-full text-left p-4 rounded-xl border-2 transition-all duration-200 ";
              if (!showExplanation) {
                btnClass += "border-slate-200 hover:border-indigo-400 hover:bg-indigo-50 text-slate-700";
              } else {
                if (option === question.answer) {
                  btnClass += "border-emerald-500 bg-emerald-50 text-emerald-900";
                } else if (option === selectedOption) {
                  btnClass += "border-rose-500 bg-rose-50 text-rose-900";
                } else {
                  btnClass += "border-slate-100 bg-slate-50 text-slate-400 opacity-50";
                }
              }

              return (
                <button
                  key={idx}
                  onClick={() => handleOptionClick(option)}
                  disabled={showExplanation}
                  className={btnClass}
                >
                  <div className="flex items-start">
                    <div className="flex-1">{option}</div>
                    {showExplanation && option === question.answer && <CheckCircle2 className="text-emerald-500 ml-2 shrink-0" />}
                    {showExplanation && option === selectedOption && option !== question.answer && <XCircle className="text-rose-500 ml-2 shrink-0" />}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Explanation Area */}
        {showExplanation && (
          <div className={`p-6 md:p-8 border-t ${isCorrect ? 'bg-emerald-50 border-emerald-100' : 'bg-rose-50 border-rose-100'} animate-in slide-in-from-top-4 duration-300`}>
            <div className="flex items-start">
              {isCorrect ? (
                <CheckCircle2 className="text-emerald-600 mr-3 shrink-0 mt-0.5" />
              ) : (
                <AlertTriangle className="text-rose-600 mr-3 shrink-0 mt-0.5" />
              )}
              <div>
                <h4 className={`font-bold mb-1 ${isCorrect ? 'text-emerald-800' : 'text-rose-800'}`}>
                  {isCorrect ? "Correct!" : "Incorrect."}
                </h4>
                <p className={`text-sm ${isCorrect ? 'text-emerald-700' : 'text-rose-700'} mb-4 leading-relaxed`}>
                  {question.explanation}
                </p>
                <button 
                  onClick={handleNext}
                  className="flex items-center space-x-2 bg-slate-800 hover:bg-slate-900 text-white py-2 px-6 rounded-lg font-medium transition-colors"
                >
                  <span>{currentIdx < questions.length - 1 ? "Next Question" : "See Results"}</span>
                  <ArrowRight size={18} />
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}