From dc55e64f099edcb364ff0ee1c1280ce7b81ef4bf Mon Sep 17 00:00:00 2001
From: alezzz23 <moisesalejandro200713@gmail.com>
Date: Sat, 21 Feb 2026 22:16:08 -0400
Subject: [PATCH] feat: add side-by-side algorithm comparison mode

---
 src/components/AlgoViz.tsx         |  61 ++--
 src/components/CompareSelector.tsx | 157 +++++++++++
 src/components/CompareView.tsx     | 435 +++++++++++++++++++++++++++++
 src/components/Header.tsx          |  27 +-
 src/i18n/translations.ts           |  34 +++
 tsconfig.json                      |  45 ++-
 6 files changed, 715 insertions(+), 44 deletions(-)
 create mode 100644 src/components/CompareSelector.tsx
 create mode 100644 src/components/CompareView.tsx

diff --git a/src/components/AlgoViz.tsx b/src/components/AlgoViz.tsx
index 4f73293..dc9aa6e 100644
--- a/src/components/AlgoViz.tsx
+++ b/src/components/AlgoViz.tsx
@@ -18,6 +18,7 @@ import GraphVisualizer from '@components/GraphVisualizer'
 import MatrixVisualizer from '@components/MatrixVisualizer'
 import ConceptVisualizer from '@components/ConceptVisualizer'
 import CodePanel from '@components/CodePanel'
+import CompareView from '@components/CompareView'
 import type { Algorithm } from '@lib/types'
 
 const SIDEBAR_MAX = 260
@@ -63,6 +64,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
   const isMobile = useIsMobile()
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   const [mobileCodePanelOpen, setMobileCodePanelOpen] = useState(false)
+  const [viewMode, setViewMode] = useState<'normal' | 'compare'>('normal')
 
   const initialAlgorithm = initialAlgorithmId
     ? (algorithms.find((a) => a.id === initialAlgorithmId) ?? null)
@@ -213,6 +215,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
     }
   }
 
+  if (viewMode === 'compare') {
+    return (
+      <div className="h-screen flex flex-col overflow-hidden">
+        <CompareView locale={locale} onExit={() => setViewMode('normal')} />
+      </div>
+    )
+  }
+
   return (
     <div className="h-screen flex flex-col overflow-hidden">
       <Header
@@ -235,6 +245,7 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
         isMobile={isMobile}
         onToggleMobileSidebar={() => setMobileSidebarOpen((v) => !v)}
         onToggleMobileCodePanel={() => setMobileCodePanelOpen((v) => !v)}
+        onCompare={() => setViewMode('compare')}
       />
 
       {/* Main Content */}
@@ -243,9 +254,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
         {!isMobile && (
           <div className="relative shrink-0 flex">
             <aside
-              className={`bg-black overflow-hidden ${
-                sidebar.isDragging ? '' : 'transition-all duration-300 ease-in-out'
-              }`}
+              className={`bg-black overflow-hidden ${sidebar.isDragging ? '' : 'transition-all duration-300 ease-in-out'
+                }`}
               style={{
                 width: sidebar.isDragging ? sidebar.width : sidebar.collapsed ? 0 : SIDEBAR_MAX,
               }}
@@ -275,9 +285,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
             </aside>
             {/* Drag handle */}
             <div
-              className={`w-px shrink-0 cursor-col-resize group relative select-none ${
-                sidebar.collapsed && !sidebar.isDragging ? 'hidden' : ''
-              }`}
+              className={`w-px shrink-0 cursor-col-resize group relative select-none ${sidebar.collapsed && !sidebar.isDragging ? 'hidden' : ''
+                }`}
               onMouseDown={sidebar.handleDragStart}
               role="separator"
               aria-orientation="vertical"
@@ -291,9 +300,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
               }}
             >
               <div
-                className={`absolute inset-y-0 -left-0.5 w-[5px] z-20 ${
-                  sidebar.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
-                } transition-colors`}
+                className={`absolute inset-y-0 -left-0.5 w-[5px] z-20 ${sidebar.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
+                  } transition-colors`}
               />
               <div className="h-full bg-white/8" />
             </div>
@@ -304,16 +312,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
         {isMobile && (
           <>
             <div
-              className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${
-                mobileSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-              }`}
+              className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${mobileSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                }`}
               onClick={() => setMobileSidebarOpen(false)}
               aria-hidden="true"
             />
             <aside
-              className={`fixed top-0 left-0 bottom-0 w-[280px] bg-black z-50 border-r border-white/8 transition-transform duration-300 ease-in-out ${
-                mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'
-              }`}
+              className={`fixed top-0 left-0 bottom-0 w-[280px] bg-black z-50 border-r border-white/8 transition-transform duration-300 ease-in-out ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full'
+                }`}
               aria-label={locale === 'es' ? 'Categorías de algoritmos' : 'Algorithm categories'}
               aria-hidden={!mobileSidebarOpen}
               inert={!mobileSidebarOpen || undefined}
@@ -379,9 +385,8 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
           <div className="relative shrink-0 flex">
             {/* Drag handle */}
             <div
-              className={`w-px shrink-0 cursor-col-resize group relative select-none ${
-                codePanel.collapsed && !codePanel.isDragging ? 'hidden' : ''
-              }`}
+              className={`w-px shrink-0 cursor-col-resize group relative select-none ${codePanel.collapsed && !codePanel.isDragging ? 'hidden' : ''
+                }`}
               onMouseDown={codePanel.handleDragStart}
               role="separator"
               aria-orientation="vertical"
@@ -395,16 +400,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
               }}
             >
               <div
