onPageChange: (page: PageId) => void;

selectedProjectId: string | null;

onSelectProject: (projectId: string | null) => void;

onLoadSandboxCode: (html: string, css: string, js: string) => void;

onPageChange,

selectedProjectId,

onSelectProject,

onLoadSandboxCode

}: PageProjectsProps) {

const [activeTab, setActiveTab] = useState<'demo' | 'source'>('demo');

// Find active project metadata

const activeProject = projects.find(p => p.id === selectedProjectId) || null;

// Render project icon

const renderProjectIcon = (id: string, className: string = "h-5 w-5") => {

switch (id) {

case 'calc': return <CalcIcon className={className} />;

case 'todo': return <CheckSquare className={className} />;

case 'clock': return <Clock className={className} />;

case 'weather': return <CloudSun className={className} />;

case 'portfolio': return <User className={className} />;

case 'quiz': return <HelpCircle className={className} />;

default: return <Layers className={className} />;

}

};

const handleLoadInPlayground = () => {

if (!activeProject) return;

const source = getProjectSourceCode(activeProject.id);

onLoadSandboxCode(source.html, source.css, source.js);

onPageChange('playground');

};

return (

<div className="flex flex-col gap-8 py-4">

{!activeProject ? (

/* PROJECTS LIST VIEW */

<>

<div className="bg-white rounded-2xl border border-slate-200 p-6 md:p-8 shadow-sm text-center max-w-3xl mx-auto w-full">

<span className="text-[10px] font-bold uppercase tracking-wider bg-secondary/10 text-secondary px-3 py-1 rounded-full">

Phase 1 Live Projects Console

</span>

<h1 className="text-2xl sm:text-3xl font-bold text-slate-800 mt-4 mb-2">

Fully Operational Sandbox Applications

</h1>

<p className="text-slate-500 text-xs sm:text-sm max-w-md mx-auto leading-relaxed">

Interact with functional mini-apps coded in React, inspect their core syntax sheets, or instantly import them into the playground.

</p>

</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

{projects.map((project) => (

<div

key={project.id}

className="group bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between"

>

<div className="flex flex-col gap-4">

<div className="flex items-center justify-between">

<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 text-primary group-hover:bg-primary group-hover:text-white transition-all">

{renderProjectIcon(project.id, "h-5.5 w-5.5 text-primary group-hover:text-white")}

</div>

<div className="flex flex-col items-end">

<span className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full uppercase ${

{project.difficulty}

</span>

<span className="text-[10px] text-slate-400 mt-1 font-mono">

Build time: {project.estimatedTime}

</span>

</div>

</div>

<div>

<h3 className="text-base font-bold text-slate-850 group-hover:text-primary transition-colors">

{project.title}

</h3>

<p className="text-xs sm:text-sm text-slate-400 leading-relaxed mt-1.5">

{project.description}

</p>

</div>

</div>

<button

onClick={() => { onSelectProject(project.id); setActiveTab('demo'); }}

className="mt-6 w-full inline-flex items-center justify-center gap-2 rounded-xl bg-slate-50 border border-slate-100 py-3 text-xs font-bold text-slate-700 hover:bg-slate-900 hover:text-white transition-colors cursor-pointer"

>

Launch Live Demo

<Play className="h-3.5 w-3.5" />

</button>

</div>

))}

</div>

</>

) : (

/* SPECIFIC PROJECT INTERACTIVE WORKSPACE */

<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

{/* Backbar header controls */}

<div className="lg:col-span-12 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-slate-200 pb-4">

<button

onClick={() => onSelectProject(null)}

className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-slate-800"

>

<ArrowLeft className="h-4 w-4" />

Back to Catalog

</button>

<div className="flex items-center gap-2 bg-slate-100 p-1 rounded-xl w-full sm:w-auto">

<button

id="proj-workspace-tab-demo"

onClick={() => setActiveTab('demo')}

className={`flex-1 sm:flex-initial px-4 py-1.5 text-xs font-semibold rounded-lg transition-colors ${

>

Launch Sandbox Demo

</button>

<button

id="proj-workspace-tab-source"

onClick={() => setActiveTab('source')}

className={`flex-1 sm:flex-initial px-4 py-1.5 text-xs font-semibold rounded-lg transition-colors ${

>

Inspect Source Code

</button>

</div>

</div>

{/* LEFT PANEL: SPECIFICATIONS sidebar */}

<div className="lg:col-span-3 flex flex-col gap-4">

<div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

<div className="flex items-center gap-2.5 mb-4 border-b border-slate-100 pb-3">

<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-primary">

{renderProjectIcon(activeProject.id)}

</div>

<div>

<h2 className="text-sm font-bold text-slate-800">{activeProject.title}</h2>

<span className="text-[10px] text-slate-400">Project Module</span>

</div>

</div>

<div className="flex flex-col gap-3">

<div>

<span className="block text-[10px] uppercase font-bold text-slate-400">Difficulty Rating</span>

<span className={`inline-block text-[10px] font-bold px-2 py-0.5 rounded-full uppercase mt-1 ${

{activeProject.difficulty}

</span>

</div>

<div>

<span className="block text-[10px] uppercase font-bold text-slate-400">Estimated Duration</span>

<span className="text-xs font-semibold text-slate-700 block mt-0.5 font-mono">

{activeProject.estimatedTime}

</span>

</div>

<div>

<span className="block text-[10px] uppercase font-bold text-slate-400">Functional Summary</span>

<p className="text-xs text-slate-400 mt-1 leading-relaxed">

{activeProject.description}

</p>

</div>

</div>

<div className="mt-6 border-t border-slate-100 pt-4 flex flex-col gap-2">

<button

onClick={handleLoadInPlayground}

className="w-full inline-flex items-center justify-center gap-1.5 rounded-lg bg-slate-900 px-3.5 py-2 text-xs font-semibold text-white hover:bg-slate-800 transition-colors cursor-pointer"

>

<Code className="h-3.5 w-3.5 text-teal-400" />

Load Code in Sandbox

</button>

</div>

</div>

</div>

{/* RIGHT WORKSPACE CONTENT */}

<div className="lg:col-span-9">

{activeTab === 'demo' ? (

/* ACTIVE REACTION DEMO CONTAINER */

<div className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm min-h-[460px] flex flex-col justify-between">

<div className="bg-slate-50 px-5 py-3 border-b border-slate-100 flex items-center justify-between">

<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">

<span className="h-1.5 w-1.5 rounded-full bg-green-500" />

Interactive Simulator Canvas

</span>

<span className="text-[9px] text-slate-400 font-mono">

Rendered dynamically client-side

</span>

</div>

{/* Simulated dynamic elements based on project id */}

<div className="flex-grow flex items-center justify-center bg-slate-100/40 p-6 sm:p-8">

{activeProject.id === 'calc' && <CalculatorSimulator />}

{activeProject.id === 'todo' && <ToDoSimulator />}

{activeProject.id === 'clock' && <ClockSimulator />}

{activeProject.id === 'weather' && <WeatherSimulator />}

{activeProject.id === 'portfolio' && <PortfolioSimulator />}

{activeProject.id === 'quiz' && <QuizSimulator />}

</div>

<div className="bg-slate-50 px-5 py-2.5 border-t border-slate-100 flex items-center gap-2 text-[11px] text-slate-400 font-medium">

<Info className="h-3.5 w-3.5 text-primary shrink-0" />

<span>This application simulates real client inputs, triggers, and state validations on active DOM nodes.</span>

</div>

</div>

) : (

/* STATIC COMPREHENSIVE SOURCE CODE PREVIEW */

<div className="flex flex-col rounded-2xl border border-slate-800 bg-slate-950 overflow-hidden shadow-lg h-[460px]">

<div className="bg-slate-900 px-5 py-2.5 border-b border-slate-800 flex items-center justify-between text-xs text-slate-300 font-mono">

<span>source_structure / index.html &bull; style.css &bull; app.js</span>

<span className="text-teal-400 font-bold uppercase text-[10px]">READ ONLY</span>

</div>

<div className="flex-grow overflow-y-auto p-5 font-mono text-xs text-slate-300 whitespace-pre scrollbar-thin">

<span className="text-teal-400 block mb-1 font-bold">// ================= index.html =================</span>

<code className="text-slate-300 leading-relaxed block mb-6 pl-2 border-l border-slate-800">

{getProjectSourceCode(activeProject.id).html}

</code>

<span className="text-teal-400 block mb-1 font-bold">// ================= style.css =================</span>

<code className="text-slate-300 leading-relaxed block mb-6 pl-2 border-l border-slate-800">

{getProjectSourceCode(activeProject.id).css}

</code>

<span className="text-teal-400 block mb-1 font-bold">// ================= app.js =================</span>

<code className="text-slate-300 leading-relaxed block pl-2 border-l border-slate-800">

{getProjectSourceCode(activeProject.id).js}

</code>

</div>

</div>

)}

</div>

</div>

)}

</div>

);

const [display, setDisplay] = useState('0');

const [equation, setEquation] = useState('');

const [history, setHistory] = useState<string[]>([]);

const handleNum = (n: string) => {

if (display === '0') setDisplay(n);

else setDisplay(display + n);

};

const handleOp = (op: string) => {

setEquation(display + ' ' + op + ' ');

setDisplay('0');

};

const handleClear = () => {

setDisplay('0');

setEquation('');

};

const handleCalc = () => {

if (!equation) return;

try {

const fullEq = equation + display;

// Simple safe evaluation math

const cleanEq = fullEq.replace(/[^0-9+\-*/.]/g, '');

const res = Function(`"use strict"; return (${cleanEq})`)();

const resStr = String(res);

setDisplay(resStr);

setEquation('');

setHistory(prev => [fullEq + ' = ' + resStr, ...prev.slice(0, 4)]);

} catch (err) {

setDisplay('Error');

}

};

return (

<div className="flex flex-col sm:flex-row gap-6 bg-white p-5 rounded-2xl border border-slate-200 shadow-md w-full max-w-lg items-stretch">

<div className="flex-1 flex flex-col gap-3">

<div className="bg-slate-900 text-white rounded-xl p-4 text-right flex flex-col gap-1 justify-end h-20 overflow-hidden font-mono">

<span className="text-[10px] text-slate-500 font-bold truncate h-4">{equation}</span>

<span className="text-2xl font-bold tracking-tight">{display}</span>

</div>

<div className="grid grid-cols-4 gap-2 font-mono text-sm">

<button onClick={handleClear} className="col-span-2 p-3 bg-rose-50 text-rose-600 rounded-lg font-bold hover:bg-rose-100">C</button>

<button onClick={() => handleOp('/')} className="p-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200">/</button>

<button onClick={() => handleOp('*')} className="p-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200">*</button>

{['7','8','9'].map(n => <button key={n} onClick={() => handleNum(n)} className="p-3 bg-slate-50 text-slate-800 rounded-lg hover:bg-slate-100">{n}</button>)}

<button onClick={() => handleOp('-')} className="p-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200">-</button>

{['4','5','6'].map(n => <button key={n} onClick={() => handleNum(n)} className="p-3 bg-slate-50 text-slate-800 rounded-lg hover:bg-slate-100">{n}</button>)}

<button onClick={() => handleOp('+')} className="p-3 bg-slate-100 text-slate-700 rounded-lg font-bold hover:bg-slate-200">+</button>

{['1','2','3'].map(n => <button key={n} onClick={() => handleNum(n)} className="p-3 bg-slate-50 text-slate-800 rounded-lg hover:bg-slate-100">{n}</button>)}

<button onClick={handleCalc} className="row-span-2 p-3 bg-primary text-white rounded-lg font-bold hover:bg-primary-hover flex items-center justify-center">=</button>

<button onClick={() => handleNum('0')} className="col-span-2 p-3 bg-slate-50 text-slate-800 rounded-lg hover:bg-slate-100">0</button>

<button onClick={() => handleNum('.')} className="p-3 bg-slate-50 text-slate-800 rounded-lg hover:bg-slate-100">.</button>

</div>

</div>

<div className="w-full sm:w-40 border-t sm:border-t-0 sm:border-l border-slate-100 pt-4 sm:pt-0 sm:pl-4 flex flex-col gap-2">

<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest block">History</span>

<div className="flex flex-col gap-1.5 overflow-y-auto max-h-48 text-[11px] font-mono text-slate-500">

{history.length === 0 ? (

<span className="italic text-slate-400">No logs yet</span>

) : (

history.map((h, i) => (

<div key={i} className="truncate border-b border-slate-50 pb-1" title={h}>{h}</div>

))

)}

</div>

</div>

</div>

);

const [todos, setTodos] = useState<{ id: number; text: string; done: boolean }[]>([

{ id: 1, text: 'Review semantic HTML standards', done: true },

{ id: 2, text: 'Master flexbox layout axes', done: false },

{ id: 3, text: 'Complete JS async closures tutorial', done: false }

]);

const [newText, setNewText] = useState('');

const handleAdd = (e: React.FormEvent) => {

e.preventDefault();

if (newText.trim()) {

setTodos([...todos, { id: Date.now(), text: newText.trim(), done: false }]);

setNewText('');

}

};

const toggleTodo = (id: number) => {

setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));

};

const removeTodo = (id: number) => {

setTodos(todos.filter(t => t.id !== id));

};

const doneCount = todos.filter(t => t.done).length;

return (

<div className="bg-white rounded-2xl border border-slate-200 shadow-md p-5 w-full max-w-md flex flex-col gap-4">

<div className="flex items-center justify-between border-b border-slate-100 pb-3">

<div>

<h3 className="text-sm font-bold text-slate-800">Task Board</h3>

<span className="text-[10px] text-slate-400 font-semibold">{doneCount} of {todos.length} tasks resolved</span>

</div>

<span className="text-xs bg-blue-50 text-primary px-2.5 py-1 rounded-lg font-bold">To-Do list</span>

</div>

<form onSubmit={handleAdd} className="flex gap-1.5">

<input

type="text"

value={newText}

onChange={(e) => setNewText(e.target.value)}

placeholder="New milestone task..."

className="flex-grow border border-slate-200 px-3 py-2 rounded-xl text-xs focus:outline-none focus:border-primary text-slate-800"

/>

<button type="submit" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary hover:bg-primary-hover text-white transition-colors">

<Plus className="h-4.5 w-4.5" />

</button>

</form>

<div className="flex flex-col gap-2 overflow-y-auto max-h-52 pr-1">

{todos.length === 0 ? (

<div className="text-center py-6 text-xs text-slate-400 italic">No tasks left! Create a new one.</div>

) : (

todos.map(todo => (

<div key={todo.id} className="flex items-center justify-between p-2.5 rounded-xl bg-slate-50 hover:bg-slate-100/80 transition-colors">

<div className="flex items-center gap-2 w-[calc(100%-36px)]">

<button

onClick={() => toggleTodo(todo.id)}

className={`h-4.5 w-4.5 shrink-0 rounded border flex items-center justify-center transition-colors ${

>

{todo.done && <Check className="h-3 w-3 stroke-[3]" />}

</button>

<span className={`text-xs truncate w-full ${todo.done ? 'line-through text-slate-400' : 'text-slate-700'}`}>

{todo.text}

</span>

</div>

<button onClick={() => removeTodo(todo.id)} className="text-slate-400 hover:text-rose-500 shrink-0 p-1">

<Trash2 className="h-3.5 w-3.5" />

</button>

</div>

))

)}

</div>

</div>

);

const [time, setTime] = useState(new Date());

const [theme, setTheme] = useState<'slate' | 'cyber' | 'retro'>('slate');

useEffect(() => {

const timer = setInterval(() => setTime(new Date()), 1000);

return () => clearInterval(timer);

}, []);

const timeStr = time.toTimeString().split(' ')[0];

const dateStr = time.toDateString();

return (

<div className={`rounded-3xl p-8 shadow-md border text-center w-full max-w-sm relative overflow-hidden transition-all duration-300 ${

{/* Decorative center glow */}

<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-primary/10 filter blur-3xl rounded-full" />

<div className="flex justify-center gap-2 mb-6 relative z-10">

{['slate', 'cyber', 'retro'].map((t) => (

<button

key={t}

onClick={() => setTheme(t as any)}

className={`text-[9px] uppercase font-bold tracking-wider px-2 py-0.5 rounded transition-all ${

>

{t}

</button>

))}

</div>

<span className="block text-[10px] uppercase font-bold tracking-widest text-slate-500 relative z-10">System Date & Time</span>

<div className="text-4xl sm:text-5xl font-extrabold tracking-widest mt-3 relative z-10 select-none">

{timeStr}

</div>

<div className="text-[11px] text-slate-400 mt-3 font-medium uppercase tracking-wider relative z-10">

{dateStr}

</div>

</div>

);

const [city, setCity] = useState('San Francisco');

const [unit, setUnit] = useState<'C' | 'F'>('C');

const weatherData: Record<string, { temp: number; cond: string; hum: string; wind: string }> = {

'san francisco': { temp: 18, cond: 'Partly Sunny', hum: '62%', wind: '14 mph' },

'london': { temp: 12, cond: 'Cloudy with Rain', hum: '88%', wind: '9 mph' },

'tokyo': { temp: 22, cond: 'Clear Sky', hum: '45%', wind: '5 mph' },

'new york': { temp: 15, cond: 'Strong Winds', hum: '50%', wind: '22 mph' }

};

const data = weatherData[city.toLowerCase()] || weatherData['san francisco'];

const convertTemp = (c: number) => {

if (unit === 'C') return c;

return Math.round((c * 9/5) + 32);

};

return (

<div className="bg-white rounded-2xl border border-slate-200 shadow-md p-6 w-full max-w-sm flex flex-col gap-4">

<div className="flex items-center justify-between">

<select

value={city}

onChange={(e) => setCity(e.target.value)}

className="border border-slate-200 bg-white px-2.5 py-1.5 rounded-lg text-xs font-semibold text-slate-700 cursor-pointer"

>

<option value="San Francisco">San Francisco</option>

<option value="London">London</option>

<option value="Tokyo">Tokyo</option>

<option value="New York">New York</option>

</select>

<div className="flex gap-1 border border-slate-200 p-0.5 rounded-lg text-[10px] font-bold">

<button onClick={() => setUnit('C')} className={`px-2 py-0.5 rounded ${unit === 'C' ? 'bg-slate-900 text-white' : 'text-slate-400'}`}>&deg;C</button>

<button onClick={() => setUnit('F')} className={`px-2 py-0.5 rounded ${unit === 'F' ? 'bg-slate-900 text-white' : 'text-slate-400'}`}>&deg;F</button>

</div>

</div>

<div className="flex flex-col items-center py-4">

{data.cond.includes('Sunny') && <Sun className="h-14 w-14 text-amber-500 animate-spin duration-10000" />}

{data.cond.includes('Rain') && <CloudRain className="h-14 w-14 text-blue-400 animate-bounce" />}

{data.cond.includes('Sky') && <Sun className="h-14 w-14 text-amber-500" />}

{data.cond.includes('Winds') && <Wind className="h-14 w-14 text-slate-400 animate-pulse" />}

{(!data.cond.includes('Sunny') && !data.cond.includes('Rain') && !data.cond.includes('Sky') && !data.cond.includes('Winds')) && <CloudSun className="h-14 w-14 text-blue-500" />}

<div className="text-4xl font-extrabold text-slate-800 mt-3">

{convertTemp(data.temp)}&deg;{unit}

</div>

<span className="text-xs font-semibold text-slate-500 uppercase tracking-widest mt-1">{data.cond}</span>

</div>

<div className="grid grid-cols-2 gap-3 border-t border-slate-100 pt-4 text-center">

<div className="bg-slate-50 rounded-xl p-2">

<span className="block text-[9px] font-bold text-slate-400 uppercase">Humidity</span>

<span className="text-xs font-bold text-slate-700">{data.hum}</span>

</div>

<div className="bg-slate-50 rounded-xl p-2">

<span className="block text-[9px] font-bold text-slate-400 uppercase">Wind Velocity</span>

<span className="text-xs font-bold text-slate-700">{data.wind}</span>

</div>

</div>

</div>

);

const [activeSubTab, setActiveSubTab] = useState<'profile' | 'skills' | 'contact'>('profile');

const [msgSent, setMsgSent] = useState(false);

return (

<div className="bg-white rounded-2xl border border-slate-200 shadow-md p-5 w-full max-w-md flex flex-col gap-4">

<div className="flex items-center gap-3.5">

<div className="h-12 w-12 rounded-full bg-gradient-to-tr from-primary to-teal-400 flex items-center justify-center text-white text-base font-extrabold shadow-sm">

JD

</div>

<div>

<h3 className="text-sm font-bold text-slate-800 leading-tight">Jane Developer</h3>

<span className="text-[10px] text-teal-600 bg-teal-50 px-2 py-0.5 rounded font-bold uppercase mt-1 inline-block">Full Stack Engineer</span>

</div>

</div>

<div className="flex border-b border-slate-100 pb-1.5 gap-2">

{['profile', 'skills', 'contact'].map(tab => (

<button

key={tab}

onClick={() => setActiveSubTab(tab as any)}

className={`text-xs font-semibold px-2.5 py-1 rounded-lg uppercase tracking-wider transition-colors ${

>

{tab}

</button>

))}

</div>

<div className="min-h-[140px] flex flex-col justify-center">

{activeSubTab === 'profile' && (

<div className="flex flex-col gap-2 text-xs text-slate-400 leading-relaxed">

<span className="font-semibold text-slate-700">Bio Statement</span>

<p>I build robust client and server layout architectures. Expert in React ecosystems, semantic HTML forms, CSS layouts, and test assertion pipelines.</p>

<div className="flex gap-2 mt-2 text-[10px] font-bold text-slate-400">

<span>📍 San Francisco</span>

<span>&bull;</span>

<span>🔗 github.com/jane-dev</span>

</div>

</div>

)}

{activeSubTab === 'skills' && (

<div className="flex flex-col gap-2">

{[

{ skill: 'React & Vite', val: 95 },

{ skill: 'TypeScript Static Rules', val: 88 },

{ skill: 'Tailwind utility classes', val: 92 }

].map(s => (

<div key={s.skill} className="flex flex-col gap-0.5">

<div className="flex justify-between text-[11px] font-semibold text-slate-700">

<span>{s.skill}</span>

<span>{s.val}%</span>

</div>

<div className="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden">

<div className="bg-primary h-full" style={{ width: `${s.val}%` }} />

</div>

</div>

))}

</div>

)}

{activeSubTab === 'contact' && (

<div className="flex flex-col gap-2">

{msgSent ? (

<div className="text-center py-4 bg-green-50 rounded-xl border border-green-200/50 text-xs text-green-700 font-bold animate-pulse">

Message Received! Thank you.

</div>

) : (

<form onSubmit={(e) => { e.preventDefault(); setMsgSent(true); }} className="flex flex-col gap-2">

<input required placeholder="Your email..." className="border border-slate-200 px-3 py-1.5 rounded-lg text-xs" />

<textarea required placeholder="Your question..." rows={2} className="border border-slate-200 px-3 py-1.5 rounded-lg text-xs resize-none" />

<button type="submit" className="w-full py-1.5 rounded-lg bg-primary text-white text-[11px] font-bold">Send Message</button>

</form>

)}

</div>

)}

</div>

</div>

);

const [step, setStep] = useState(0);

const [selectedOpt, setSelectedOpt] = useState<number | null>(null);

const [verified, setVerified] = useState(false);

const [score, setScore] = useState(0);

const quiz = [

{

q: 'Which engine renders React DOM nodes on modern browsers?',

opts: ['Vite Build compiler', 'The React virtual DOM compiler', 'Standard Web browser layout engine', 'Node runtime kernel'],

corr: 2,

exp: 'React coordinates structure via its Virtual DOM, but ultimately compile outcomes are painted in browser document nodes.'

},

{

q: 'Which attribute aligns flex items along the cross axis?',

opts: ['justify-content', 'align-items', 'flex-direction', 'align-content'],

corr: 1,

exp: 'align-items centers flex elements along the cross axis (vertically if row direction, horizontally if column).'

}

];

const handleNext = () => {

if (selectedOpt === quiz[step].corr) {

setScore(score + 1);

}

setSelectedOpt(null);

setVerified(false);

setStep(step + 1);

};

const handleSelect = (idx: number) => {

if (verified) return;

setSelectedOpt(idx);

};

return (

<div className="bg-white rounded-2xl border border-slate-200 shadow-md p-5 w-full max-w-md flex flex-col justify-center min-h-[220px]">

{step < quiz.length ? (

<div className="flex flex-col gap-4">

<div className="flex justify-between items-center text-[10px] font-bold text-slate-400">

<span>QUESTION {step + 1} OF {quiz.length}</span>

<span>Score: {score}</span>

</div>

<h4 className="text-xs sm:text-sm font-bold text-slate-800 leading-relaxed">{quiz[step].q}</h4>

<div className="flex flex-col gap-2 text-xs">

{quiz[step].opts.map((opt, oIdx) => {

const isSel = selectedOpt === oIdx;

let btnClass = "border-slate-200 bg-white text-slate-700 hover:bg-slate-50";

if (isSel) btnClass = "border-primary bg-blue-50 text-primary font-semibold";

if (verified) {

if (oIdx === quiz[step].corr) btnClass = "border-green-500 bg-green-50 text-green-700 font-bold";

else if (isSel) btnClass = "border-rose-500 bg-rose-50 text-rose-700 line-through";

else btnClass = "border-slate-100 bg-white text-slate-300 opacity-60";

}

return (

<button

key={oIdx}

onClick={() => handleSelect(oIdx)}

className={`w-full p-2.5 rounded-xl border text-left transition-all ${btnClass}`}

>

{opt}

</button>

);

})}

</div>

<div className="flex justify-end mt-2">

{!verified ? (

<button

disabled={selectedOpt === null}

onClick={() => setVerified(true)}

className="px-4 py-2 rounded-lg bg-primary text-white text-xs font-semibold hover:bg-primary-hover disabled:opacity-40"

>

Verify Solution

</button>

) : (

<button

onClick={handleNext}

className="px-4 py-2 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-slate-800"

>

{step < quiz.length - 1 ? 'Next Question' : 'Complete Quiz'}

</button>

)}

</div>

</div>

) : (

<div className="text-center py-6 flex flex-col items-center gap-3">

<Sparkles className="h-10 w-10 text-amber-500 animate-bounce" />

<h4 className="text-sm font-bold text-slate-800">Review Completed!</h4>

<p className="text-xs text-slate-400">You scored {score} out of {quiz.length} correct assertions.</p>

<button

onClick={() => { setStep(0); setScore(0); setSelectedOpt(null); setVerified(false); }}

className="px-4 py-1.5 rounded-lg bg-primary text-white text-xs font-semibold hover:bg-primary-hover mt-2"

>

Restart Quiz

</button>

</div>

)}

</div>

);

switch (id) {

case 'calc':

return {

html: `<!-- Simple Display Terminal -->\n<div class="calculator">\n <div class="screen" id="view">0</div>\n <div class="grid">\n <button onclick="clear()">C</button>\n <button onclick="op('/')">/</button>\n <button onclick="num('7')">7</button>\n <button onclick="calc()">=</button>\n </div>\n</div>`,

css: `body { background: #f8fafc; }\n.calculator { border: 2px solid #2563eb; max-width: 200px; padding: 12px; border-radius: 8px; }\n.screen { font-family: monospace; text-align: right; margin-bottom: 8px; font-size: 18px; }`,

js: `// Simple safe operations\nlet state = "0";\nfunction clear() { state = "0"; update(); }\nfunction update() { document.getElementById("view").textContent = state; }`

};

case 'todo':

return {

html: `<div class="todo-app">\n <input id="in" placeholder="New Task..." />\n <button id="add">Add</button>\n <ul id="list"></ul>\n</div>`,

css: `.todo-app { padding: 16px; border: 1px solid #14B8A6; border-radius: 12px; max-width: 280px; }\nul { list-style: none; padding: 0; }`,

js: `const addBtn = document.getElementById("add");\naddBtn.addEventListener("click", () => {\n console.log("Item added");\n});`

};

case 'clock':

return {

html: `<div class="clock">\n <h1 id="time">00:00:00</h1>\n</div>`,

css: `.clock { font-family: monospace; background: #0f172a; color: #38bdf8; padding: 24px; text-align: center; }`,

js: `setInterval(() => {\n document.getElementById("time").textContent = new Date().toTimeString().split(" ")[0];\n}, 1000);`

};

case 'weather':

return {

html: `<div class="weather-box">\n <h3 id="city">Tokyo</h3>\n <span id="temp">22&deg;C</span>\n</div>`,

css: `.weather-box { text-align: center; font-family: sans-serif; border: 1px solid #ddd; padding: 16px; border-radius: 8px; }`,

js: `console.log("Weather widgets compiled successfully.");`

};

case 'portfolio':

return {

html: `<div class="portfolio">\n <h2>Jane Developer</h2>\n <p>I build structured responsive websites using semantic grids.</p>\n</div>`,

css: `.portfolio { font-family: 'Poppins', sans-serif; background: #fff; padding: 20px; border-radius: 12px; }`,

js: `console.log("Portfolio module compiled successfully.");`

};

case 'quiz':

return {

html: `<div class="quiz-card">\n <p>Which align axis handles center placement?</p>\n <button onclick="console.log('Correct! align-items aligns items along the cross axis.')">align-items</button>\n</div>`,

css: `.quiz-card { font-family: sans-serif; border: 2px solid #2563eb; padding: 16px; border-radius: 12px; }`,

js: `console.log("Quiz interactive rules compiled.");`

};

default:

return { html: '', css: '', js: '' };

}