refactor: centralize data fetching in layout components

app/components/layout/Header/HeaderTop.tsx

@@ -18,39 +18,15 @@ interface HeaderData {
             name: string;
             value: string;
         }>;
-    };
+    } | null;
 }
 
-const HeaderTop = () => {
-    const [data, setData] = useState<HeaderData>(headerData);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        const fetchHeaderData = async () => {
-            try {
-                const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
-                const response = await fetch(`${apiUrl}/api/header`);
-
-                if (response.ok) {
-                    const result = await response.json();
-                    if (result.success && result.data && result.data.top) {
-                        setData({
-                            top: result.data.top,
-                        });
-                    }
-                }
-            } catch (error) {
-                console.warn("Failed to fetch header data from API, using fallback:", error);
-                // Use fallback data (already set as initial state)
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchHeaderData();
-    }, []);
-
-    const { phone, email, location, socialLinks, languages } = data.top;
+const HeaderTop: React.FC<{ data: HeaderData['top'] }> = ({ data }) => {
+    // Use passed data or fallback to local JSON if data is null (though parent should handle fetching)
+    // If data is null (initial load), we can use headerData fallback or render nothing/skeleton
+    
+    const displayData = data || headerData.top;
+    const { phone, email, location, socialLinks, languages } = displayData;
 
     return (
         <div className="header-top-section">