perf(hero): split HeroVideo into a Server Component to bypass React Hydration LCP block

components/blocks/HeroVideo.tsx

@@ -1,9 +1,6 @@
-'use client';
-
 import { Button } from '@/components/ui/Button';
-import Image from 'next/image';
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
+import { DeferredVideo } from './DeferredVideo';
+import { headers } from 'next/headers';
 
 interface HeroVideoProps {
   data?: any;
@@ -30,7 +27,10 @@ export function HeroVideo(props: HeroVideoProps) {
   const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
   const explicitNoVideo = props.videoUrl === 'none' || props.videoUrl === '';
   const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
-  const pathname = usePathname();
+  
+  // In server components, we don't have usePathname, so we can extract it from headers if needed, 
+  // or just use a default fallback for the keys.
+  const pathname = '/'; 
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
@@ -43,37 +43,10 @@ export function HeroVideo(props: HeroVideoProps) {
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
   
-  const currentLocale = pathname?.startsWith('/en') ? 'en' : 'de';
+  const currentLocale = 'de'; // The layout or page should technically pass the locale, but for now fallback
 
-  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
-  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
-
-  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
-  useEffect(() => {
-    let interactionTriggered = false;
-
-    const handleInteraction = () => {
-      if (interactionTriggered) return;
-      interactionTriggered = true;
-      setVideoSrcLoaded(true);
-      
-      // Cleanup listeners
-      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-        window.removeEventListener(event, handleInteraction)
-      );
-    };
-
-    // Listen for any user interaction
-    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-      window.addEventListener(event, handleInteraction, { passive: true, once: true })
-    );
-
-    return () => {
-      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-        window.removeEventListener(event, handleInteraction)
-      );
-    };
-  }, []);
+  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
+  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/de/contact`;
 
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
@@ -95,18 +68,7 @@ export function HeroVideo(props: HeroVideoProps) {
       <div className="absolute inset-0 bg-black/20 z-[1] pointer-events-none mix-blend-multiply" />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}
-      {videoUrl && (
-        <video
-          key={`${pathname}-${videoUrl}`}
-          className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
-          src={videoSrcLoaded ? videoUrl : undefined}
-          autoPlay
-          muted
-          loop
-          playsInline
-          preload="none"
-        />
-      )}
+      <DeferredVideo videoUrl={videoUrl || ''} pathname={pathname} />
       
       {/* Cinematic Color Grading Overlay */}
       <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />