feat(video-page): add related videos section with shorts and regular videos

- Add new related videos section with styling for shorts and regular videos
- Implement logic to load and display related videos based on current video category
- Restructure video page layout to accommodate new related videos section
- Add shuffle functionality for video recommendations

js/video.js

@@ -1,15 +1,18 @@
 let videoDetails = {};
 let comments = [];
+let allVideos = [];
 
 async function loadVideoData() {
     try {
         const response = await fetch('src/video.json');
         const data = await response.json();
         videoDetails = {};
+        allVideos = data.videos;
         data.videos.forEach(video => {
             videoDetails[video.id] = video;
         });
         comments = data.comments;
+        console.log('Video data loaded successfully:', allVideos.length, 'videos');
     } catch (error) {
         console.error('Failed to load video data:', error);
     }
@@ -17,12 +20,17 @@ async function loadVideoData() {
 
 function getVideoIdFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get('id');
+  const id = urlParams.get('id');
+  return id ? parseInt(id) : 1;
 }
 
 function loadVideoInfo() {
   const videoId = getVideoIdFromUrl();
+  console.log('Video ID:', videoId);
+  console.log('All videos:', allVideos.length);
+  
   const videoInfo = videoDetails[videoId];
+  console.log('Video info:', videoInfo);
   
   if (videoInfo) {
     document.getElementById('videoTitle').textContent = videoInfo.title;
@@ -39,11 +47,101 @@ function loadVideoInfo() {
     }
     
     document.title = videoInfo.title + ' - YouTube Revived';
+    
+    loadRelatedVideos(videoInfo);
   }
   
   renderComments();
 }
 
+function loadRelatedVideos(currentVideo) {
+  console.log('Loading related videos for:', currentVideo.title);
+  console.log('Current category:', currentVideo.category);
+  
+  const currentCategory = currentVideo.category;
+  const currentId = currentVideo.id;
+  
+  const shortsList = document.getElementById('shortsList');
+  const regularVideosList = document.getElementById('regularVideosList');
+  
+  console.log('Shorts list element:', shortsList);
+  console.log('Regular videos list element:', regularVideosList);
+  
+  shortsList.innerHTML = '';
+  regularVideosList.innerHTML = '';
+  
+  const shorts = allVideos.filter(v => v.type === 'short' && v.id !== currentId);
+  const regularVideos = allVideos.filter(v => v.type === 'video' && v.id !== currentId);
+  
+  console.log('Found shorts:', shorts.length);
+  console.log('Found regular videos:', regularVideos.length);
+  
+  const sameCategoryShorts = shorts.filter(v => v.category === currentCategory);
+  const otherShorts = shorts.filter(v => v.category !== currentCategory);
+  
+  const sameCategoryRegularVideos = regularVideos.filter(v => v.category === currentCategory);
+  const otherRegularVideos = regularVideos.filter(v => v.category !== currentCategory);
+  
+  console.log('Same category shorts:', sameCategoryShorts.length);
+  console.log('Other shorts:', otherShorts.length);
+  console.log('Same category regular videos:', sameCategoryRegularVideos.length);
+  console.log('Other regular videos:', otherRegularVideos.length);
+  
+  shuffleArray(otherShorts);
+  shuffleArray(otherRegularVideos);
+  
+  const selectedShorts = [...sameCategoryShorts, ...otherShorts].slice(0, 3);
+  const selectedRegularVideos = [...sameCategoryRegularVideos, ...otherRegularVideos].slice(0, 10);
+  
+  console.log('Selected shorts:', selectedShorts.length);
+  console.log('Selected regular videos:', selectedRegularVideos.length);
+  
+  selectedShorts.forEach(short => {
+    const shortElement = document.createElement('div');
+    shortElement.className = 'short-item';
+    shortElement.innerHTML = `
+      <div class="short-thumbnail">
+        <img src="${short.thumbnail}" alt="${short.title}">
+      </div>
+      <div class="short-info">
+        <h4 class="short-title">${short.title}</h4>
+        <p class="short-channel">${short.channel}</p>
+        <p class="short-views">${short.views} views</p>
+      </div>
+    `;
+    shortElement.addEventListener('click', () => {
+      window.location.href = `video.html?id=${short.id}`;
+    });
+    shortsList.appendChild(shortElement);
+  });
+  
+  selectedRegularVideos.forEach(video => {
+    const videoElement = document.createElement('div');
+    videoElement.className = 'regular-video-item';
+    videoElement.innerHTML = `
+      <div class="regular-video-thumbnail">
+        <img src="${video.thumbnail}" alt="${video.title}">
+      </div>
+      <div class="regular-video-info">
+        <h4 class="regular-video-title">${video.title}</h4>
+        <p class="regular-video-channel">${video.channel}</p>
+        <p class="regular-video-meta">${video.views} views • ${video.uploadDate}</p>
+      </div>
+    `;
+    videoElement.addEventListener('click', () => {
+      window.location.href = `video.html?id=${video.id}`;
+    });
+    regularVideosList.appendChild(videoElement);
+  });
+}
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
 function renderComments() {
   const commentsList = document.getElementById('commentsList');
   const commentsCount = document.getElementById('commentsCount');