Update src/App.js

src/App.js

@@ -173,10 +173,12 @@ const UrologyLeaderboard = () => {
 
   const getRankIcon = (index) => {
     switch(index) {
-      case 0: return <span className="text-2xl">🏆</span>;
-      case 1: return <span className="text-2xl">🥈</span>;
-      case 2: return <span className="text-2xl">🥉</span>;
-      default: return <span className="text-xl font-bold text-gray-500">#{index + 1}</span>;
+      case 0: return React.createElement('span', { style: { fontSize: '24px' } }, '🏆');
+      case 1: return React.createElement('span', { style: { fontSize: '24px' } }, '🥈');
+      case 2: return React.createElement('span', { style: { fontSize: '24px' } }, '🥉');
+      default: return React.createElement('span', { 
+        style: { fontSize: '20px', fontWeight: 'bold', color: '#9ca3af' } 
+      }, `#${index + 1}`);
     }
   };
 
@@ -202,238 +204,449 @@ const UrologyLeaderboard = () => {
   };
 
   const getSortIcon = (column) => {
-    if (sortBy !== column) return <span className="text-gray-400">↕️</span>;
+    if (sortBy !== column) {
+      return React.createElement('span', { style: { color: '#9ca3af' } }, '↕️');
+    }
     return sortOrder === 'desc' ? 
-      <span className="text-blue-500">⬇️</span> : 
-      <span className="text-blue-500">⬆️</span>;
+      React.createElement('span', { style: { color: '#3b82f6' } }, '⬇️') : 
+      React.createElement('span', { style: { color: '#3b82f6' } }, '⬆️');
+  };
+
+  const styles = {
+    container: {
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3730a3 100%)',
+      padding: '32px 16px'
+    },
+    innerContainer: {
+      maxWidth: '1200px',
+      margin: '0 auto'
+    },
+    header: {
+      textAlign: 'center',
+      marginBottom: '32px'
+    },
+    title: {
+      fontSize: '48px',
+      fontWeight: 'bold',
+      color: 'white',
+      marginBottom: '16px',
+      background: 'linear-gradient(to right, #60a5fa, #a78bfa)',
+      WebkitBackgroundClip: 'text',
+      backgroundClip: 'text',
+      color: 'transparent'
+    },
+    subtitle: {
+      fontSize: '20px',
+      color: '#d1d5db',
+      marginBottom: '24px'
+    },
+    statsContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      gap: '32px',
+      textAlign: 'center',
+      flexWrap: 'wrap'
+    },
+    statCard: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '12px',
+      padding: '16px'
+    },
+    statNumber: {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      color: 'white'
+    },
+    statLabel: {
+      fontSize: '14px',
+      color: '#d1d5db'
+    },
+    controlsContainer: {
+      marginBottom: '24px',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '16px',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    inputGroup: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '16px',
+      alignItems: 'center'
+    },
+    inputContainer: {
+      position: 'relative'
+    },
+    inputIcon: {
+      position: 'absolute',
+      left: '12px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      color: '#9ca3af'
+    },
+    input: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '8px',
+      color: 'white',
+      padding: '8px 12px 8px 40px',
+      outline: 'none',
+      fontSize: '14px'
+    },
+    select: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '8px',
+      color: 'white',
+      padding: '8px 32px 8px 40px',
+      outline: 'none',
+      fontSize: '14px'
+    },
+    updateButton: {
+      background: '#059669',
+      color: 'white',
+      border: 'none',
+      borderRadius: '8px',
+      padding: '8px 16px',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      fontSize: '14px'
+    },
+    tableCard: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '12px',
+      overflow: 'hidden'
+    },
+    tableContainer: {
+      overflowX: 'auto'
+    },
+    scrollContainer: {
+      maxHeight: '384px',
+      overflowY: 'auto'
+    },
+    table: {
+      width: '100%',
+      borderCollapse: 'collapse'
+    },
+    tableHeader: {
+      position: 'sticky',
+      top: 0,
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+    },
+    th: {
+      padding: '16px 24px',
+      textAlign: 'left',
+      color: 'white',
+      fontWeight: '600'
+    },
+    thClickable: {
+      padding: '16px 24px',
+      textAlign: 'left',
+      color: 'white',
+      fontWeight: '600',
+      cursor: 'pointer'
+    },
+    tr: {
+      borderBottom: '1px solid rgba(255, 255, 255, 0.05)'
+    },
+    td: {
+      padding: '16px 24px'
+    },
+    progressBar: {
+      width: '100%',
+      background: '#374151',
+      borderRadius: '4px',
+      height: '8px'
+    },
+    progressFill: {
+      background: 'linear-gradient(to right, #3b82f6, #8b5cf6)',
+      height: '8px',
+      borderRadius: '4px',
+      transition: 'width 0.5s ease'
+    },
+    badge: {
+      padding: '4px 8px',
+      borderRadius: '12px',
+      fontSize: '12px',
+      fontWeight: '500'
+    },
+    badgeBlue: {
+      background: 'rgba(59, 130, 246, 0.2)',
+      color: '#93c5fd'
+    },
+    badgeGreen: {
+      background: 'rgba(34, 197, 94, 0.2)',
+      color: '#86efac'
+    },
+    badgePurple: {
+      background: 'rgba(147, 51, 234, 0.2)',
+      color: '#c4b5fd'
+    },
+    infoSection: {
+      marginTop: '32px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    },
+    infoCard: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '12px',
+      padding: '24px'
+    },
+    academicCard: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 255, 255, 0.2)',
+      borderRadius: '12px',
+      padding: '16px',
+      textAlign: 'center'
+    },
+    loadingContainer: {
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3730a3 100%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    spinner: {
+      width: '64px',
+      height: '64px',
+      border: '2px solid transparent',
+      borderBottom: '2px solid white',
+      borderRadius: '50%',
+      animation: 'spin 1s linear infinite',
+      margin: '0 auto 16px'
+    }
   };
 
   if (loading) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-white mb-4 mx-auto"></div>
