production: docker + nginx config for rf-flux.com

src/components/sections/GlobalOperations_old.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import { useState, useRef, Suspense, useEffect } from "react";
+import { Canvas, useFrame, useLoader, useThree } from "@react-three/fiber";
+import { OrbitControls, QuadraticBezierLine } from "@react-three/drei";
+import * as THREE from "three";
+import { motion, AnimatePresence } from "framer-motion";
+import { MapPin, Calendar, History, X, ArrowUpRight } from "lucide-react";
+import CaseStudyModal, { CaseStudyData } from "@/components/ui/CaseStudyModal"; 
+import { useLocale, useTranslations } from "next-intl";
+
+const RADIUS = 2;
+
+function latLongToVector3(lat: number, lon: number, radius: number) {
+  const phi = (90 - lat) * (Math.PI / 180);
+  const theta = (lon + 180) * (Math.PI / 180);
+  const x = -(radius * Math.sin(phi) * Math.cos(theta));
+  const z = (radius * Math.sin(phi) * Math.sin(theta));
+  const y = (radius * Math.cos(phi));
+  return new THREE.Vector3(x, y, z);
+}
+
+// ── COMPONENTE OPTIMIZADO 1: TEXTURA DE LA TIERRA CON ALTA RESOLUCIÓN ──
+function EarthMesh({ isDark }: { isDark: boolean }) {
+  const earthTexture = useLoader(THREE.TextureLoader, "https://unpkg.com/three-globe/example/img/earth-water.png");
+  const { gl } = useThree();
+
+  // 🔥 Filtro de hardware para forzar nitidez al hacer Zoom
+  useEffect(() => {
+    if (earthTexture) {
+      earthTexture.anisotropy = gl.capabilities.getMaxAnisotropy(); // Máximo detalle en ángulos inclinados
+      earthTexture.minFilter = THREE.LinearMipmapLinearFilter;
+      earthTexture.magFilter = THREE.LinearFilter;
+      earthTexture.colorSpace = THREE.SRGBColorSpace; // Colores más vibrantes y definidos
+      earthTexture.generateMipmaps = true;
+      earthTexture.needsUpdate = true;
+    }
+  }, [earthTexture, gl]);
+
+  return (
+    <mesh>
+      {/* Regresamos a 64 segmentos para optimizar rendimiento (la nitidez ahora viene de la textura) */}
+      <sphereGeometry args={[RADIUS * 0.99, 64, 64]} />
+      <meshBasicMaterial 
+        map={earthTexture} 
+        color={isDark ? "#06F5E1" : "#86868B"} 
+        transparent 
+        opacity={isDark ? 0.4 : 0.3} 
+        blending={isDark ? THREE.AdditiveBlending : THREE.NormalBlending} 
+      />
+    </mesh>
+  );
+}
+
+// ── COMPONENTE OPTIMIZADO 2: EL NODO INTELIGENTE QUE RESPONDE AL ZOOM ──
+function MapNode({ marker, isSelected, hqPosition, onSelectMarker, isDark }: any) {
+  const meshRef = useRef<THREE.Group>(null);
+  const pos = latLongToVector3(marker.lat, marker.lon, RADIUS);
+
+  const isHQ = marker.nodeType === "hq";
+  const isEvent = marker.nodeType === "event";
+  const nodeColor = isHQ ? (isDark ? "#FFFFFF" : "#1D1D1F") : isEvent ? "#A855F7" : "#0066CC";
+  
+  const baseSize = isHQ ? 0.04 : isEvent ? 0.035 : 0.025; 
+
+  useFrame(({ camera }) => {
+    if (!meshRef.current) return;
+    const dist = camera.position.length();
+    const scaleFactor = Math.max(0.2, dist / 12); 
+    const finalScale = isSelected ? scaleFactor * 1.8 : scaleFactor;
+    meshRef.current.scale.set(finalScale, finalScale, finalScale);
+  });
+
+  const distance = hqPosition.distanceTo(pos);
+  const arcElevation = RADIUS + (distance * 0.25) + 0.1; 
+  const midPoint = hqPosition.clone().lerp(pos, 0.5).normalize().multiplyScalar(arcElevation);
+
+  return (
+    <group>
+      <group ref={meshRef} position={pos}>
+        <mesh>
+          <sphereGeometry args={[baseSize, 32, 32]} />
+          <meshBasicMaterial color={nodeColor} />
+        </mesh>
+        
+        {/* CAJA DE COLISIÓN AMPLIADA */}
+        <mesh 
+          visible={false} 
+          onClick={(e) => { 
+            e.stopPropagation(); 
+            onSelectMarker(isSelected ? null : marker.id); 
+          }}
+          onPointerOver={(e) => { e.stopPropagation(); document.body.style.cursor = 'pointer'; }} 
+          onPointerOut={(e) => { e.stopPropagation(); document.body.style.cursor = 'auto'; }}
+        >
+          <sphereGeometry args={[baseSize * 4, 16, 16]} />
+          <meshBasicMaterial transparent opacity={0} />
+        </mesh>
+      </group>
+
+      {!isHQ && (
+        <QuadraticBezierLine 
+          start={hqPosition} 
+          end={pos} 
+          mid={midPoint} 
+          color={nodeColor} 
+          lineWidth={isSelected ? 2.5 : 1.5} 
+          transparent 
+          opacity={isSelected ? 0.9 : 0.25} 
+        />
+      )}
+    </group>
+  );
+}
+
+// ── COMPONENTE DE ENSAMBLAJE DE LA ESFERA ──
+function HologramSphere({ activeFilter, activeSubFilter, selectedMarker, onSelectMarker, isDark, dbNodes, hqPosition }: any) {
+  const globeRef = useRef<THREE.Group>(null);
+
+  // 🔥 MAGIA DE ROTACIÓN INTELIGENTE 🔥
+  useFrame(({ camera }) => {
+    // La cámara inicia en Z=7. Si el usuario hace zoom in (distancia < 6.5), detenemos la rotación.
+    // Si vuelve a alejar el mapa a su estado normal (distancia > 6.5), retoma la rotación.
+    const distance = camera.position.length();
+    
+    if (globeRef.current && !selectedMarker && distance > 6.5) {
+      globeRef.current.rotation.y += 0.0005; 
+    }
+  });
+
+  return (
+    <group ref={globeRef}>
+      <mesh><sphereGeometry args={[RADIUS * 1.04, 64, 64]} /><meshBasicMaterial color={isDark ? "#00F0FF" : "#0066CC"} transparent opacity={isDark ? 0.1 : 0.05} side={THREE.BackSide} blending={THREE.AdditiveBlending} depthWrite={false} /></mesh>
+      <mesh><sphereGeometry args={[RADIUS * 0.98, 64, 64]} /><meshBasicMaterial color={isDark ? "#050505" : "#E5E5EA"} /></mesh>
+      
+      {/* Esfera Terrestre mejorada con texturas nítidas */}
+      <EarthMesh isDark={isDark} />
+      
+      <mesh><sphereGeometry args={[RADIUS, 64, 64]} /><meshBasicMaterial color={isDark ? "#0066CC" : "#86868B"} wireframe transparent opacity={0.06} /></mesh>
+
+      {dbNodes.map((marker: any) => {
+        const isHQ = marker.nodeType === "hq";
+        const isEvent = marker.nodeType === "event";
+        
+        const matchesMain = activeFilter === "all" || (activeFilter === "installation" && !isEvent && !isHQ) || (activeFilter === "event" && isEvent) || (activeFilter === "legacy" && isHQ);
+        const matchesSub = !activeSubFilter || marker.application === activeSubFilter || isHQ;
+        const isVisible = matchesMain && matchesSub;
+        
+        if (!isVisible) return null;
+
+        return (
+          <MapNode 
+            key={marker.id} 
+            marker={marker} 
+            isSelected={selectedMarker === marker.id} 
+            hqPosition={hqPosition} 
+            onSelectMarker={onSelectMarker} 
+            isDark={isDark} 
+          />
+        );
+      })}
+    </group>
+  );
+}
+
+// ── INTERFAZ GRÁFICA PRINCIPAL ──
+export default function GlobalOperations({ dbNodes = [], dbApps = [] }: { dbNodes?: any[], dbApps?: any[] }) {
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [activeSubFilter, setActiveSubFilter] = useState<string | null>(null);
+  const [selectedMarkerId, setSelectedMarkerId] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+
+  const t = useTranslations("GlobalOperations"); 
+
+  const dynamicSubFilters = dbApps
+    .filter(app => app.isActive)
+    .map(app => ({ id: app.slug, label: app.title }));
+
+  useEffect(() => {
+    const checkTheme = () => setIsDark(document.documentElement.classList.contains("dark"));
+    checkTheme();
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  const filters = [ 
+    { id: "all", label: t("filterAll"), icon: MapPin }, 
+    { id: "installation", label: t("filterInstallations"), icon: MapPin }, 
+    { id: "event", label: t("filterEvents"), icon: Calendar }, 
+    { id: "legacy", label: t("filterHQ"), icon: History } 
+  ];
+  
+  const selectedData = dbNodes.find(d => d.id === selectedMarkerId);
+
+  const hqNode = dbNodes.find(d => d.application === "hq");
+  const hqLat = hqNode ? hqNode.lat : 45.78; 
+  const hqLon = hqNode ? hqNode.lon : 11.76;
+  const hqPosition = latLongToVector3(hqLat, hqLon, RADIUS);
+
+  const handleMainFilter = (id: string) => {
+    setActiveFilter(id);
+    setActiveSubFilter(null);
+    setSelectedMarkerId(null);
+  };
+
+  return (
+    <>
+      <section id="global" className="relative w-full max-w-7xl mx-auto px-6 py-32 z-10">
+        <div className="flex flex-col lg:flex-row gap-12 items-center h-auto lg:h-[700px]">
+          
+          <div className="w-full lg:w-1/3 flex flex-col h-full justify-center mb-12 lg:mb-0">
+            <div className="p-6 md:p-8 -ml-6 md:-ml-8 rounded-3xl bg-white/40 dark:bg-[#0A0A0C]/50 backdrop-blur-md border border-white/50 dark:border-white/5 shadow-sm transition-colors">
+              <h2 className="text-sm font-semibold tracking-widest text-[#0066CC] dark:text-[#4DA6FF] uppercase mb-4">{t("subtitle")}</h2>
+              <h3 className="text-4xl md:text-5xl font-light text-[#1D1D1F] dark:text-[#F5F5F7] tracking-tight mb-8 leading-[1.1] transition-colors">
+                {t("title1")} <br /><span className="font-medium">{t("title2")}</span>
+              </h3>
+
+              <div className="flex flex-wrap gap-2 mb-4">
+                {filters.map((f) => (
+                  <button key={f.id} onClick={() => handleMainFilter(f.id)} className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 border ${ activeFilter === f.id ? "bg-[#1D1D1F] dark:bg-white text-white dark:text-[#1D1D1F] border-[#1D1D1F] dark:border-white shadow-md" : "bg-white/60 dark:bg-white/5 text-[#86868B] dark:text-[#A1A1A6] border-white/60 dark:border-white/10 hover:text-[#1D1D1F] dark:hover:text-white" } backdrop-blur-md`}>
+                    {f.label}
+                  </button>
+                ))}
+              </div>
+
+              <AnimatePresence>
+                {activeFilter === "installation" && (
+                  <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} className="flex flex-wrap gap-2 mb-4 overflow-hidden">
+                    <span className="w-full text-xs font-semibold uppercase tracking-widest text-[#86868B] mb-1">{t("filterByApp")}</span>
+                    {dynamicSubFilters.map((sub) => (
+                      <button key={sub.id} onClick={() => { setActiveSubFilter(activeSubFilter === sub.id ? null : sub.id); setSelectedMarkerId(null); }} className={`px-3 py-1.5 rounded-full text-xs transition-all duration-200 border ${ activeSubFilter === sub.id ? "bg-[#0066CC]/10 dark:bg-[#0066CC]/20 text-[#0066CC] dark:text-[#4DA6FF] border-[#0066CC]/30 font-medium" : "bg-white/40 dark:bg-transparent text-[#86868B] border-transparent hover:text-[#1D1D1F] dark:hover:text-white" }`}>
+                        {sub.label}
+                      </button>
+                    ))}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            <AnimatePresence mode="wait">
+              {!selectedMarkerId && (
+                <motion.div key={activeFilter + (activeSubFilter || "")} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="bg-white/60 dark:bg-[#1D1D1F]/60 backdrop-blur-2xl border border-white/40 dark:border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] rounded-3xl p-8 mt-4 transition-colors">
+                  <h4 className="text-[#86868B] text-xs font-semibold uppercase tracking-wider mb-2 flex items-center gap-2"><span className="w-2 h-2 rounded-full bg-[#0066CC] animate-pulse"></span>{t("networkStatus")}</h4>
+                  <p className="text-xl font-light text-[#1D1D1F] dark:text-[#F5F5F7] mb-6 leading-relaxed transition-colors">
+                    {activeSubFilter 
+                      ? t("statusShowing", { app: activeSubFilter.replace("-", " ") }) 
+                      : t("statusTracking", { count: dbNodes.filter(n => 
+                          (activeFilter === "all") || 
+                          (activeFilter === "installation" && n.nodeType === "installation") ||
+                          (activeFilter === "event" && n.nodeType === "event") ||
+                          (activeFilter === "legacy" && n.nodeType === "hq")
+                        ).length })}
+                  </p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
+          <div className="w-full lg:w-2/3 h-[500px] lg:h-full relative rounded-[2.5rem] overflow-hidden bg-white/30 dark:bg-transparent backdrop-blur-sm dark:backdrop-blur-none border border-white/40 dark:border-transparent transition-all duration-700">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] bg-[radial-gradient(circle_at_center,rgba(0,102,204,0.15)_0%,transparent_60%)] hidden dark:block pointer-events-none blur-3xl" />
+            
+            <div className="absolute top-4 right-4 z-10 text-[10px] font-mono text-[#86868B] dark:text-[#A1A1A6] tracking-widest uppercase bg-white/50 dark:bg-white/5 px-3 py-1 rounded-full backdrop-blur-md border border-white/50 dark:border-white/10 transition-colors pointer-events-none">
+              {t("helpText")}
+            </div>
+            
+            <AnimatePresence>
+              {selectedData && (
+                <motion.div initial={{ opacity: 0, x: 20, y: 20 }} animate={{ opacity: 1, x: 0, y: 0 }} exit={{ opacity: 0, x: 20, y: 20 }} className="absolute bottom-4 right-4 z-20 w-[calc(100%-2rem)] md:w-80 bg-white/80 dark:bg-[#1D1D1F]/80 backdrop-blur-2xl border border-white/60 dark:border-white/10 shadow-lg dark:shadow-[0_10px_40px_rgba(0,0,0,0.5)] rounded-2xl p-6 transition-colors">
+                  <div className="flex justify-between items-start mb-4">
+                    <div className="flex items-center gap-2 text-[#0066CC] dark:text-[#4DA6FF]">
+                      <MapPin size={14} />
+                      <span className="text-[10px] font-semibold uppercase tracking-wider">
+                        {selectedData.nodeType === 'event' ? t("typeEvent") : selectedData.nodeType === 'hq' ? t("typeHQ") : t("typeInstall")}
+                      </span>
+                    </div>
+                    <button onClick={() => setSelectedMarkerId(null)} className="text-[#86868B] hover:text-[#1D1D1F] dark:hover:text-white transition-colors">
+                      <X size={16} />
+                    </button>
+                  </div>
+                  <h4 className="text-xl font-medium text-[#1D1D1F] dark:text-[#F5F5F7] mb-1">{selectedData.title}</h4>
+                  <p className="text-sm text-[#86868B] dark:text-[#A1A1A6] mb-4">{selectedData.location}</p>
+                  <div className="bg-[#F5F5F7] dark:bg-white/5 rounded-lg p-3 mb-4 border border-transparent dark:border-white/5">
+                    <span className="text-[10px] uppercase tracking-wider text-[#86868B] dark:text-[#A1A1A6] block mb-1">{t("statusDetails")}</span>
+                    <span className="text-sm font-medium text-[#1D1D1F] dark:text-[#F5F5F7]">{selectedData.stats}</span>
+                  </div>
+                  <button onClick={() => setIsModalOpen(true)} className="w-full flex justify-center items-center gap-2 bg-[#1D1D1F] dark:bg-[#0066CC] text-white py-2.5 rounded-xl text-sm font-medium hover:bg-[#0066CC] dark:hover:bg-[#4DA6FF] transition-colors">
+                    {t("viewCaseStudy")} <ArrowUpRight size={14} />
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Canvas camera={{ position: [0, 0, 7], fov: 55 }} dpr={[1, 2]} style={{ touchAction: "none" }}>
+              <ambientLight intensity={1.5} />
+              <directionalLight position={[10, 10, 5]} intensity={2} />
+              <OrbitControls enableZoom={true} minDistance={3} maxDistance={12} enablePan={false} autoRotate={false} />
+              <Suspense fallback={null}>
+                <HologramSphere activeFilter={activeFilter} activeSubFilter={activeSubFilter} selectedMarker={selectedMarkerId} onSelectMarker={setSelectedMarkerId} isDark={isDark} dbNodes={dbNodes} hqPosition={hqPosition} />
+              </Suspense>
+            </Canvas>
+          </div>
+        </div>
+      </section>
+
+      <CaseStudyModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} data={selectedData as CaseStudyData || null} />
+    </>
+  );
+}