popsite-ui 1.0.0

package/src/components/modules/MovieBookingModule.jsx

@@ -0,0 +1,337 @@
+import React, { useState, useEffect } from 'react';
+import { movieBookingMockData } from '../../data/systems/movieBooking';
+import { useToast } from '../system/Toast';
+
+export function MovieBookingModule() {
+  const [currentView, setCurrentView] = useState('grid'); // grid, details, selector, ticket
+  const [selectedMovie, setSelectedMovie] = useState(null);
+  const [selectedShowtime, setSelectedShowtime] = useState('');
+  const [selectedSeats, setSelectedSeats] = useState([]);
+  const [bookedTickets, setBookedTickets] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  // Simulated persisted state
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_movie_tickets');
+    if (saved) {
+      try { setBookedTickets(JSON.parse(saved)); } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    if (bookedTickets.length > 0) {
+      localStorage.setItem('popsite_movie_tickets', JSON.stringify(bookedTickets));
+    }
+  }, [bookedTickets]);
+
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleMovieClick = (movie) => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setSelectedMovie(movie);
+    setSelectedShowtime('');
+    setSelectedSeats([]);
+    setCurrentView('details');
+  };
+
+  const handleSeatClick = (seatId) => {
+    setSelectedSeats(prev => 
+      prev.includes(seatId) 
+        ? prev.filter(s => s !== seatId)
+        : [...prev, seatId]
+    );
+  };
+
+  const calculateTotal = () => {
+    return selectedSeats.reduce((total, seatId) => {
+      // VIP seats are rows V1, V2, V3
+      const isVip = seatId.startsWith('V');
+      return total + (isVip ? movieBookingMockData.pricing.vip : movieBookingMockData.pricing.standard);
+    }, 0);
+  };
+
+  const purchaseTickets = () => {
+    if (selectedSeats.length === 0) {
+      showToast('Please select at least one seat', 'error');
+      return;
+    }
+    withDelay(() => {
+      const newTicket = {
+        id: `TK-${Math.floor(Math.random() * 100000)}`,
+        movie: selectedMovie,
+        showtime: selectedShowtime,
+        seats: selectedSeats,
+        total: calculateTotal()
+      };
+      setBookedTickets(prev => [...prev, newTicket]);
+      showToast('Payment successful! Enjoy the movie.', 'success');
+      setCurrentView('ticket');
+    });
+  };
+
+  // ----- Views -----
+
+  const renderGrid = () => {
+    const filtered = movieBookingMockData.movies.filter(m => 
+      m.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+      m.genre.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return (
+      <div className="pk-container animate-fade-in">
+        <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '2rem' }}>
+          <div>
+            <h1 className="pk-heading-lg" style={{ marginBottom: '0.5rem' }}>{movieBookingMockData.cinemaName}</h1>
+            <p className="pk-text-body">Experience the magic of cinema.</p>
+          </div>
+          <button 
+            className="pk-btn pk-btn-outline" 
+            onClick={() => {
+              if(bookedTickets.length > 0) {
+                // Just show the most recent ticket for demo purposes
+                setCurrentView('ticket');
+              } else {
+                showToast("No tickets booked yet.", "info");
+              }
+            }}
+          >
+            🎫 My Tickets ({bookedTickets.length})
+          </button>
+        </div>
+
+        <div className="pk-card pk-glass" style={{ padding: '1.5rem', marginBottom: '2rem' }}>
+          <input 
+            type="text" 
+            className="pk-input pk-w-full" 
+            placeholder="Search movies by title or genre..." 
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        {filtered.length === 0 ? (
+          <div className="pk-empty-state">
+             <div className="pk-empty-icon">🍿</div>
+             <h3 className="pk-heading-md">No movies found</h3>
+          </div>
+        ) : (
+          <div className="pk-grid pk-grid-responsive">
+            {filtered.map(movie => (
+               <div key={movie.id} className="pk-card pk-card-interactive" onClick={() => handleMovieClick(movie)} style={{ cursor: 'pointer' }}>
+                 <div style={{ height: '350px', background: 'var(--pk-primary-light)' }}>
+                    <img 
+                      src={movie.image} 
+                      alt={movie.title} 
+                      className="pk-w-full pk-h-full pk-object-cover" 
+                      onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }}
+                    />
+                    <div style={{ display: 'none', width: '100%', height: '100%', background: 'linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))', color: 'white', alignItems: 'center', justifyContent: 'center', fontSize: '2rem', fontWeight: 'bold' }}>
+                      {movie.title[0]}
+                    </div>
+                 </div>
+                 <div className="pk-card-body">
+                    <span className="pk-badge" style={{ marginBottom: '0.5rem', display: 'inline-block' }}>{movie.rating}</span>
+                    <h3 className="pk-heading-md" style={{ marginBottom: '0.25rem' }}>{movie.title}</h3>
+                    <p className="pk-text-sm" style={{ marginBottom: '0.5rem' }}>{movie.genre} • {movie.runtime}</p>
+                 </div>
+               </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderDetails = () => (
+    <div className="pk-container animate-fade-in">
+       <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('grid')}>← Back</button>
+       <div className="pk-card pk-flex" style={{ overflow: 'hidden', flexWrap: 'wrap' }}>
+          <div style={{ flex: '1 1 300px', minHeight: '400px' }}>
+            <img src={selectedMovie.image} alt={selectedMovie.title} className="pk-w-full pk-h-full pk-object-cover" />
+          </div>
+          <div style={{ flex: '2 1 400px', padding: '3rem' }}>
+            <div className="pk-flex pk-items-center pk-gap-4" style={{ marginBottom: '1rem' }}>
+              <span className="pk-badge">{selectedMovie.rating}</span>
+              <span className="pk-text-sm">{selectedMovie.genre} • {selectedMovie.runtime}</span>
+            </div>
+            <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{selectedMovie.title}</h1>
+            <p className="pk-text-body" style={{ fontSize: '1.125rem', marginBottom: '2rem' }}>{selectedMovie.synopsis}</p>
+            
+            <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Select Showtime</h3>
+            <div className="pk-flex" style={{ gap: '1rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+              {selectedMovie.showtimes.map(time => (
+                <button 
+                  key={time}
+                  className={selectedShowtime === time ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                  onClick={() => setSelectedShowtime(time)}
+                >
+                  {time}
+                </button>
+              ))}
+            </div>
+
+            <button 
+              className="pk-btn pk-btn-primary" 
+              style={{ fontSize: '1.25rem', padding: '1rem 2rem' }}
+              disabled={!selectedShowtime}
+              onClick={() => setCurrentView('selector')}
+            >
+              Continue to Seat Selection
+            </button>
+          </div>
+       </div>
+    </div>
+  );
+
+  const renderSelector = () => {
+    // Generate a mock matrix layout
+    const rows = ['A','B','C','D','E','V1','V2'];
+    const cols = [1,2,3,4,5,6,7,8,9,10];
+    
+    return (
+       <div className="pk-container animate-fade-in pk-flex pk-flex-col pk-items-center">
+          <div className="pk-w-full pk-flex pk-justify-between" style={{ marginBottom: '2rem' }}>
+             <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('details')}>← Back</button>
+             <h2 className="pk-heading-md">{selectedMovie.title} - {selectedShowtime}</h2>
+          </div>
+
+          <div className="pk-card" style={{ padding: '3rem', width: '100%', maxWidth: '800px' }}>
+            <div style={{ borderBottom: '6px solid var(--pk-primary-light)', paddingBottom: '1rem', textAlign: 'center', marginBottom: '3rem', borderRadius: '50% 50% 0 0 / 20px 20px 0 0' }}>
+               <span className="pk-text-muted" style={{ letterSpacing: '0.5em', textTransform: 'uppercase' }}>Screen</span>
+            </div>
+
+            <div className="pk-flex pk-flex-col pk-items-center pk-gap-4">
+              {rows.map(row => (
+                <div key={row} className="pk-flex pk-items-center" style={{ gap: '0.5rem' }}>
+                  <span style={{ width: '30px', textAlign: 'center', fontWeight: 'bold', color: 'var(--pk-text-muted)' }}>{row}</span>
+                  <div className="pk-flex" style={{ gap: '0.5rem' }}>
+                     {cols.map(col => {
+                       const seatId = `${row}${col}`;
+                       const isSelected = selectedSeats.includes(seatId);
+                       const isVip = row.startsWith('V');
+                       // Mock some random taken seats for realism based on id sum
+                       const isTaken = (row.charCodeAt(0) + col) % 7 === 0;
+
+                       return (
+                         <button
+                           key={seatId}
+                           disabled={isTaken}
+                           style={{
+                             width: '40px', height: '40px',
+                             borderRadius: '8px 8px 4px 4px',
+                             border: 'none',
+                             cursor: isTaken ? 'not-allowed' : 'pointer',
+                             background: isTaken ? 'var(--pk-border)' : 
+                                         isSelected ? 'var(--pk-primary)' : 
+                                         isVip ? '#f59e0b' : 'var(--pk-primary-light)',
+                             color: isSelected ? 'white' : 'transparent',
+                             transition: 'all 0.2s'
+                           }}
+                           onClick={() => handleSeatClick(seatId)}
+                         >
+                           {isSelected ? '✓' : ''}
+                         </button>
+                       );
+                     })}
+                  </div>
+                  <span style={{ width: '30px' }}></span>
+                </div>
+              ))}
+            </div>
+
+            <div className="pk-flex pk-justify-center" style={{ marginTop: '3rem', gap: '2rem' }}>
+              <div className="pk-flex pk-items-center pk-gap-4"><div style={{ width: 20, height: 20, background: 'var(--pk-border)', borderRadius: '4px' }}></div> Unavailable</div>
+              <div className="pk-flex pk-items-center pk-gap-4" style={{ gap: '0.5rem' }}><div style={{ width: 20, height: 20, background: 'var(--pk-primary-light)', borderRadius: '4px' }}></div> Standard (${movieBookingMockData.pricing.standard})</div>
+              <div className="pk-flex pk-items-center pk-gap-4" style={{ gap: '0.5rem' }}><div style={{ width: 20, height: 20, background: '#f59e0b', borderRadius: '4px' }}></div> VIP (${movieBookingMockData.pricing.vip})</div>
+            </div>
+          </div>
+
+          {selectedSeats.length > 0 && (
+            <div className="pk-card" style={{ position: 'fixed', bottom: '2rem', width: 'calc(100% - 4rem)', maxWidth: '800px', zIndex: 10, padding: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+               <div>
+                  <div className="pk-text-sm">Selected Seats: <span style={{ fontWeight: 600 }}>{selectedSeats.join(', ')}</span></div>
+                  <div className="pk-heading-md" style={{ color: 'var(--pk-primary)' }}>Total: ${calculateTotal().toFixed(2)}</div>
+               </div>
+               <button className="pk-btn pk-btn-primary" style={{ padding: '1rem 2rem', fontSize: '1.125rem' }} onClick={purchaseTickets}>
+                  Pay Now
+               </button>
+            </div>
+          )}
+       </div>
+    );
+  };
+
+  const renderTicket = () => {
+    const ticket = bookedTickets[bookedTickets.length - 1];
+    if (!ticket) return null;
+
+    return (
+      <div className="pk-container animate-fade-in pk-flex pk-justify-center pk-items-center" style={{ minHeight: '80vh' }}>
+         <div className="pk-card" style={{ width: '100%', maxWidth: '600px', overflow: 'hidden' }}>
+            <div className="pk-card-header" style={{ background: 'linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))', color: 'white', padding: '3rem 2rem', textAlign: 'center' }}>
+               <h1 className="pk-heading-lg" style={{ marginBottom: '0.5rem' }}>{movieBookingMockData.cinemaName}</h1>
+               <p className="pk-text-body" style={{ color: 'rgba(255,255,255,0.8)' }}>Admit {ticket.seats.length}</p>
+            </div>
+            <div className="pk-card-body" style={{ padding: '3rem 2rem' }}>
+               <h2 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{ticket.movie.title}</h2>
+               
+               <div className="pk-grid" style={{ gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
+                 <div>
+                    <p className="pk-label pk-text-muted">Date & Time</p>
+                    <p className="pk-heading-md">Today, {ticket.showtime}</p>
+                 </div>
+                 <div>
+                    <p className="pk-label pk-text-muted">Seats</p>
+                    <p className="pk-heading-md" style={{ color: 'var(--pk-primary)' }}>{ticket.seats.join(', ')}</p>
+                 </div>
+                 <div>
+                    <p className="pk-label pk-text-muted">Screen</p>
+                    <p className="pk-heading-md">IMAX 3</p>
+                 </div>
+                 <div>
+                    <p className="pk-label pk-text-muted">Booking ID</p>
+                    <p className="pk-heading-md">{ticket.id}</p>
+                 </div>
+               </div>
+
+               <div style={{ borderTop: '2px dashed var(--pk-border)', paddingTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+                  {/* Mock Barcode */}
+                  <div style={{ height: '60px', width: '80%', background: 'linear-gradient(90deg, black 0%, black 5%, transparent 5%, transparent 10%, black 10%, black 20%, transparent 20%, transparent 25%, black 25%, black 40%, transparent 40%, transparent 45%, black 45%, black 50%, transparent 50%, transparent 60%, black 60%, black 75%, transparent 75%, transparent 80%, black 80%, black 95%, transparent 95%, transparent 100%)' }}></div>
+               </div>
+            </div>
+            <div className="pk-card-footer pk-flex pk-justify-between">
+               <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('grid')}>Home</button>
+               <button className="pk-btn pk-btn-secondary" onClick={() => window.print()}>Print Ticket</button>
+            </div>
+         </div>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh' }}>
+      {isLoading && (
+        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+          <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+          <h3 className="pk-heading-md">Processing...</h3>
+        </div>
+      )}
+
+      {currentView === 'grid' && renderGrid()}
+      {currentView === 'details' && renderDetails()}
+      {currentView === 'selector' && renderSelector()}
+      {currentView === 'ticket' && renderTicket()}
+      
+      <ToastContainer />
+    </div>
+  );
+}

package/src/components/modules/QuizExamModule.jsx

@@ -0,0 +1,255 @@
+import React, { useState, useEffect } from 'react';
+import { quizExamMockData } from '../../data/systems/quizExam';
+import { useToast } from '../system/Toast';
+
+export function QuizExamModule() {
+  const [currentView, setCurrentView] = useState('selection'); // selection, exam, results
+  const [activeSubject, setActiveSubject] = useState(null);
+  
+  // Exam State
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [answers, setAnswers] = useState({});
+  const [timeRemaining, setTimeRemaining] = useState(0); // in seconds
+  const [score, setScore] = useState(0);
+  const [isPassed, setIsPassed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { showToast, ToastContainer } = useToast();
+
+  const withDelay = (callback, delay = 1000) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  // Timer Effect
+  useEffect(() => {
+    let timer;
+    if (currentView === 'exam' && timeRemaining > 0) {
+      timer = setInterval(() => setTimeRemaining(prev => prev - 1), 1000);
+    } else if (currentView === 'exam' && timeRemaining === 0) {
+      // Auto-submit when time reaches 00:00
+      handleAutoSubmit();
+    }
+    return () => clearInterval(timer);
+  }, [currentView, timeRemaining]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAutoSubmit = () => {
+    showToast("Time's up! Auto-submitting exam.", "info");
+    calculateResults();
+  };
+
+  const handleStartExam = (subject) => {
+    withDelay(() => {
+      setActiveSubject(subject);
+      setAnswers({});
+      setCurrentQuestionIndex(0);
+      setTimeRemaining(subject.duration * 60);
+      setCurrentView('exam');
+      showToast(`Started: ${subject.title}`, 'success');
+    });
+  };
+
+  const calculateResults = () => {
+    withDelay(() => {
+      let correctCount = 0;
+      activeSubject.questions.forEach(q => {
+        if (answers[q.id] === q.correct) correctCount++;
+      });
+      
+      const finalScore = (correctCount / activeSubject.questions.length) * 100;
+      setScore(finalScore);
+      setIsPassed(finalScore >= activeSubject.passingScore);
+      setCurrentView('results');
+      showToast('Exam submitted successfully.', 'success');
+    }, 2000);
+  };
+
+  const formatTime = (seconds) => {
+    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+    const s = (seconds % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+  };
+
+  const handleAnswerSelect = (qId, option) => {
+    setAnswers(prev => ({ ...prev, [qId]: option }));
+  };
+
+  // Views
+  const renderSelection = () => (
+    <div className="pk-container animate-fade-in" style={{ minHeight: '80vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+       <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+          <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{quizExamMockData.institutionName} Portal</h1>
+          <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Select a subject to begin your assessment.</p>
+       </div>
+
+       <div className="pk-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
+          {quizExamMockData.subjects.map(subject => (
+             <div key={subject.id} className="pk-card pk-card-interactive" style={{ padding: '2rem', display: 'flex', flexDirection: 'column' }}>
+                <div style={{ fontSize: '3rem', marginBottom: '1rem', opacity: 0.9 }}>{subject.icon}</div>
+                <h3 className="pk-heading-md" style={{ marginBottom: '0.5rem' }}>{subject.title}</h3>
+                <div style={{ marginBottom: '2rem', flex: 1, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                   <p className="pk-text-sm">⏱️ Duration: <span style={{ fontWeight: 600 }}>{subject.duration} Minutes</span></p>
+                   <p className="pk-text-sm">📝 Questions: <span style={{ fontWeight: 600 }}>{subject.questions.length}</span></p>
+                   <p className="pk-text-sm">🎯 Passing Score: <span style={{ fontWeight: 600 }}>{subject.passingScore}%</span></p>
+                </div>
+                <button className="pk-btn pk-btn-primary pk-w-full" onClick={() => handleStartExam(subject)}>
+                   Start Exam
+                </button>
+             </div>
+          ))}
+       </div>
+    </div>
+  );
+
+  const renderExam = () => {
+    const question = activeSubject.questions[currentQuestionIndex];
+    const isLast = currentQuestionIndex === activeSubject.questions.length - 1;
+    const progress = ((currentQuestionIndex + 1) / activeSubject.questions.length) * 100;
+
+    return (
+      <div className="pk-container animate-fade-in" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '4rem' }}>
+         {/* Top Info Bar */}
+         <div className="pk-card pk-glass" style={{ width: '100%', maxWidth: '800px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1.5rem', marginBottom: '2rem', position: 'sticky', top: '1rem', zIndex: 10 }}>
+            <div>
+               <h3 className="pk-heading-md">{activeSubject.title}</h3>
+               <p className="pk-text-sm">Question {currentQuestionIndex + 1} of {activeSubject.questions.length}</p>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+               <span className="pk-text-sm">Time Remaining:</span>
+               <span className="pk-badge" style={{ fontSize: '1.5rem', background: timeRemaining < 120 ? 'var(--pk-danger)' : 'var(--pk-primary)', color: 'white', padding: '0.5rem 1rem' }}>
+                  {formatTime(timeRemaining)}
+               </span>
+            </div>
+         </div>
+
+         {/* Question Area */}
+         <div className="pk-card" style={{ width: '100%', maxWidth: '800px', padding: '3rem', minHeight: '400px', display: 'flex', flexDirection: 'column' }}>
+            <h2 className="pk-heading-lg" style={{ marginBottom: '2.5rem' }}>{question.text}</h2>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', flex: 1 }}>
+               {question.options.map((opt, idx) => {
+                  const isSelected = answers[question.id] === opt;
+                  return (
+                     <button 
+                        key={idx}
+                        className={isSelected ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                        style={{ 
+                           justifyContent: 'flex-start', 
+                           padding: '1.5rem', 
+                           fontSize: '1.125rem',
+                           textAlign: 'left',
+                           border: isSelected ? '2px solid var(--pk-primary)' : '2px solid var(--pk-border)'
+                        }}
+                        onClick={() => handleAnswerSelect(question.id, opt)}
+                     >
+                        <span style={{ 
+                           display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                           width: '24px', height: '24px', borderRadius: '50%', marginRight: '1rem',
+                           background: isSelected ? 'white' : 'transparent',
+                           color: isSelected ? 'var(--pk-primary)' : 'var(--pk-text-muted)',
+                           border: isSelected ? 'none' : '2px solid var(--pk-border)',
+                           fontWeight: 'bold', fontSize: '0.875rem'
+                        }}>
+                           {String.fromCharCode(65 + idx)}
+                        </span>
+                        {opt}
+                     </button>
+                  )
+               })}
+            </div>
+
+            {/* Pagination / Submit */}
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '3rem', paddingTop: '2rem', borderTop: '1px solid var(--pk-border)' }}>
+               <button 
+                  className="pk-btn pk-btn-outline" 
+                  disabled={currentQuestionIndex === 0}
+                  onClick={() => setCurrentQuestionIndex(prev => prev - 1)}
+               >
+                  ← Previous
+               </button>
+
+               {/* Visual Progress inside card */}
+               <div style={{ width: '150px', background: 'var(--pk-bg-main)', height: '6px', borderRadius: '3px', position: 'relative' }}>
+                  <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', background: 'var(--pk-primary)', borderRadius: '3px', width: `${progress}%`, transition: 'width 0.3s' }}></div>
+               </div>
+
+               {isLast ? (
+                  <button className="pk-btn pk-btn-primary" onClick={calculateResults}>Submit Exam ✅</button>
+               ) : (
+                  <button className="pk-btn pk-btn-primary" onClick={() => setCurrentQuestionIndex(prev => prev + 1)}>Next →</button>
+               )}
+            </div>
+         </div>
+      </div>
+    );
+  };
+
+  const renderResults = () => {
+     // Inline CSS Circle calculation
+     const offset = 283 - (283 * score) / 100;
+     const strokeColor = isPassed ? 'var(--pk-success)' : 'var(--pk-danger)';
+
+     return (
+        <div className="pk-container animate-fade-in" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '80vh' }}>
+           <div className="pk-card" style={{ width: '100%', maxWidth: '600px', textAlign: 'center', overflow: 'hidden' }}>
+              <div style={{ background: isPassed ? 'var(--pk-success)' : 'var(--pk-danger)', color: 'white', padding: '2rem' }}>
+                 <h1 className="pk-heading-xl" style={{ marginBottom: '0.5rem' }}>{isPassed ? 'Congratulations!' : 'Exam Failed'}</h1>
+                 <p style={{ fontSize: '1.25rem', opacity: 0.9 }}>{activeSubject.title}</p>
+              </div>
+
+              <div className="pk-card-body" style={{ padding: '4rem 2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                 {/* Pure CSS Progress Circle */}
+                 <div style={{ position: 'relative', width: '160px', height: '160px', marginBottom: '2rem' }}>
+                    <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>
+                       <circle cx="50" cy="50" r="45" fill="none" stroke="var(--pk-border)" strokeWidth="8" />
+                       <circle 
+                         cx="50" cy="50" r="45" fill="none" stroke={strokeColor} strokeWidth="8" 
+                         strokeDasharray="283" strokeDashoffset={offset} strokeLinecap="round" 
+                         style={{ transition: 'stroke-dashoffset 1.5s ease-out' }}
+                       />
+                    </svg>
+                    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+                       <span className="pk-heading-lg" style={{ lineHeight: 1 }}>{Math.round(score)}%</span>
+                    </div>
+                 </div>
+
+                 <div style={{ display: 'flex', gap: '3rem', marginBottom: '2rem' }}>
+                    <div>
+                       <p className="pk-text-muted pk-label">Passing Score</p>
+                       <p className="pk-heading-md">{activeSubject.passingScore}%</p>
+                    </div>
+                    <div>
+                       <p className="pk-text-muted pk-label">Time Spent</p>
+                       <p className="pk-heading-md">{formatTime((activeSubject.duration * 60) - timeRemaining)}</p>
+                    </div>
+                 </div>
+              </div>
+
+              <div className="pk-card-footer" style={{ padding: '1.5rem', display: 'flex', justifyContent: 'center', gap: '1rem' }}>
+                 <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('selection')}>Return to Dashboard</button>
+              </div>
+           </div>
+        </div>
+     );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.8)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Processing...</h3>
+         </div>
+       )}
+
+       {currentView === 'selection' && renderSelection()}
+       {currentView === 'exam' && renderExam()}
+       {currentView === 'results' && renderResults()}
+       
+       <ToastContainer />
+    </div>
+  );
+}