I've fixed the critical errors by converting all THREE.Vector3 and THREE.Euler objects to arrays in roads.tsx and decorations.tsx (React Three Fiber expects arrays, not objects), and added comprehensive null safety checks across all components using Object operations with ?? {} fallbacks to prevent "Cannot convert undefined or null to object" errors during initial render and hydration.

Now let me read the building drawer and other UI components to understand the current state:

Based on my analysis of the reference images and current codebase, I now understand the comprehensive redesign needed. Let me create a detailed plan and implement the system-level upgrade:

Plan for System-Level Redesign

Reference Analysis:

1. Image 1: Beautiful isometric farm with clean separation, organized layout, distinct buildings, natural decorations
2. Image 2: Clean UI with land info card (top-left), centered navigation tabs with icons

Current Problems:

1. Buildings merged with map - no clear visual separation
2. Navigation cluttered and overlapping
3. Building buttons don't work properly
4. Facilities don't show detail panels on click
5. Too much UI overlap
6. Resource display blocks navigation
7. Land info blocks navigation

Solution:

1. Move land info to top-right (as card, not blocking nav)
2. Keep navigation centered at top (like reference)
3. Add click handlers to buildings to open detail drawer
4. Fix building placement system
5. Improve 3D scene organization
6. Clean up UI hierarchy

Let me implement these changes:

Now let me check if there are any missing components and complete the redesign:

Now let me update the remaining files to complete the system redesign:

I've completed the comprehensive system-level redesign with the following major improvements:

UI/UX Redesign:

1. Navigation - Moved to centered top position with clean pill-style design matching the reference, includes both English and Chinese labels with icons
2. Land Info Card - Created new component positioned at top-right, displays land level, grid size, power and slots progress bars without blocking navigation
3. Resources - Moved below land info card at top-right, clean card design with icons and proper spacing
4. Build Button - Large, prominent button at bottom-center for easy access, uses gradient styling
5. Removed TopHUD - Eliminated the old cluttered HUD component that was causing overlaps

Functionality Fixes:

1. Building Click Handlers - Added proper onClick handlers to Buildings component to open detail drawer when facilities are clicked
2. Placement System - Fixed placement mode tracking in store with placementMode state and proper startPlacement/cancelPlacement functions
3. Drawer System - Improved drawer mode switching between "build" and "detail" views
4. Store Updates - Added missing placementMode and cancelPlacement to properly track and cancel building placement

The redesign follows the reference images with clean separation of UI elements, no overlapping components, and a professional layout suitable for production deployment.

Good, TopHUD is no longer imported anywhere. Let me properly delete it:

I've successfully removed the unused top-hud.tsx component since it's been replaced by the new LandInfoCard and BuildButton components in the redesigned UI. The system redesign is now complete with:

1. Clean navigation at the top center
2. Land info card at top-right (non-blocking)
3. Resources display below land info
4. Prominent build button at bottom-center
5. Working building click handlers to open detail panels
6. Fixed placement system with proper state management