Bob AI: Fix duplicate useState import declaration in page.tsx. Remov

src/app/page.tsx

@@ -11,10 +11,12 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Sparkles } from 'lucide-react';
+import { Sparkles, X } from 'lucide-react';
 
 export default function LandingPage() {
   const [bubbles, setBubbles] = useState([]);
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const [videoUrl, setVideoUrl] = useState('');
 
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -23,8 +25,7 @@ export default function LandingPage() {
         x: e.clientX,
         y: e.clientY,
       };
-
-      setBubbles((prev) => [...prev, newBubble]);
+setBubbles((prev) => [...prev, newBubble]);
 
       // Remove bubble after animation completes (2 seconds)
       setTimeout(() => {
@@ -35,6 +36,16 @@ export default function LandingPage() {
     window.addEventListener('mousemove', handleMouseMove);
     return () => window.removeEventListener('mousemove', handleMouseMove);
   }, []);
+
+  const openVideoPopup = (url) => {
+    setVideoUrl(url);
+    setIsVideoOpen(true);
+  };
+
+  const closeVideoPopup = () => {
+    setIsVideoOpen(false);
+    setVideoUrl('');
+  };
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -48,6 +59,41 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
+      {/* Video Popup Modal */}
+      {isVideoOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Overlay Backdrop */}
+          <div
+            className="absolute inset-0 bg-black bg-opacity-75 pointer-events-auto"
+            onClick={closeVideoPopup}
+          />
+          
+          {/* Popup Container */}
+          <div className="relative z-10 w-full max-w-4xl mx-4 bg-black rounded-lg overflow-hidden shadow-2xl pointer-events-auto">
+            {/* Close Button */}
+            <button
+              onClick={closeVideoPopup}
+              className="absolute top-4 right-4 z-20 bg-white bg-opacity-20 hover:bg-opacity-40 rounded-full p-2 transition-all duration-200"
+              aria-label="Close video"
+            >
+              <X size={24} className="text-white" />
+            </button>
+
+            {/* Video Player */}
+            <div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
+              <iframe
+                src={videoUrl}
+                className="absolute inset-0 w-full h-full"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                title="Video player"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Anatomical Shape Container */}
       <div className="fixed inset-0 pointer-events-none overflow-hidden">
         {bubbles.map((bubble) => (