Replace iframe video with clickable thumbnail linking to YouTube

Author: sgmoorthy

src/components/RaagaGenerator.jsx

@@ -161,23 +161,79 @@ function RaagaGenerator() {
           </Box>
         </Box>
 
-        {/* Technical Demo Video */}
-        <Box sx={{ position: 'relative', paddingTop: '56.25%', width: '100%', mb: 2, borderRadius: '12px', overflow: 'hidden', border: '2px solid #F1C40F' }}>
+        {/* Technical Demo Video - Click to Play on YouTube */}
+        <Box
+          component="a"
+          href="https://www.youtube.com/watch?v=O8hMDRZVhWM"
+          target="_blank"
+          rel="noopener noreferrer"
+          sx={{
+            display: 'block',
+            position: 'relative',
+            width: '100%',
+            paddingTop: '56.25%',
+            mb: 2,
+            borderRadius: '12px',
+            overflow: 'hidden',
+            border: '2px solid #F1C40F',
+            textDecoration: 'none',
+            cursor: 'pointer',
+            '&:hover': {
+              opacity: 0.9,
+              transform: 'scale(1.01)',
+              transition: 'all 0.2s ease',
+            }
+          }}
+        >
           <Box
-            component="iframe"
-            src="https://www.youtube.com/embed/jCij1xF1X9w?rel=0&enablejsapi=1"
-            title="AI Music Generation with Deep Learning"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowFullScreen
+            component="img"
+            src="https://img.youtube.com/vi/O8hMDRZVhWM/maxresdefault.jpg"
+            alt="DeepRaaga Technical Demo - Click to Watch on YouTube"
             sx={{
               position: 'absolute',
               top: 0,
               left: 0,
               width: '100%',
               height: '100%',
-              border: 'none',
+              objectFit: 'cover',
             }}
           />
+          {/* Play button overlay */}
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 80,
+              height: 80,
+              bgcolor: 'rgba(211, 84, 0, 0.9)',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
+            }}
+          >
+            <PlayArrowIcon sx={{ color: 'white', fontSize: 40, ml: 0.5 }} />
+          </Box>
+          {/* Label */}
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              bgcolor: 'rgba(0,0,0,0.7)',
+              color: 'white',
+              p: 1.5,
+              textAlign: 'center',
+            }}
+          >
+            <Typography variant="body2" sx={{ fontWeight: 500 }}>
+              ▶ Watch Technical Demo on YouTube
+            </Typography>
+          </Box>
         </Box>
 
         {/* Workflow Steps */}