-          <p className="text-white text-xl">Loading leaderboard...</p>
-        </div>
-      </div>
+    return React.createElement('div', { style: styles.loadingContainer },
+      React.createElement('div', { style: { textAlign: 'center' } },
+        React.createElement('div', { style: styles.spinner }),
+        React.createElement('p', { style: { color: 'white', fontSize: '20px' } }, 'Loading leaderboard...')
+      )
     );
   }
 
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900">
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center mb-8">
-          <h1 className="text-5xl font-bold text-white mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
-            🏆 Urology AI Leaderboard
-          </h1>
-          <p className="text-xl text-gray-300 mb-6">
-            Evaluating Natural Language Models on Urology Knowledge Assessment
-          </p>
-          <div className="flex justify-center space-x-8 text-center">
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
-              <div className="text-2xl font-bold text-white">{data.length}</div>
-              <div className="text-sm text-gray-300">Models</div>
-            </div>
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
-              <div className="text-2xl font-bold text-white">151</div>
-              <div className="text-sm text-gray-300">Questions</div>
-            </div>
-            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
-              <div className="text-2xl font-bold text-white">SAS Urology</div>
-              <div className="text-sm text-gray-300">Specialty</div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mb-6 flex flex-wrap gap-4 items-center justify-between">
-          <div className="flex flex-wrap gap-4 items-center">
-            <div className="relative">
-              <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">🔍</span>
-              <input
-                type="text"
-                placeholder="Search model..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10 pr-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-            </div>
-            
-            <div className="relative">
-              <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">📋</span>
-              <select
-                value={filterLicense}
-                onChange={(e) => setFilterLicense(e.target.value)}
-                className="pl-10 pr-8 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none"
-              >
-                <option value="all">All licenses</option>
-                <option value="API Service">API Service</option>
-                <option value="Apache 2.0">Apache 2.0</option>
-                <option value="MIT">MIT</option>
-              </select>
-            </div>
-          </div>
-
-          <button 
-            onClick={refreshData}
-            disabled={refreshing}
-            className="flex items-center space-x-2 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-600/50 text-white rounded-lg transition-colors"
-          >
-            <span className={refreshing ? 'animate-spin' : ''}>🔄</span>
-            <span>{refreshing ? 'Updating...' : 'Update'}</span>
-          </button>
-        </div>
-
-        <div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden">
-          <div className="overflow-x-auto">
-            <div className="max-h-96 overflow-y-auto">
-              <table className="w-full">
-                <thead className="sticky top-0 bg-white/10 backdrop-blur-sm">
-                  <tr className="border-b border-white/10">
-                    <th className="px-6 py-4 text-left text-white font-semibold">Rank</th>
-                    <th className="px-6 py-4 text-left text-white font-semibold">Model</th>
-                    <th 
-                      className="px-6 py-4 text-left text-white font-semibold cursor-pointer hover:bg-white/5 transition-colors"
-                      onClick={() => {
+  return React.createElement('div', null,
+    React.createElement('style', null, `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      .rotate {
+        animation: spin 1s linear infinite;
+      }
+      .hover-row:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+      input::placeholder {
+        color: #9ca3af;
+      }
+      select option {
+        background: #1f2937;
+        color: white;
+      }
+    `),
+    React.createElement('div', { style: styles.container },
+      React.createElement('div', { style: styles.innerContainer },
+        React.createElement('div', { style: styles.header },
+          React.createElement('h1', { style: styles.title }, '🏆 Urology AI Leaderboard'),
+          React.createElement('p', { style: styles.subtitle }, 'Evaluating Natural Language Models on Urology Knowledge Assessment'),
+          React.createElement('div', { style: styles.statsContainer },
+            React.createElement('div', { style: styles.statCard },
+              React.createElement('div', { style: styles.statNumber }, data.length),
+              React.createElement('div', { style: styles.statLabel }, 'Models')
+            ),
+            React.createElement('div', { style: styles.statCard },
+              React.createElement('div', { style: styles.statNumber }, '151'),
+              React.createElement('div', { style: styles.statLabel }, 'Questions')
+            ),
+            React.createElement('div', { style: styles.statCard },
+              React.createElement('div', { style: styles.statNumber }, 'SAS Urology'),
+              React.createElement('div', { style: styles.statLabel }, 'Specialty')
+            )
+          )
+        ),
+        React.createElement('div', { style: styles.controlsContainer },
+          React.createElement('div', { style: styles.inputGroup },
+            React.createElement('div', { style: styles.inputContainer },
+              React.createElement('span', { style: styles.inputIcon }, '🔍'),
+              React.createElement('input', {
+                type: 'text',
+                placeholder: 'Search model...',
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                style: styles.input
+              })
+            ),
+            React.createElement('div', { style: styles.inputContainer },
+              React.createElement('span', { style: styles.inputIcon }, '📋'),
+              React.createElement('select', {
+                value: filterLicense,
+                onChange: (e) => setFilterLicense(e.target.value),
+                style: styles.select
+              },
+                React.createElement('option', { value: 'all' }, 'All licenses'),
+                React.createElement('option', { value: 'API Service' }, 'API Service'),
+                React.createElement('option', { value: 'Apache 2.0' }, 'Apache 2.0'),
+                React.createElement('option', { value: 'MIT' }, 'MIT')
+              )
+            )
+          ),
+          React.createElement('button', {
+            onClick: refreshData,
+            disabled: refreshing,
+            style: { ...styles.updateButton, opacity: refreshing ? 0.5 : 1 }
+          },
+            React.createElement('span', { className: refreshing ? 'rotate' : '' }, '🔄'),
+            React.createElement('span', null, refreshing ? 'Updating...' : 'Update')
+          )
+        ),
+        React.createElement('div', { style: styles.tableCard },
+          React.createElement('div', { style: styles.tableContainer },
+            React.createElement('div', { style: styles.scrollContainer },
+              React.createElement('table', { style: styles.table },
+                React.createElement('thead', { style: styles.tableHeader },
+                  React.createElement('tr', null,
+                    React.createElement('th', { style: styles.th }, 'Rank'),
+                    React.createElement('th', { style: styles.th }, 'Model'),
+                    React.createElement('th', {
+                      style: styles.thClickable,
+                      onClick: () => {
                         if (sortBy === 'accuracy') {
                           setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
                         } else {
                           setSortBy('accuracy');
                           setSortOrder('desc');
                         }
-                      }}
-                    >
-                      <div className="flex items-center space-x-1">
-                        <span>🎯</span>
-                        <span>Accuracy</span>
-                        {getSortIcon('accuracy')}
-                      </div>
-                    </th>
-                    <th className="px-6 py-4 text-left text-white font-semibold">Answers</th>
-                    <th className="px-6 py-4 text-left text-white font-semibold">Parameters</th>
-                    <th className="px-6 py-4 text-left text-white font-semibold">License</th>
-                    <th 
-                      className="px-6 py-4 text-left text-white font-semibold cursor-pointer hover:bg-white/5 transition-colors"
-                      onClick={() => {
+                      }
+                    },
+                      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '4px' } },
+                        React.createElement('span', null, '🎯'),
+                        React.createElement('span', null, 'Accuracy'),
+                        getSortIcon('accuracy')
+                      )
+                    ),
+                    React.createElement('th', { style: styles.th }, 'Answers'),
+                    React.createElement('th', { style: styles.th }, 'Parameters'),
+                    React.createElement('th', { style: styles.th }, 'License'),
+                    React.createElement('th', {
+                      style: styles.thClickable,
+                      onClick: () => {
                         if (sortBy === 'submittedTime') {
                           setSortOrder(sortOrder === 'desc' ? 'asc' : 'desc');
                         } else {
                           setSortBy('submittedTime');
                           setSortOrder('desc');
                         }
-                      }}
-                    >
-                      <div className="flex items-center space-x-1">
-                        <span>🕒</span>
-                        <span>Date</span>
-                        {getSortIcon('submittedTime')}
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {filteredAndSortedData.map((item, index) => (
-                    <tr 
-                      key={item.model} 
-                      className="border-b border-white/5 hover:bg-white/5 transition-colors group"
-                    >
-                      <td className="px-6 py-4">
-                        <div className="flex items-center">
-                          {getRankIcon(index)}
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="flex flex-col">
-                          <div className="flex items-center space-x-2">
-                            <span className="text-white font-medium">{item.model.split('/').pop()}</span>
-                            <span className="text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">🔗</span>
-                          </div>
-                          <span className="text-sm text-gray-400">{item.model.split('/')[0]}</span>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="flex items-center space-x-3">
-                          <div className="flex-1">
-                            <div className="flex items-center justify-between mb-1">
-                              <span className="text-white font-semibold">{formatAccuracy(item.accuracy)}</span>
-                            </div>
-                            <div className="w-full bg-gray-700 rounded-full h-2">
-                              <div 
-                                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-500"
-                                style={{ width: `${item.accuracy * 100}%` }}
-                              ></div>
-                            </div>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="text-center">
-                          <div className="text-white font-semibold">{item.correctAnswers}/{item.totalQuestions}</div>
-                          <div className="text-sm text-gray-400">correct</div>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="flex items-center space-x-2">
-                          <span>⚡</span>
-                          <span className="text-white">{formatParams(item.params)}</span>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4">
-                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
-                          item.license === 'API Service' 
-                            ? 'bg-blue-500/20 text-blue-300' 
-                            : item.license === 'Apache 2.0'
-                            ? 'bg-green-500/20 text-green-300'
-                            : 'bg-purple-500/20 text-purple-300'
-                        }`}>
-                          {item.license}
-                        </span>
-                      </td>
-                      <td className="px-6 py-4">
-                        <div className="text-sm text-gray-300">
-                          {formatDate(item.submittedTime)}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-8 space-y-6">
-          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
-            <h3 className="text-xl font-semibold text-white mb-3">📊 About This Evaluation</h3>
-            <p className="text-gray-300 mb-3">
-              This leaderboard evaluates natural language models on their ability to answer urology questions. 
-              Models must respond to multiple-choice questions about urological knowledge, demonstrating their understanding and mastery of this medical specialty.
-            </p>
-            <p className="text-gray-300 mb-4">
-              Questions are from the SAS (Servicio Andaluz de Salud) for the <strong>Convocatoria Concurso Oposición</strong> - specialized medical examination for urology residents.
-            </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4 text-gray-300">
-              <span>Dataset: <a href="https://huggingface.co/datasets/SASLeaderboard/results" className="text-blue-400 hover:text-blue-300 transition-colors">SASLeaderboard/results</a></span>
-              {lastUpdated && (
-                <span className="text-sm">
-                  Last updated: {lastUpdated.toLocaleString('en-US')}
-                </span>
-              )}
-            </div>
-          </div>
-          
-          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20">
-            <div className="text-center">
-              <h4 className="text-lg font-semibold text-white mb-2">🎓 Academic Project</h4>
-              <p className="text-gray-300 text-sm">
-                Final project for IES Rafael Alberti<br/>
-                Course: Artificial Intelligence and Big Data<br/>
-                Subject: Artificial Intelligence Models
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                      }
+                    },
+                      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '4px' } },
+                        React.createElement('span', null, '🕒'),
+                        React.createElement('span', null, 'Date'),
+                        getSortIcon('submittedTime')
+                      )
+                    )
+                  )
+                ),
+                React.createElement('tbody', null,
+                  filteredAndSortedData.map((item, index) =>
+                    React.createElement('tr', {
+                      key: item.model,
+                      style: styles.tr,
+                      className: 'hover-row'
+                    },
+                      React.createElement('td', { style: styles.td }, getRankIcon(index)),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
+                          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                            React.createElement('span', { style: { color: 'white', fontWeight: '500' } }, item.model.split('/').pop()),
+                            React.createElement('span', { style: { color: '#9ca3af', cursor: 'pointer' } }, '🔗')
+                          ),
+                          React.createElement('span', { style: { fontSize: '14px', color: '#9ca3af' } }, item.model.split('/')[0])
+                        )
+                      ),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+                          React.createElement('div', { style: { flex: 1 } },
+                            React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' } },
+                              React.createElement('span', { style: { color: 'white', fontWeight: '600' } }, formatAccuracy(item.accuracy))
+                            ),
+                            React.createElement('div', { style: styles.progressBar },
+                              React.createElement('div', {
+                                style: { ...styles.progressFill, width: `${item.accuracy * 100}%` }
+                              })
+                            )
+                          )
+                        )
+                      ),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('div', { style: { textAlign: 'center' } },
+                          React.createElement('div', { style: { color: 'white', fontWeight: '600' } }, `${item.correctAnswers}/${item.totalQuestions}`),
+                          React.createElement('div', { style: { fontSize: '14px', color: '#9ca3af' } }, 'correct')
+                        )
+                      ),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                          React.createElement('span', null, '⚡'),
+                          React.createElement('span', { style: { color: 'white' } }, formatParams(item.params))
+                        )
+                      ),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('span', {
+                          style: {
+                            ...styles.badge,
+                            ...(item.license === 'API Service' ? styles.badgeBlue :
+                                item.license === 'Apache 2.0' ? styles.badgeGreen : styles.badgePurple)
+                          }
+                        }, item.license)
+                      ),
+                      React.createElement('td', { style: styles.td },
+                        React.createElement('div', { style: { fontSize: '14px', color: '#d1d5db' } }, formatDate(item.submittedTime))
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          )
+        ),
+        React.createElement('div', { style: styles.infoSection },
+          React.createElement('div', { style: styles.infoCard },
+            React.createElement('h3', { style: { fontSize: '20px', fontWeight: '600', color: 'white', marginBottom: '12px' } }, '📊 About This Evaluation'),
+            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '12px' } }, 'This leaderboard evaluates natural language models on their ability to answer urology questions. Models must respond to multiple-choice questions about urological knowledge, demonstrating their understanding and mastery of this medical specialty.'),
+            React.createElement('p', { style: { color: '#d1d5db', marginBottom: '16px' } }, 'Questions are from the SAS (Servicio Andaluz de Salud) for the ', React.createElement('strong', null, 'Convocatoria Concurso Oposición'), ' - specialized medical examination for urology residents.'),
+            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', color: '#d1d5db' } },
+              React.createElement('span', null, 'Dataset: ', React.createElement('a', { href: 'https://huggingface.co/datasets/SASLeaderboard/results', style: { color: '#60a5fa', textDecoration: 'none' } }, 'SASLeaderboard/results')),
+              lastUpdated && React.createElement('span', { style: { fontSize: '14px' } }, `Last updated: ${lastUpdated.toLocaleString('en-US')}`)
+            )
+          ),
+          React.createElement('div', { style: styles.academicCard },
+            React.createElement('h4', { style: { fontSize: '18px', fontWeight: '600', color: 'white', marginBottom: '8px' } }, '🎓 Academic Project'),
+            React.createElement('p', { style: { color: '#d1d5db', fontSize: '14px' } }, 
+              'Final project for IES Rafael Alberti', React.createElement('br'),
+              'Course: Artificial Intelligence and Big Data', React.createElement('br'),
+              'Subject: Artificial Intelligence Models'
+            )
+          )
+        )
+      )
+    )
   );
 };