-                className={`absolute inset-y-0 -right-0.5 w-[5px] z-20 ${
-                  codePanel.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
-                } transition-colors`}
+                className={`absolute inset-y-0 -right-0.5 w-[5px] z-20 ${codePanel.isDragging ? 'bg-blue-500/50' : 'hover:bg-white/10'
+                  } transition-colors`}
               />
               <div className="h-full bg-white/8" />
             </div>
             <aside
-              className={`bg-black overflow-hidden ${
-                codePanel.isDragging ? '' : 'transition-all duration-300 ease-in-out'
-              }`}
+              className={`bg-black overflow-hidden ${codePanel.isDragging ? '' : 'transition-all duration-300 ease-in-out'
+                }`}
               style={{
                 width: codePanel.isDragging
                   ? codePanel.width
@@ -454,16 +457,14 @@ export default function AlgoViz({ locale = 'en', initialAlgorithmId }: AlgoVizPr
         {isMobile && (
           <>
             <div
-              className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${
-                mobileCodePanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-              }`}
+              className={`fixed inset-0 bg-black/60 z-40 transition-opacity duration-300 ${mobileCodePanelOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                }`}
               onClick={() => setMobileCodePanelOpen(false)}
               aria-hidden="true"
             />
             <aside
-              className={`fixed top-0 right-0 bottom-0 w-[min(360px,90vw)] bg-black z-50 border-l border-white/8 transition-transform duration-300 ease-in-out ${
-                mobileCodePanelOpen ? 'translate-x-0' : 'translate-x-full'
-              }`}
+              className={`fixed top-0 right-0 bottom-0 w-[min(360px,90vw)] bg-black z-50 border-l border-white/8 transition-transform duration-300 ease-in-out ${mobileCodePanelOpen ? 'translate-x-0' : 'translate-x-full'
+                }`}
               aria-label={locale === 'es' ? 'Panel de código y detalles' : 'Code and details panel'}
               aria-hidden={!mobileCodePanelOpen}
               inert={!mobileCodePanelOpen || undefined}
diff --git a/src/components/CompareSelector.tsx b/src/components/CompareSelector.tsx
new file mode 100644
index 0000000..335a4a7
--- /dev/null
+++ b/src/components/CompareSelector.tsx
@@ -0,0 +1,157 @@
+import { useState, useRef, useEffect } from 'react'
+import type { Algorithm } from '@lib/types'
+import type { Locale } from '@i18n/translations'
+import { translations, getCategoryName } from '@i18n/translations'
+import { algorithms, categories } from '@lib/algorithms'
+
+interface CompareSelectorProps {
+    selected: Algorithm | null
+    onSelect: (algo: Algorithm) => void
+    locale: Locale
+    label: string
+}
+
+export default function CompareSelector({ selected, onSelect, locale, label }: CompareSelectorProps) {
+    const t = translations[locale]
+    const [isOpen, setIsOpen] = useState(false)
+    const [search, setSearch] = useState('')
+    const containerRef = useRef<HTMLDivElement>(null)
+    const searchRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (isOpen && searchRef.current) {
+            searchRef.current.focus()
+        }
+    }, [isOpen])
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+                setIsOpen(false)
+                setSearch('')
+            }
+        }
+        document.addEventListener('mousedown', handler)
+        return () => document.removeEventListener('mousedown', handler)
+    }, [])
+
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setIsOpen(false)
+                setSearch('')
+            }
+        }
+        if (isOpen) {
+            window.addEventListener('keydown', handler)
+            return () => window.removeEventListener('keydown', handler)
+        }
+    }, [isOpen])
+
+    const filteredCategories = categories
+        .map((cat) => ({
+            ...cat,
+            algorithms: cat.algorithms.filter((a) =>
+                a.name.toLowerCase().includes(search.toLowerCase()),
+            ),
+        }))
+        .filter((cat) => cat.algorithms.length > 0)
+
+    return (
+        <div ref={containerRef} className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] hover:border-white/16 transition-all text-left group"
+                aria-label={label}
+                aria-expanded={isOpen}
+                aria-haspopup="listbox"
+            >
+                {selected ? (
+                    <>
+                        <span className="flex-1 text-sm text-white truncate">{selected.name}</span>
+                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/8 text-neutral-400 shrink-0">
+                            {getCategoryName(locale, selected.category)}
+                        </span>
+                    </>
+                ) : (
+                    <span className="flex-1 text-sm text-neutral-500">{t.chooseAlgorithm}</span>
+                )}
+                <svg
+                    className={`w-3.5 h-3.5 text-neutral-500 transition-transform shrink-0 ${isOpen ? 'rotate-180' : ''}`}
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M3.46966 5.46966L3.99999 4.93933L4.53032 5.46966L7.99999 8.93933L11.4697 5.46966L12 4.93933L12.5303 5.46966L13.0607 5.99999L7.99999 11.0607L2.93933 5.99999L3.46966 5.46966Z"
+                    />
+                </svg>
+            </button>
+
+            {isOpen && (
+                <div className="absolute top-full left-0 right-0 mt-1 bg-neutral-950 border border-white/12 rounded-xl shadow-2xl z-50 max-h-80 overflow-hidden flex flex-col animate-in">
+                    {/* Search */}
+                    <div className="p-2 border-b border-white/8">
+                        <input
+                            ref={searchRef}
+                            type="text"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder={t.searchAlgorithms}
+                            className="w-full bg-white/[0.04] border border-white/8 rounded-lg px-3 py-1.5 text-sm text-white placeholder:text-neutral-600 outline-none focus:border-white/20 transition-colors"
+                        />
+                    </div>
+
+                    {/* Algorithm list */}
+                    <div className="overflow-y-auto flex-1" role="listbox" aria-label={label}>
+                        {filteredCategories.map((cat) => (
+                            <div key={cat.name}>
+                                <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-neutral-600 font-semibold sticky top-0 bg-neutral-950">
+                                    {getCategoryName(locale, cat.name)}
+                                </div>
+                                {cat.algorithms.map((algo) => {
+                                    const isSelected = selected?.id === algo.id
+                                    return (
+                                        <button
+                                            key={algo.id}
+                                            onClick={() => {
+                                                onSelect(algo)
+                                                setIsOpen(false)
+                                                setSearch('')
+                                            }}
+                                            className={`w-full text-left px-3 py-2 text-sm transition-colors flex items-center gap-2 ${isSelected
+                                                    ? 'bg-white/8 text-white'
+                                                    : 'text-neutral-400 hover:bg-white/[0.04] hover:text-white'
+                                                }`}
+                                            role="option"
+                                            aria-selected={isSelected}
+                                        >
+                                            <span className="flex-1 truncate">{algo.name}</span>
+                                            <span
+                                                className={`text-[9px] px-1 py-0.5 rounded ${algo.difficulty === 'easy'
+                                                        ? 'bg-emerald-500/10 text-emerald-400'
+                                                        : algo.difficulty === 'intermediate'
+                                                            ? 'bg-amber-500/10 text-amber-400'
+                                                            : 'bg-red-500/10 text-red-400'
+                                                    }`}
+                                            >
+                                                {algo.difficulty}
+                                            </span>
+                                        </button>
+                                    )
+                                })}
+                            </div>
+                        ))}
+                        {filteredCategories.length === 0 && (
+                            <div className="px-3 py-6 text-sm text-neutral-600 text-center">
+                                No results
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/src/components/CompareView.tsx b/src/components/CompareView.tsx
new file mode 100644
index 0000000..6706e30
--- /dev/null
+++ b/src/components/CompareView.tsx
@@ -0,0 +1,435 @@
+import { useState, useCallback } from 'react'
+import type { Locale } from '@i18n/translations'
+import { translations, getAlgorithmDescription } from '@i18n/translations'
+import { usePlayback, SPEED_MAP } from '@hooks/usePlayback'
+import type { Algorithm } from '@lib/types'
+import CompareSelector from '@components/CompareSelector'
+import ArrayVisualizer from '@components/ArrayVisualizer'
+import GraphVisualizer from '@components/GraphVisualizer'
+import MatrixVisualizer from '@components/MatrixVisualizer'
+import ConceptVisualizer from '@components/ConceptVisualizer'
+
+interface CompareViewProps {
+    locale: Locale
+    onExit: () => void
+}
+
+function MiniControls({
+    currentStep,
+    totalSteps,
+    isPlaying,
+    speed,
+    onTogglePlay,
+    onStepForward,
+    onStepBackward,
+    onSpeedChange,
+    onStepChange,
+    disabled,
+    locale,
+}: {
+    currentStep: number
+    totalSteps: number
+    isPlaying: boolean
+    speed: number
+    onTogglePlay: () => void
+    onStepForward: () => void
+    onStepBackward: () => void
+    onSpeedChange: (s: number) => void
+    onStepChange: (s: number) => void
+    disabled: boolean
+    locale: Locale
+}) {
+    const t = translations[locale]
+
+    return (
+        <div className="flex items-center gap-1.5 justify-center py-2 px-3 border-t border-white/8 bg-black/40">
+            {/* Step backward */}
+            <button
+                onClick={onStepBackward}
+                disabled={disabled || currentStep <= 0}
+                className="p-1 rounded hover:bg-white/8 disabled:opacity-20 text-neutral-500 hover:text-white transition-all active:scale-95"
+                aria-label={t.stepBackward}
+            >
+                <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M10.5 14.0607L9.96966 13.5303L5.14644 8.7071C4.75592 8.31658 4.75592 7.68341 5.14644 7.29289L9.96966 2.46966L10.5 1.93933L11.5607 2.99999L11.0303 3.53032L6.56065 7.99999L11.0303 12.4697L11.5607 13L10.5 14.0607Z"
+                    />
+                </svg>
+            </button>
+
+            {/* Play/Pause */}
+            <div className="relative flex items-center justify-center">
+                {isPlaying && (
+                    <svg
+                        key={`${currentStep}-${speed}`}
+                        className="absolute top-1/2 left-1/2 pointer-events-none"
+                        style={{
+                            width: '32px',
+                            height: '32px',
+                            transform: 'translate(-50%, -50%) rotate(-90deg)',
+                        }}
+                        viewBox="0 0 32 32"
+                        aria-hidden="true"
+                    >
+                        <circle
+                            cx="16"
+                            cy="16"
+                            r="14"
+                            fill="none"
+                            stroke="#eab308"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            style={{
+                                strokeDasharray: '87.96',
+                                strokeDashoffset: '87.96',
+                                animation: `step-countdown ${SPEED_MAP[speed] || 400}ms linear forwards`,
+                            }}
+                        />
+                    </svg>
+                )}
+                <button
+                    onClick={onTogglePlay}
+                    disabled={disabled}
+                    className="w-7 h-7 rounded-full bg-white hover:bg-neutral-200 disabled:bg-neutral-800 disabled:text-neutral-600 flex items-center justify-center transition-all active:scale-95 relative z-10"
+                    aria-label={t.playPause}
+                >
+                    {isPlaying ? (
+                        <svg className="w-3 h-3 text-black" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                            <rect x="6" y="5" width="4" height="14" rx="1" />
+                            <rect x="14" y="5" width="4" height="14" rx="1" />
+                        </svg>
+                    ) : (
+                        <svg className="w-2.5 h-2.5 text-black" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M14.5528 7.77638C14.737 7.86851 14.737 8.13147 14.5528 8.2236L1.3618 14.8191C1.19558 14.9022 1 14.7813 1 14.5955L1 1.4045C1 1.21865 1.19558 1.09778 1.3618 1.18089L14.5528 7.77638Z"
+                            />
+                        </svg>
+                    )}
+                </button>
+            </div>
+
+            {/* Step forward */}
+            <button
+                onClick={onStepForward}
+                disabled={disabled || currentStep >= totalSteps - 1}
+                className="p-1 rounded hover:bg-white/8 disabled:opacity-20 text-neutral-500 hover:text-white transition-all active:scale-95"
+                aria-label={t.stepForward}
+            >
+                <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M5.50001 1.93933L6.03034 2.46966L10.8536 7.29288C11.2441 7.68341 11.2441 8.31657 10.8536 8.7071L6.03034 13.5303L5.50001 14.0607L4.43935 13L4.96968 12.4697L9.43935 7.99999L4.96968 3.53032L4.43935 2.99999L5.50001 1.93933Z"
+                    />
+                </svg>
+            </button>
+
+            {/* Progress */}
+            <div className="flex items-center gap-2 ml-1">
+                <div className="relative w-16 group cursor-pointer">
+                    <div className="h-0.5 bg-white/8 rounded-full overflow-hidden" aria-hidden="true">
+                        <div
+                            className="h-full bg-white rounded-full transition-all duration-200"
+                            style={{
+                                width: totalSteps > 1 ? `${(currentStep / (totalSteps - 1)) * 100}%` : '0%',
+                            }}
+                        />
+                    </div>
+                    <input
+                        type="range"
+                        min={0}
+                        max={Math.max(totalSteps - 1, 0)}
+                        value={currentStep}
+                        onChange={(e) => onStepChange(Number(e.target.value))}
+                        disabled={disabled}
+                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-default"
+                    />
+                </div>
+                <span className="text-[10px] text-neutral-600 font-mono tabular-nums min-w-[40px] text-right">
+                    {totalSteps > 0 ? `${currentStep + 1}/${totalSteps}` : '\u2014'}
+                </span>
+            </div>
+
+            {/* Speed */}
+            <div className="flex items-center gap-1 ml-1">
+                <input
+                    type="range"
+                    min={1}
+                    max={5}
+                    value={speed}
+                    onChange={(e) => onSpeedChange(Number(e.target.value))}
+                    className="w-10"
+                    aria-label={t.speed}
+                />
+                <span className="text-[9px] text-neutral-600 font-mono w-4">{speed}x</span>
+            </div>
+        </div>
+    )
+}
+
+function ComparePanel({
+    locale,
+    side,
+    syncSpeed,
+    onSyncSpeedChange,
+    isSynced,
+}: {
+    locale: Locale
+    side: 'left' | 'right'
+    syncSpeed: number
+    onSyncSpeedChange: (s: number) => void
+    isSynced: boolean
+}) {
+    const t = translations[locale]
+    const {
+        selectedAlgorithm,
+        steps,
+        currentStep,
+        setCurrentStep,
+        isPlaying,
+        speed,
+        setSpeed,
+        selectAlgorithm: selectAlgorithmBase,
+        stepForward,
+        stepBackward,
+        togglePlay,
+        currentStepData,
+    } = usePlayback(locale)
+
+    const selectAlgorithm = useCallback(
+        (algo: Algorithm) => {
+            selectAlgorithmBase(algo)
+        },
+        [selectAlgorithmBase],
+    )
+
+    const handleSpeedChange = useCallback(
+        (s: number) => {
+            if (isSynced) {
+                onSyncSpeedChange(s)
+            } else {
+                setSpeed(s)
+            }
+        },
+        [isSynced, onSyncSpeedChange, setSpeed],
+    )
+
+    const effectiveSpeed = isSynced ? syncSpeed : speed
+
+    const renderVisualization = () => {
+        if (!selectedAlgorithm || !currentStepData) {
+            return (
+                <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center px-4">
+                    <div className="w-10 h-10 rounded-xl bg-white/[0.03] flex items-center justify-center border border-white/8">
+                        <svg
+                            className="w-5 h-5 text-neutral-600"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth={1.5}
+                            aria-hidden="true"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+                            />
+                        </svg>
+                    </div>
+                    <p className="text-sm text-neutral-500">{t.chooseAlgorithm}</p>
+                </div>
+            )
+        }
+
+        switch (selectedAlgorithm.visualization) {
+            case 'array':
+                return <ArrayVisualizer step={currentStepData} />
+            case 'graph':
+                return <GraphVisualizer step={currentStepData} locale={locale} />
+            case 'matrix':
+                return <MatrixVisualizer step={currentStepData} />
+            case 'concept':
+                return <ConceptVisualizer step={currentStepData} />
+            default:
+                return null
+        }
+    }
+
+    return (
+        <div className="flex-1 flex flex-col min-w-0 min-h-0">
+            {/* Selector */}
+            <div className="p-3 border-b border-white/8">
+                <CompareSelector
+                    selected={selectedAlgorithm}
+                    onSelect={selectAlgorithm}
+                    locale={locale}
+                    label={side === 'left' ? t.selectLeftAlgorithm : t.selectRightAlgorithm}
+                />
+            </div>
+
+            {/* Visualization */}
+            <div className="flex-1 flex flex-col p-4 overflow-auto min-h-0">
+                {renderVisualization()}
+            </div>
+
+            {/* Step description */}
+            {currentStepData?.description && (
+                <div className="px-3 pb-2" aria-live="polite">
+                    <div className="text-xs text-neutral-300 bg-white/[0.03] rounded-lg px-3 py-2 border border-white/8">
+                        <span className="text-amber-300/90 font-medium mr-1.5">
+                            {t.step.replace('{n}', String(currentStep + 1))}
+                        </span>
+                        {currentStepData.description}
+                    </div>
+                </div>
+            )}
+
+            {/* Controls */}
+            <MiniControls
+                currentStep={currentStep}
+                totalSteps={steps.length}
+                isPlaying={isPlaying}
+                speed={effectiveSpeed}
+                onTogglePlay={togglePlay}
+                onStepForward={stepForward}
+                onStepBackward={stepBackward}
+                onSpeedChange={handleSpeedChange}
+                onStepChange={setCurrentStep}
+                disabled={!selectedAlgorithm}
+                locale={locale}
+            />
+
+            {/* Algorithm info */}
+            {selectedAlgorithm && (
+                <div className="px-3 py-2 border-t border-white/8">
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs font-medium text-white truncate">{selectedAlgorithm.name}</span>
+                        <span
+                            className={`text-[9px] px-1.5 py-0.5 rounded shrink-0 ${selectedAlgorithm.difficulty === 'easy'
+                                    ? 'bg-emerald-500/10 text-emerald-400'
+                                    : selectedAlgorithm.difficulty === 'intermediate'
+                                        ? 'bg-amber-500/10 text-amber-400'
+                                        : 'bg-red-500/10 text-red-400'
+                                }`}
+                        >
+                            {selectedAlgorithm.difficulty}
+                        </span>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default function CompareView({ locale, onExit }: CompareViewProps) {
+    const t = translations[locale]
+    const [isSynced, setIsSynced] = useState(false)
+    const [syncSpeed, setSyncSpeed] = useState(2)
+
+    return (
+        <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+            {/* Compare header */}
+            <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/8 bg-black shrink-0">
+                <div className="flex items-center gap-3">
+                    <h2 className="text-sm font-semibold text-white font-heading">
+                        {t.compareModeTitle}
+                    </h2>
+                </div>
+                <div className="flex items-center gap-2">
+                    {/* Sync button */}
+                    <button
+                        onClick={() => setIsSynced(!isSynced)}
+                        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all ${isSynced
+                                ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30'
+                                : 'bg-white/[0.04] text-neutral-500 border border-white/8 hover:bg-white/[0.06] hover:text-neutral-400'
+                            }`}
+                        aria-label={t.syncPlayback}
+                        aria-pressed={isSynced}
+                    >
+                        <svg
+                            className="w-3.5 h-3.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth={2}
+                            aria-hidden="true"
+                        >
+                            {isSynced ? (
+                                <>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m9.07-9.07a4.5 4.5 0 00-6.364 0l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+                                </>
+                            ) : (
+                                <>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.181 8.68a4.503 4.503 0 011.903 1.415M7.5 21.5l3-3m0 0l-4.5-4.5a4.5 4.5 0 010-6.364m4.5 10.864l1.757-1.757M16.5 2.5l-3 3m0 0l4.5 4.5a4.5 4.5 0 010 6.364M13.5 5.5L11.743 7.257" />
+                                </>
+                            )}
+                        </svg>
+                        <span className="hidden sm:inline">{t.syncPlayback}</span>
+                    </button>
+
+                    {/* Exit button */}
+                    <button
+                        onClick={onExit}
+                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-white/[0.04] text-neutral-400 border border-white/8 hover:bg-white/[0.06] hover:text-white transition-all text-xs"
+                        aria-label={t.exitCompare}
+                    >
+                        <svg
+                            className="w-3.5 h-3.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth={2}
+                            aria-hidden="true"
+                        >
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                        <span className="hidden sm:inline">{t.exitCompare}</span>
+                    </button>
+                </div>
+            </div>
+
+            {/* Panels */}
+            <div className="flex-1 flex flex-col md:flex-row min-h-0 overflow-hidden">
+                {/* Left panel */}
+                <div className="flex-1 flex flex-col min-h-0 min-w-0 border-b md:border-b-0 md:border-r border-white/8">
+                    <ComparePanel
+                        locale={locale}
+                        side="left"
+                        syncSpeed={syncSpeed}
+                        onSyncSpeedChange={setSyncSpeed}
+                        isSynced={isSynced}
+                    />
+                </div>
+
+                {/* VS divider */}
+                <div className="hidden md:flex items-center justify-center w-0 relative">
+                    <div className="absolute z-10 w-8 h-8 rounded-full bg-neutral-900 border border-white/12 flex items-center justify-center">
+                        <span className="text-[10px] font-bold text-neutral-500 uppercase">{t.vs}</span>
+                    </div>
+                </div>
+
+                {/* Mobile VS divider */}
+                <div className="flex md:hidden items-center justify-center py-0 relative">
+                    <div className="absolute z-10 w-7 h-7 rounded-full bg-neutral-900 border border-white/12 flex items-center justify-center">
+                        <span className="text-[9px] font-bold text-neutral-500 uppercase">{t.vs}</span>
+                    </div>
+                </div>
+
+                {/* Right panel */}
+                <div className="flex-1 flex flex-col min-h-0 min-w-0">
+                    <ComparePanel
+                        locale={locale}
+                        side="right"
+                        syncSpeed={syncSpeed}
+                        onSyncSpeedChange={setSyncSpeed}
+                        isSynced={isSynced}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 69e1236..2ab3288 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -25,6 +25,8 @@ interface HeaderProps {
   isMobile?: boolean
   onToggleMobileSidebar?: () => void
   onToggleMobileCodePanel?: () => void
+  // Compare mode
+  onCompare?: () => void
 }
 
 function getLocaleUrl(targetLocale: Locale, algorithmId?: string) {
@@ -55,6 +57,7 @@ export default function Header({
   isMobile = false,
   onToggleMobileSidebar,
   onToggleMobileCodePanel,
+  onCompare,
 }: HeaderProps) {
   return (
     <header
@@ -196,16 +199,34 @@ export default function Header({
             </svg>
           </button>
         )}
+        {onCompare && (
+          <button
+            onClick={onCompare}
+            className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-white/[0.04] border border-white/8 hover:bg-white/[0.08] hover:border-white/16 transition-all text-neutral-400 hover:text-white"
+            aria-label={t.compareButton}
+          >
+            <svg
+              className="w-3.5 h-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              aria-hidden="true"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 4.5v15m6-15v15M4.5 4.5h15a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5h-15A1.5 1.5 0 013 18V6a1.5 1.5 0 011.5-1.5z" />
+            </svg>
+            <span className="text-[11px] font-medium hidden sm:inline">{t.compareButton}</span>
+          </button>
+        )}
         <nav aria-label={locale === 'es' ? 'Idioma' : 'Language'} className="flex items-center gap-0.5 bg-white/6 rounded-lg p-0.5 border border-white/8">
           {locales.map((l) => (
             <a
               key={l}
               href={getLocaleUrl(l, selectedAlgorithm?.id)}
-              className={`px-2 md:px-2.5 py-1 text-[11px] font-medium rounded-md transition-all ${
-                l === locale
+              className={`px-2 md:px-2.5 py-1 text-[11px] font-medium rounded-md transition-all ${l === locale
                   ? 'bg-white text-black'
                   : 'text-neutral-500 hover:text-white hover:bg-white/6'
-              }`}
+                }`}
               aria-label={localeNames[l]}
               aria-current={l === locale ? 'page' : undefined}
               lang={l}
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index ac152b9..ee80ae1 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -61,6 +61,18 @@ export interface Translations {
 
   // Algorithm descriptions
   algorithmDescriptions: Record<string, string>
+
+  // Compare mode
+  compareButton: string
+  compareModeTitle: string
+  selectAlgorithm: string
+  selectLeftAlgorithm: string
+  selectRightAlgorithm: string
+  syncPlayback: string
+  exitCompare: string
+  vs: string
+  chooseAlgorithm: string
+  searchAlgorithms: string
 }
 
 export const translations: Record<Locale, Translations> = {
@@ -972,6 +984,17 @@ Properties:
 
 The puzzle was invented by mathematician Édouard Lucas in 1883. Legend says monks in a temple are moving 64 golden disks — completing the puzzle would mark the end of the world (requiring 18,446,744,073,709,551,615 moves).`,
     },
+
+    compareButton: 'Compare',
+    compareModeTitle: 'Side-by-Side Comparison',
+    selectAlgorithm: 'Select algorithm',
+    selectLeftAlgorithm: 'Select left algorithm',
+    selectRightAlgorithm: 'Select right algorithm',
+    syncPlayback: 'Sync playback',
+    exitCompare: 'Exit comparison',
+    vs: 'vs',
+    chooseAlgorithm: 'Choose an algorithm to compare',
+    searchAlgorithms: 'Search algorithms...',
   },
 
   es: {
@@ -1882,6 +1905,17 @@ Propiedades:
 
 El rompecabezas fue inventado por el matemático Édouard Lucas en 1883. La leyenda dice que monjes en un templo están moviendo 64 discos dorados — completar el rompecabezas marcaría el fin del mundo (requiriendo 18.446.744.073.709.551.615 movimientos).`,
     },
+
+    compareButton: 'Comparar',
+    compareModeTitle: 'Comparación Lado a Lado',
+    selectAlgorithm: 'Seleccionar algoritmo',
+    selectLeftAlgorithm: 'Seleccionar algoritmo izquierdo',
+    selectRightAlgorithm: 'Seleccionar algoritmo derecho',
+    syncPlayback: 'Sincronizar reproducción',
+    exitCompare: 'Salir de comparación',
+    vs: 'vs',
+    chooseAlgorithm: 'Elige un algoritmo para comparar',
+    searchAlgorithms: 'Buscar algoritmos...',
   },
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 7e1bc26..886cf6b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,41 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@components/*": ["src/components/*"],
-      "@layouts/*": ["src/layouts/*"],
-      "@lib/*": ["src/lib/*"],
-      "@hooks/*": ["src/hooks/*"],
-      "@i18n/*": ["src/i18n/*"],
-      "@assets/*": ["src/assets/*"],
-      "@styles/*": ["src/styles/*"]
+      "@/*": [
+        "src/*"
+      ],
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
+      "@lib/*": [
+        "src/lib/*"
+      ],
+      "@hooks/*": [
+        "src/hooks/*"
+      ],
+      "@i18n/*": [
+        "src/i18n/*"
+      ],
+      "@assets/*": [
+        "src/assets/*"
+      ],
+      "@styles/*": [
+        "src/styles/*"
+      ]
     }
   }
-}
+}
\ No newline at end of file