Update src/components/sections/hero/HeroVideoExpand.tsx

src/components/sections/hero/HeroVideoExpand.tsx

@@ -1,62 +1,37 @@
-import { useState, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useCallback } from 'react';
 
 interface HeroVideoExpandProps {
   title: string;
   description: string;
-  videoUrl: string;
-  onComplete?: () => void;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
 }
 
-export default function HeroVideoExpand({ title, description, videoUrl, onComplete }: HeroVideoExpandProps) {
+export default function HeroVideoExpand({ title, description, primaryButton, secondaryButton }: HeroVideoExpandProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const handleComplete = useCallback(() => {
-    if (onComplete) onComplete();
-  }, [onComplete]);
-
-  useEffect(() => {
-    if (isExpanded) {
-      const timer = setTimeout(handleComplete, 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [isExpanded, handleComplete]);
-
   return (
     <section className="relative overflow-hidden py-24">
       <div className="container mx-auto px-4">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="max-w-4xl"
-        >
+        <div className="max-w-4xl">
           <h1 className="text-5xl md:text-7xl font-bold mb-6">{title}</h1>
           <p className="text-xl text-gray-600 mb-8">{description}</p>
-          <button 
-            onClick={() => setIsExpanded(true)}
-            className="px-8 py-4 bg-primary text-white rounded-full font-semibold hover:opacity-90 transition-opacity"
-          >
-            Watch Video
-          </button>
-        </motion.div>
-
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
-              onClick={() => setIsExpanded(false)}
-            >
-              <video 
-                src={videoUrl} 
-                autoPlay 
-                className="max-w-full max-h-full rounded-2xl"
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
+          <div className="flex gap-4">
+            <a href={primaryButton.href} className="px-8 py-4 bg-primary text-white rounded-full font-semibold">
+              {primaryButton.text}
+            </a>
+            <button onClick={() => setIsExpanded(true)} className="px-8 py-4 border border-gray-300 rounded-full font-semibold">
+              {secondaryButton.text}
+            </button>
+          </div>
+        </div>
+        {isExpanded && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4" onClick={() => setIsExpanded(false)}>
+             <div className="w-full max-w-4xl aspect-video bg-gray-800 rounded-2xl flex items-center justify-center">
+                <p className="text-white">Video Player</p>
+             </div>
+          </div>
+        )}
       </div>
     </section>
   );